Własna strona działa, ale w karcie przeglądarki nadal wyświetla się pusty globus albo domyślna ikona? W HTML najczęściej wystarczy dodać w sekcji <head> element <link rel="icon">, choć wybór formatu i adresu pliku decyduje o tym, czy favicon pojawi się także na ekranie głównym telefonu i w wynikach Google. Różnica między działającym minimum a kodem odpornym na różne przeglądarki mieści się w kilku atrybutach.
Dobry favicon w HTML wymaga poprawnej ścieżki, formatu i miejsca użycia
- Minimum: użyj
<link rel="icon" href="/favicon.png">wewnątrz<head>. - Najlepszy kompromis: połącz SVG dla przeglądarki z PNG dla szerszej zgodności i wyników Google.
- Unikaj: starego zapisu
rel="shortcut icon", który nie jest dziś właściwym wyborem. - Telefon: osobny
apple-touch-iconsłuży do ikony dodanej na ekran główny urządzenia Apple. - Google: ocenia favicon na poziomie hosta, więc podfolder nie dostanie osobnej ikony.
Minimalny kod mieści się w jednej linii, ale ścieżka decyduje o wszystkim
Najprostsza wersja wygląda tak:
<link rel="icon" href="/favicon.png" type="image/png">Ten element powinien znaleźć się w sekcji <head>, obok tytułu strony i arkuszy stylów. Relacja icon informuje przeglądarkę, że wskazany zasób ma reprezentować bieżący dokument. Tak definiuje ją HTML Standard WHATWG.
Najczęstszy błąd nie dotyczy samego znacznika, tylko adresu pliku. Ścieżka favicon.png może zostać odczytana względem aktualnego katalogu, więc na stronie /blog/wpis.html przeglądarka może szukać pliku w katalogu /blog/. Początkowy ukośnik w /favicon.png wskazuje katalog główny domeny i ogranicza ryzyko takiej pomyłki.
Jeżeli nie dodasz żadnego link rel="icon", przeglądarka może samodzielnie sprawdzić plik /favicon.ico w katalogu głównym. Nie traktowałbym tego jednak jako jedynej konfiguracji, ponieważ jawny zapis w kodzie ułatwia obsługę różnych formatów, urządzeń i systemów cache.
Przed uznaniem, że kod nie działa, sprawdź trzy rzeczy:
- czy plik istnieje dokładnie pod adresem zapisanym w
href, - czy serwer zwraca odpowiedź 200, a nie błąd 404,
- czy format w atrybucie
typeodpowiada rzeczywistemu plikowi.
SVG pasuje do karty, PNG pomaga w wynikach Google
Jedna ikona może wyglądać dobrze w dużym podglądzie, a po zmniejszeniu do rozmiaru karty stać się nieczytelna. Dlatego format wybiera się pod miejsce użycia, a nie wyłącznie pod wygodę zapisania pliku.
| Format lub relacja | Gdzie sprawdza się najlepiej | Praktyczna decyzja |
|---|---|---|
| SVG | Karta przeglądarki, skalowanie do różnych rozmiarów | Dobry wybór dla prostego znaku, litery lub geometrycznego symbolu |
| PNG | Przeglądarki, wyniki Google, urządzenia mobilne | Bezpieczny format zapasowy z przezroczystością |
| ICO | Tradycyjna kompatybilność i plik w katalogu głównym | Przydatny jako fallback, szczególnie gdy projekt korzysta ze starszej konfiguracji |
apple-touch-icon |
Ikona strony dodanej na ekran główny iPhone’a lub iPada | Dodaj osobno, bo nie zastępuje standardowego faviconu |
Specyfikacja HTML dopuszcza określenie rozmiarów ikon przez atrybut sizes. Dla SVG skalowalnego można użyć wartości any, natomiast przy PNG podaje się rzeczywiste wymiary, na przykład 32x32. Nie wpisuj rozmiaru, którego plik faktycznie nie zawiera, bo przeglądarka może błędnie ocenić jego przydatność.
Praktyczna konfiguracja może wyglądać tak:
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">W dokumentacji MDN dotyczącej atrybutu rel opisano też zachowanie przy wielu ikonach. Przeglądarka porównuje między innymi type, sizes i media, a gdy kilka zasobów pasuje równie dobrze, może wybrać ostatni z nich.
Uważam, że dla większości stron firmowych, portfolio i aplikacji najlepszy jest układ SVG plus PNG. SVG daje czysty znak w interfejsie, a PNG ogranicza niespodzianki w usługach, które nie obsługują każdego wariantu grafiki wektorowej.
Shortcut icon brzmi znajomo, lecz dziś lepiej go usunąć
W wielu starszych poradnikach nadal pojawia się taki zapis:
<link rel="shortcut icon" href="/favicon.ico">Przeglądarki często go rozpoznają, więc stary kod może pozornie działać. Problem polega na tym, że shortcut nie jest potrzebnym dodatkiem do standardowej relacji ikony, a dokumentacja MDN określa ten zapis jako niezgodny z aktualnym sposobem deklarowania zasobu.
Właściwsza wersja to:
<link rel="icon" href="/favicon.ico">To drobna zmiana, ale usuwa niejasność i nie utrwala rozwiązania wywodzącego się ze starszych praktyk. Jeśli w projekcie widzisz oba zapisy, nie ma powodu trzymać ich równocześnie. Podwójna deklaracja może utrudnić ustalenie, który plik został faktycznie wybrany.
Podobny problem dotyczy kopiowania gotowych fragmentów bez sprawdzenia formatu. Zapis type="image/png" przy pliku SVG jest błędny, nawet jeśli nazwa pliku wygląda poprawnie. Rozszerzenie, zawartość pliku i typ MIME przesyłany przez serwer powinny wskazywać ten sam format.
Google ocenia favicon na poziomie hosta, nie pojedynczego folderu
Ikona w karcie przeglądarki i ikona przy wyniku wyszukiwania to powiązane, lecz odrębne przypadki. Google może wykorzystać favicon strony w wynikach, ale stosuje własne warunki dotyczące pliku, indeksowania i adresu.
Dokumentacja Google Search Central wymaga kwadratowego obrazu o proporcjach 1:1 i rozmiarze co najmniej 8 × 8 pikseli, a jednocześnie rekomenduje plik większy niż 48 × 48 pikseli. Wymienione formaty obejmują między innymi PNG, ICO, GIF, JPEG, BMP, PPM i TIFF.
Z tego wynika prosty wniosek: SVG może być świetnym faviconem dla przeglądarki, ale jeśli zależy ci również na obecności ikony w wynikach Google, dodaj PNG albo ICO jako wariant zgodny z listą obsługiwanych formatów. Sama poprawność znacznika HTML nie gwarantuje wyświetlenia grafiki w wyszukiwarce.
Google wymaga także, aby robot mógł pobrać stronę główną i sam plik ikony. Blokada w robots.txt, błąd serwera albo niestabilny adres mogą zatrzymać przetwarzanie. W dokumentacji zaktualizowanej 28 sierpnia 2026 roku doprecyzowano również listę obsługiwanych formatów i zasady dostępu robotów do faviconu.
Istotne ograniczenie dotyczy struktury witryny. Google obsługuje jedną faviconę dla danego hosta, więc example.com/blog nie dostanie osobnej ikony tylko dlatego, że znajduje się w innym podfolderze. Osobny favicon może dotyczyć subdomeny, na przykład app.example.com, ponieważ jest ona odrębnym hostem.
Objaw w przeglądarce prowadzi do innej przyczyny niż błąd w grafice
Pusty globus, stara ikona albo brak obrazu w wynikach Google nie oznaczają tego samego. Poniższa tabela skraca diagnozę do decyzji, którą można wykonać bez zgadywania.
| Sytuacja | Prawdopodobna przyczyna | Co zrobić |
|---|---|---|
| Ikona nie pojawia się w karcie | Błędna ścieżka, brak pliku albo znacznik poza sekcją <head> |
Otwórz adres z href bezpośrednio i sprawdź odpowiedź serwera |
| Na stronie głównej działa, a we wpisie nie | Ścieżka względna wskazuje inny katalog | Zamień favicon.png na ścieżkę od katalogu głównego, na przykład /favicon.png |
| Przeglądarka pokazuje nową ikonę, lecz Google nadal starą | Google nie zakończył ponownego pobierania albo adres pliku był często zmieniany | Zostaw stabilny URL i sprawdź dostęp robotów do strony oraz pliku |
| Ikona w wynikach Google znika | Plik nie jest kwadratowy, ma nieobsługiwany format albo jest zablokowany | Użyj kwadratowego PNG lub ICO, sprawdź kod odpowiedzi i reguły indeksowania |
| Na ekranie głównym iPhone’a pojawia się przypadkowy obraz | Brak osobnego apple-touch-icon |
Dodaj plik PNG z relacją apple-touch-icon |
W przypadku urządzeń Apple osobna deklaracja ma konkretną funkcję. Dokumentacja Apple dotycząca aplikacji webowych opisuje apple-touch-icon jako ikonę używaną przy dodawaniu strony do ekranu głównego. To inny scenariusz niż mała grafika widoczna obok tytułu karty.
Jeżeli po zmianie pliku nadal widzisz poprzednią wersję, najpierw otwórz stronę w oknie prywatnym albo wykonaj twarde odświeżenie. Gdy problem dotyczy wyłącznie wyników Google, lokalne odświeżenie przeglądarki niczego nie zmieni, bo przetwarzanie ikony odbywa się po stronie systemu wyszukiwarki.
Najbezpieczniejszy zestaw dla małej strony to trzy pliki i jedna zasada
Dla typowej strony internetowej wystarczy przygotować:
/favicon.svgdla skalowalnego znaku w nowoczesnych przeglądarkach,/favicon-32.pngjako wariant rastrowy,/apple-touch-icon.pngdla skrótu na ekranie głównym urządzeń Apple.
W kodzie mogą wystąpić dokładnie te trzy deklaracje:
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">Na miejscu osoby wdrażającej prostą stronę wybrałbym właśnie taki układ, bo rozdziela trzy różne zastosowania bez kopiowania przestarzałych zapisów. Jedna zasada spina całość: ścieżka musi być stabilna, plik kwadratowy, a deklarowany format zgodny z zawartością.
Jeśli projekt ma tylko jeden prosty znak i nie potrzebuje obsługi ekranu głównego, możesz zacząć od PNG w jednej linii. Gdy strona zaczyna działać jako produkt, portfolio albo aplikacja używana na wielu urządzeniach, dodanie SVG i ikony Apple ogranicza liczbę miejsc, w których marka może zostać zastąpiona domyślnym globusem.
