Czym jest Favicon (i jakie rozmiary są mi potrzebne)?

Favicon (skrót od "favorite icon") to mała grafika, którą przeglądarki pokazują obok tytułu strony w karcie, w pasku zakładek, w historii i coraz częściej w wynikach wyszukiwarek. Nazwa pochodzi z Internet Explorera 5 z 1999 roku, gdzie ikona służyła wyłącznie jako identyfikator zakładki. Dwadzieścia pięć lat później ten sam format pliku i ten sam znacznik HTML wciąż działają, ale rola favicona rozszerzyła się tak daleko poza ten pierwotny cel, że "po prostu wgraj plik .ico 16x16" nie jest już właściwą odpowiedzią.

Do czego favicon jest dziś faktycznie używany

Nowoczesne przeglądarki i systemy operacyjne czerpią z zestawu faviconów w wielu kontekstach, każdy z odmiennymi wymaganiami co do rozmiaru i formatu:

• Karty i zakładki przeglądarki. Zazwyczaj renderowane w 16x16 lub 32x32 pikselach CSS, ale na ekranach o wysokiej gęstości przeglądarka pobiera większą wersję i skaluje ją w dół. Maleńka, rozpikselowana ikona obok ostrego tytułu wygląda przestarzale.
• Wyniki wyszukiwania. Google pokazuje favicony obok mobilnych wyników wyszukiwania od 2019 roku, a na desktopie od 2023. Ikona musi mieć co najmniej 48x48, zalecane są wielokrotności 48, a plik musi być możliwy do zaindeksowania.
• Ekran główny iOS i Androida. Gdy użytkownik wybiera "dodaj do ekranu głównego", iOS pobiera apple-touch-icon (180x180), a Android pobiera ikony z manifestu web app (zazwyczaj 192x192 i 512x512). Bez wyraźnych deklaracji obie platformy generują rozmyty zrzut ekranu jako fallback.
• Progressive Web Apps. PWA zainstalowane jako samodzielne aplikacje korzystają z manifestu web app dla ikon w launcherze, przełączniku zadań i ekranie powitalnym. Złe rozmiary tutaj oznaczają instalowalną stronę, która wygląda na zepsutą.
• Przypięte karty Safari na macOS. Używa osobnego monochromatycznego SVG (mask-icon) dla wyglądu przypiętych kart. Niszowy przypadek, ale trywialny do obsłużenia.
• Przypinanie kafelków w Windows. Edge i menu Start Windows mogą przypinać strony jako kafelki, co wymaga osobnego zestawu deklaracji msapplication-TileImage.

Pragmatyczna konsekwencja: potrzebujesz małego zestawu plików (zwykle od czterech do sześciu), nie jednego .ico, oraz kilku tagów HTML link do ich zadeklarowania.

Które formaty plików mają znaczenie

W 2026 roku istotne są trzy formaty, a czasy, gdy potrzebowałeś wszystkich naraz, minęły.

• PNG. Właściwy standard. Powszechnie wspierany, bezstratny, przezroczyste tła działają wszędzie. Jeden PNG na rozmiar docelowy.
• SVG. Wspierany przez każdą nowoczesną przeglądarkę dla faviconów. Jeden SVG skaluje się do każdego rozmiaru i pozostaje ostry na ekranach o wysokiej gęstości bez osobnych zasobów retina. Zastrzeżenie: favicony SVG muszą być samodzielne (bez zewnętrznych referencji, bez zewnętrznych arkuszy stylów, bez osadzonych czcionek), a Safari obsługuje je tylko w połączeniu z fallbackiem PNG.
• ICO. Stary format kontenerowy, który może pomieścić wiele rozmiarów w jednym pliku. Wciąż przydatny w jednym konkretnym przypadku: żądanie do /favicon.ico w korzeniu strony, które każda przeglądarka, czytnik RSS i crawler robi niejawnie, nawet jeśli do niego nie linkujesz. Zwracanie 404 jest nieszkodliwe, ale generuje szum w logach serwera. Mały wielorozmiarowy plik .ico (16x16, 32x32, 48x48 w jednym pliku) wycisza to.

WebP i AVIF, choć doskonałe dla obrazów treści, nie są używane dla faviconów, ponieważ wsparcie przeglądarek w tej roli jest niespójne. Trzymaj się PNG i SVG.

Faktyczna lista plików, której potrzebujesz w 2026

Solidny, odporny na przyszłość zestaw faviconów pokrywa wszystkie powyższe konteksty tym minimum:

• favicon.ico — wielorozmiarowy (16, 32, 48), umieszczony w korzeniu strony
• favicon.svg — skalowalny, używany przez nowoczesne przeglądarki, gdy dostępny
• favicon-96x96.png — wyraźny rastrowy fallback w wygodnym średnim rozmiarze
• apple-touch-icon.png — 180x180, bez przezroczystości (iOS sam dodaje zaokrąglone narożniki)
• web-app-manifest-192x192.png — ekran główny Androida, launcher PWA
• web-app-manifest-512x512.png — ekran powitalny PWA, duże konteksty kafelków

To sześć plików. Odpowiadający HTML w <head>:

<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Oraz minimalny site.webmanifest:

{
  "name": "Nazwa Twojej Strony",
  "short_name": "Strona",
  "icons": [
    { "src": "/web-app-manifest-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/web-app-manifest-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

To pokrywa karty przeglądarki, zakładki, wyniki wyszukiwania Google, ekran główny iOS, ekran główny Androida i instalację PWA. Wszystko poza tym to obszar przypadków skrajnych.

Ograniczenia projektowe dla favicona, który faktycznie się czyta

Najtrudniejszą częścią projektowania favicona nie jest eksport, lecz stworzenie czegoś czytelnego w 16x16. Kilka praktycznych reguł, które konsekwentnie dają dobre rezultaty:

• Upraszczaj bezlitośnie. Pełne logo rzadko działa jako favicon 16x16. Użyj jednego dominującego elementu: litery, symbolu, abstrakcyjnego znaku. Wszystko z cienkimi liniami lub drobnymi detalami zlewa się w plamę.
• Mocny kontrast. Favicon znajduje się na jasnym lub ciemnym chromie przeglądarki, którego nie możesz przewidzieć. Czysta biel na przezroczystym znika w jasnych motywach; czerń na przezroczystym znika w ciemnych motywach. Użyj jednolitego tła lub zaprojektuj dla obu trybów (działa SVG z media queries prefers-color-scheme).
• Kwadratowe proporcje z bezpiecznym marginesem. Projektuj na kwadratowym płótnie, ale zachowaj około 10% paddingu od krawędzi. Niektóre platformy (iOS, ikony adaptywne Androida) przycinają lub maskują ikonę, a projekt sięgający do samej krawędzi zostaje obcięty.
• Testuj w rzeczywistym rozmiarze. Oglądanie ikony 16x16 przy zoomie 200% wprowadza w błąd. Wyrenderuj ją w 100% obok innych kart przeglądarki, aby zobaczyć, jak faktycznie rywalizuje o uwagę.

WordPress: jak działa Site Icon

WordPress ma wbudowane wsparcie dla favicona od wersji 4.3. W panelu administratora pod Wygląd, Dostosuj, Tożsamość witryny jest pole "Ikona witryny", które przyjmuje pojedyncze kwadratowe zdjęcie, minimum 512x512. WordPress następnie automatycznie generuje i serwuje różne rozmiary favicona z tego źródła.

Automatyczna generacja pokrywa favicon.ico, apple-touch-icon w 180x180 i standardowe rozmiary PNG w head HTML. Nie generuje domyślnie manifestu web app, więc instalacja PWA wróci do apple-touch-icon. Dla większości stron to wystarczy.

Niedociągnięcia wbudowanego Site Icon: nie potrafi serwować różnych plików dla różnych rozdzielczości (brak wsparcia SVG poza konwersją do rastra) i nie tworzy manifestu z większym rozmiarem 512x512, który preferują instalacje PWA i ekrany powitalne Androida. Dla strony, na której naprawdę zależy ci na wyglądzie PWA, uzupełnienie Site Icon o ręczne tagi <link> przez functions.php w child theme jest czystszą drogą. Wtyczki takie jak RealFaviconGenerator (również świetny generator webowy, jeśli chcesz pominąć ręczny eksport) obsługują to od początku do końca.

Jak zweryfikować, że twoja konfiguracja favicona działa

1. Kontrola karty. Otwórz stronę w oknie incognito (aby uniknąć zbuforowanych faviconów) i potwierdź, że ikona pojawia się obok tytułu. Przetestuj przynajmniej Chrome, Firefox i Safari.
2. Żądanie do korzenia. Odwiedź bezpośrednio /favicon.ico. Powinno zwrócić 200 z ikoną, nie 404. Wiele stron tego nie zalicza, nawet gdy ich HTML ma poprawny <link rel="icon">.
3. Ekran główny iOS. Na iPhonie dotknij przycisku udostępniania w Safari i "Dodaj do ekranu początkowego". Podgląd powinien pokazać twoją ostrą ikonę 180x180, a nie rozmyty zrzut strony.
4. Wyszukiwanie Google. Wyszukaj swoją stronę na urządzeniu mobilnym. Ikona powinna pojawić się obok wyniku. Jeśli nie, URL Google'a https://www.google.com/s2/favicons?domain=twojastrona.com pokazuje, co crawler ma obecnie zbuforowane.
5. Lighthouse. Audyt PWA Lighthouse w Chrome DevTools wychwytuje brakujące wpisy manifestu, złe rozmiary i inne problemy z deklaracjami.

Częste problemy i ich przyczyny

• "Mój favicon się nie pokazuje." Niemal zawsze problem z cache'em. Przeglądarki buforują favicony bardzo agresywnie. Wyczyść cache faviconów (Chrome: odwiedź chrome://favicon-cache, Firefox: wyczyść cache i dane offline) lub przetestuj w trybie incognito.
• "Pokazuje się na desktopie, ale nie na mobile." Zwykle brakujący apple-touch-icon lub zła ścieżka manifestu. Mobilne przeglądarki priorytetyzują własne ikony specyficzne dla platformy nad generycznym <link rel="icon">.
• "Wyszukiwanie Google pokazuje ogólną kulę ziemską." Albo favicon jest zbyt mały (poniżej 48x48), albo plik nie jest możliwy do zaindeksowania (zablokowany przez robots.txt, za uwierzytelnianiem, zwraca zły content-type), albo Google po prostu jeszcze nie przeindeksował ponownie. Opóźnienie ponownego indeksowania faviconów to często tygodnie.
• "Ikona ekranu głównego ma wokół siebie białe pudełko." Obrazy apple-touch-icon nie powinny mieć przezroczystości; iOS nie spłaszcza przezroczystych teł do twojego koloru motywu, zostawia je białe. Zapisz z jednolitym tłem pasującym do twojej marki.
• "Ikona wygląda nieostro na ekranach retina." Serwowany jest tylko mały favicon.ico. Nowoczesne przeglądarki użyją wersji SVG lub PNG 96x96, jeśli ją zadeklarujesz; sprawdź, czy HTML faktycznie zawiera te tagi link.

Co sprawdza InspectWP

Sekcja favicona w raporcie InspectWP weryfikuje, że favicon jest zadeklarowany w head HTML, że URL /favicon.ico zwraca prawidłową odpowiedź i że apple-touch-icon jest ustawiony dla wsparcia ekranu głównego iOS. Brak któregokolwiek z nich to znalezisko o niskim priorytecie, ale skumulowany efekt na pierwsze wrażenia (wyniki wyszukiwania, zakładki, mobilny ekran główny) jest realny. Strona, która wygląda dopracowanie wszędzie poza faviconem, sprawia wrażenie niedokończonej. Dobra wiadomość: to jednorazowa konfiguracja, która dobrze zrobiona nigdy więcej nie wymaga dotykania.