Formaty favicon wyjaśnione: ICO, PNG, SVG i czego potrzebują przeglądarki

Dlaczego favicony wciąż są dziwnie skomplikowane

Favicon wygląda jak jeden mały obraz, ale znajduje się na styku interfejsu przeglądarki, zakładek, kart, przypiętych skrótów, wyników wyszukiwania, ekranów głównych urządzeń mobilnych i instalacji progresywnych aplikacji webowych. Każdy z tych kontekstów ma nieco inne oczekiwania.

Dlatego porady dotyczące favicon często wydają się chaotyczne. Niektóre zespoły publikują tylko jeden plik favicon.ico, bo kiedyś to wystarczało. Inne generują tuzin plików, nie wiedząc, które z nich są faktycznie używane. Rozsądny środek jest mniejszy: zrozumieć, w czym ICO, PNG i SVG sprawdzają się najlepiej, a następnie dostarczyć kompaktowy zestaw obejmujący obecne przeglądarki i typowe konteksty urządzeń.

Favicons nie są miejscem na popisywanie się pipeline’em obrazów. To miejsce, w którym warto być zachowawczym, jednoznacznym i kompatybilnym.

ICO: stary format, który nie chce zniknąć

ICO to klasyczny kontener ikon Windows. Może zawierać kilka obrazów bitmapowych w różnych rozmiarach, zwykle 16×16, 32×32 i 48×48 pikseli. Ma to znaczenie, ponieważ favicon może być renderowany bardzo mały na karcie przeglądarki, większy na liście zakładek i jeszcze inaczej w skrótach Windows.

Ważny szczegół polega na tym, że ICO jest kontenerem, a nie po prostu jednym obrazem. Dobry favicon.ico zwykle zawiera wiele rozmiarów rastrowych, aby przeglądarka lub system operacyjny mogły wybrać najbliższe dopasowanie zamiast skalować jedną małą bitmapę.

ICO nadal jest przydatne z trzech powodów:

• Przeglądarki mogą automatycznie żądać /favicon.ico, nawet jeśli nie linkujesz go w HTML.
• Niektóre starsze przeglądarki i integracje go oczekują.
• To bezpieczny fallback, gdy nowsze deklaracje ikon są ignorowane.

Nie oznacza to, że ICO powinno być Twoją jedyną ikoną. Jest niewygodne w edycji, niezbyt przyjazne dla nowoczesnych workflow i słabe jako źródło prawdy dla znaku marki. Traktuj je jako fallback zgodności.

W praktyce umieść prawdziwy plik /favicon.ico w katalogu głównym witryny. Nie zwracaj tam 404, chyba że lubisz zaszumione logi i niepotrzebne ponowne próby przeglądarek.

PNG: niezawodny koń roboczy

PNG nadal jest najbardziej przewidywalnym formatem rastrowym dla favicon i ikon dotykowych. Obsługuje przezroczystość, jest szeroko wspierany i zachowuje się spójnie w przeglądarkach oraz na platformach.

W przypadku favicon PNG jest przydatny, gdy chcesz mieć jawnie określone ikony w rozmiarach pikselowych, takich jak 32×32 lub 48×48. W przypadku ikon na ekran główny urządzeń mobilnych PNG jest w niektórych środowiskach praktycznie obowiązkowy. Na przykład Apple touch icons w normalnym użyciu produkcyjnym opierają się na PNG.

Pomaga kilka praktycznych zasad:

• Eksportuj ze źródła wektorowego, a nie z już małej bitmapy.
• Zadbaj o czytelność ikony w 16×16, zanim zaczniesz przejmować się większymi rozmiarami.
• Dodaj wystarczający padding, aby znak nie wydawał się przycięty w zaokrąglonych lub maskowanych kontekstach.
• Unikaj drobnego tekstu, cienkich linii i szczegółowych ilustracji.

Kompresją PNG przy faviconach zwykle nie warto się przesadnie przejmować, bo pliki są małe. Mimo to nie publikuj ikony dotykowej o rozmiarze 500 KB tylko dlatego, że wyszła prosto z eksportu projektu. Jeśli i tak analizujesz szersze wybory dotyczące obrazów, to samo zdyscyplinowane myślenie z decyzji o formatach obrazów we współczesnym webie ma zastosowanie również tutaj: wybieraj format do zadania, a nie dlatego, że jest modny.

SVG: nowoczesna, elastyczna opcja

Favicony SVG są atrakcyjne, ponieważ są niezależne od rozdzielczości. Jeden mały plik może renderować się czysto w wielu rozmiarach i można go edytować bezpośrednio w kodzie albo eksportować z oprogramowania projektowego.

Nowoczesne wersje Chromium, Firefox i Safari obsługują favicony SVG. Dzięki temu SVG jest dobrym podstawowym formatem favicon dla wielu witryn, zwłaszcza gdy ikona jest prostym logo, glifem lub znakiem geometrycznym.

Favicony SVG mają jednak zastrzeżenia.

Po pierwsze, SVG powinno być samowystarczalne. Nie polegaj na zewnętrznych fontach, zdalnych obrazach ani skryptach. Przeglądarki nakładają ograniczenia na SVG używane jako obraz, a nawet jeśli coś działa w jednej przeglądarce, może nie działać w innej.

Po drugie, zachowaj prostotę wizualną. SVG nie rozwiązuje magicznie problemu 16 pikseli. Szczegółowa ilustracja wektorowa nadal staje się rozmyciem, gdy zostanie ściśnięta do karty.

Po trzecie, ostrożnie podchodź do dynamicznego stylowania. Niektóre zespoły używają prefers-color-scheme wewnątrz faviconu SVG, aby ikona dopasowywała się do ciemnych i jasnych motywów przeglądarki. To może działać, ale zachowanie przeglądarek i cache’owanie bywają nierówne. Jeśli rozpoznawalność marki ma znaczenie, jedna solidna ikona często wygrywa ze sprytną ikoną adaptacyjną.

SVG jest dobrym źródłem i dobrym nowoczesnym formatem dostarczania. Nie jest powodem, by pomijać pliki fallback.

Czego przeglądarki faktycznie szukają

Przeglądarki odkrywają favicony na dwa główne sposoby: przez jawne linki HTML i przez niejawne żądania do katalogu głównego.

Niejawne zachowanie jest tym starszym: jeśli przeglądarka chce ikony i jej nie znalazła, może zażądać /favicon.ico. Dlatego plik ICO w katalogu głównym pozostaje przydatny nawet w nowoczesnych witrynach.

Jawne zachowanie używa elementów <link> w nagłówku dokumentu. Kompaktowa nowoczesna konfiguracja wygląda tak:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Manifest może następnie wskazywać większe ikony PNG używane przez instalowalne aplikacje webowe:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

To nie jest jedyna poprawna konfiguracja, ale stanowi dobrą bazę. Daje nowoczesnym przeglądarkom SVG, zapewnia konwencjonalny fallback ICO, obejmuje zapisywanie na ekranie głównym iOS oraz obsługuje konteksty instalacji aplikacji.

Zestaw favicon, który powinna dostarczać większość witryn

Dla typowej witryny marketingowej, dokumentacji, aplikacji SaaS lub publikacji ten zestaw wystarczy:

• /favicon.ico zawierający 16×16 i 32×32, opcjonalnie 48×48.
• /icon.svg jako nowoczesny skalowalny favicon.
• /apple-touch-icon.png w rozmiarze 180×180.
• /icon-192.png i /icon-512.png, jeśli masz manifest aplikacji webowej.

Możesz dodać więcej rozmiarów, jeśli dana platforma ma konkretny wymóg, ale nie generuj dziesięciu plików z przyzwyczajenia. Każdy dodatkowy plik to kolejna rzecz do cache’owania, zapomnienia, błędnego nazwania albo pozostawienia nieaktualną po rebrandingu.

Jeśli Twoja witryna nie jest instalowalna i nie ma manifestu, możesz nie potrzebować ikon 192 i 512 pikseli. Jeśli Twoja witryna zachowuje się jak aplikacja, prawdopodobnie ich potrzebujesz.

Typowe tryby awarii

Najczęstsze błędy favicon nie są artystyczne. To problemy z dostarczaniem.

Jednym z nich jest agresywne cache’owanie. Przeglądarki uparcie trzymają favicony. Podczas testów zmieniona ikona może nie pojawić się, dopóki nie wykonasz twardego odświeżenia, nie wyczyścisz danych witryny, nie użyjesz nowej nazwy pliku albo nie przetestujesz w świeżym profilu. Przy produkcyjnych rebrandingach zmiana /icon.svg?v=2 może pomóc w HTML, ale główny /favicon.ico jest trudniejszy, bo przeglądarki żądają go bezpośrednio. Zastąpienie pliku i przeczekanie cache’y często jest częścią pracy.

Innym częstym problemem jest niewłaściwy typ MIME. SVG powinno być serwowane jako image/svg+xml, PNG jako image/png, a ICO zwykle jako image/x-icon lub image/vnd.microsoft.icon. Wiele przeglądarek jest wyrozumiałych, ale nie wszystkie konteksty takie są. Jeśli coś zawodzi tylko w jednej przeglądarce, sprawdź odpowiedź sieciową, zanim zaczniesz rysować ikonę od nowa. Te same nawyki, których używa się przy debugowaniu przekierowań i nagłówków HTTP w produkcji, mają zastosowanie tutaj: patrz na rzeczywistą odpowiedź, a nie na to, co CMS twierdzi, że serwuje.

Trzecia kwestia to gęstość projektu. Logo, które świetnie działa w nagłówku witryny, często zawodzi jako favicon. Ikona karty to brutalny test. Usuń słowa, uprość kształty, zwiększ kontrast i testuj w rzeczywistych rozmiarach. Jeśli ikona jest znaczącą treścią wewnątrz strony, znaczenie mają kwestie dostępności, takie jak tekst alternatywny; sam favicon jest jednak dekoracją interfejsu przeglądarki, a nie treścią strony. O tym rozróżnieniu przeczytasz w naszym praktycznym przewodniku po tekstach alternatywnych obrazów.

<!-- tool-cta:start -->

💡 Wypróbuj to: Wygeneruj za jednym razem warianty ICO, PNG i SVG, których oczekują nowoczesne przeglądarki, za pomocą Ultimate Favicon Generator.

<!-- tool-cta:end -->

Prosta lista kontrolna wdrożenia

Użyj tej listy przed publikacją:

1. Zacznij od czystego mastera wektorowego.
2. Przetestuj znak w 16×16 i 32×32.
3. Wyeksportuj samowystarczalny favicon SVG.
4. Wygeneruj wielorozmiarowy fallback ICO.
5. Wyeksportuj Apple touch icon 180×180.
6. Dodaj PNG 192×192 i 512×512, jeśli używasz manifestu.
7. Umieść /favicon.ico w katalogu głównym witryny.
8. Zweryfikuj kody statusu, typy MIME i nagłówki cache’owania.
9. Przetestuj co najmniej w jednej przeglądarce Chromium, Firefox i Safari, jeśli Twoi odbiorcy używają urządzeń Apple.

Favicons są małe, ale są też bardzo widoczne. Zepsuty sprawia, że witryna wydaje się niedokończona. Dobrze przygotowany znika w interfejsie — i dokładnie o to chodzi.