Favicon nie jest już jednym obrazem. Przeglądarki, telefony i systemy operacyjne — każde chwyta inny rozmiar do innego miejsca: karta przeglądarki, zakładka, ekran główny iOS, przełącznik aplikacji Androida. Wypuść jeden PNG 32×32, a zadziała w karcie, ale będzie wyglądał rozmyto, gdy ktoś zapisze Twoją stronę na telefonie. Wypuść pełny zestaw, a każda powierzchnia dostanie ostrą ikonę.
Oto dokładnie, których rozmiarów potrzebujesz, co robi każdy i dlaczego lista wygląda tak, jak wygląda.
Rozmiary, które mają znaczenie
Większość stron pokrywa sześć rozmiarów PNG plus przestarzały .ico. Oto odniesienie:
| Rozmiar | Format | Gdzie jest używany |
|---|---|---|
| 16×16 | PNG (w .ico) | Karta przeglądarki, pasek adresu, zakładki |
| 32×32 | PNG (w .ico) | Karty Retina, skróty na pasku zadań Windows |
| 48×48 | PNG | Ikony witryn Windows, niektóre powierzchnie Androida |
| 180×180 | PNG | Ekran główny iOS (apple-touch-icon) |
| 192×192 | PNG | Ekran główny Androida, instalacja PWA |
| 512×512 | PNG | Ekran powitalny PWA, sklepy z aplikacjami, wysokie DPI |
Plik favicon.ico to kontener łączący małe rozmiary (zwykle 16 i 32, czasem 48). Starsze przeglądarki i Windows szukają go po nazwie w katalogu głównym Twojej strony, więc wciąż warto go wypuścić, mimo że nowoczesne przeglądarki chętnie używają plików PNG.
Po co tyle? Szybka wycieczka
Powodem, dla którego lista jest długa, jest to, że ikona pojawia się w skrajnie różnych rozmiarach fizycznych.
16 i 32 to codzienne ikony kart. 16 to klasyczny rozmiar; 32 pokrywa ekrany o wysokim DPI („Retina"), gdzie 16 wyglądałoby miękko. Przeglądarki wybierają ten, który pasuje do gęstości pikseli.
48 to rzecz Windows — używana do skrótów witryn i pojawia się ostrzejsza w kilku miejscach, których 32 nie pokrywa dobrze.
180 to apple-touch-icon Apple. Gdy ktoś dotknie „Dodaj do ekranu głównego" na iPhonie albo iPadzie, iOS używa tego. Zrób to źle, a iOS albo chwyci pomniejszony zrzut ekranu, albo pokaże zwykły kafelek z literą — żadne nie wygląda jak Twoja marka.
192 i 512 to rozmiary Progressive Web App, deklarowane w pliku manifest.webmanifest. 192 to ikona ekranu głównego Androida; 512 zasila ekran powitalny i jest zmniejszany do wszystkiego innego, czego potrzebuje system. Jeśli Twoja strona jest instalowalna, te dwa są nie do pominięcia.
Czy potrzebujesz większego niż 512?
Nie. 512×512 to praktyczny sufit dla faviconów webowych — specyfikacja webmanifest i każda główna platforma kończą się mniej więcej tam. Jeśli Twoja grafika źródłowa ma 1024 albo więcej, to w porządku jako obraz wyjściowy (więcej detalu do zmniejszania), ale nie wypuszczasz favicona 1024. Cokolwiek powyżej 512 dodaje tylko bajty, których nikt nie używa.
Jedna reguła, która liczy się w górę: zacznij od dużego, kwadratowego źródła. Oryginał 512×512 albo 1024×1024 zmniejsza się czysto do każdego rozmiaru poniżej. Zacznij od maleńkiego obrazu, a małe rozmiary wyglądają mętnie, bo nigdy nie było wystarczająco detalu do zachowania.
Projektuj tak, by przetrwało 16×16
Najtrudniejszy rozmiar to najmniejszy. Przy 16×16 szczegółowe logo staje się nieczytelną plamą. Kilka wskazówek, które sprawdzają się na różnych stronach:
- Upraszczaj. Pełen znak słowny nie odczyta się przy 16px. Użyj pojedynczej litery, monogramu albo najbardziej rozpoznawalnej części swojego znaku.
- Utrzymuj wysoki kontrast, żeby kształt pozostał czytelny na jasnych i ciemnych tłach kart.
- Zostaw trochę marginesu — ikona dotykająca wszystkich czterech krawędzi wydaje się ściśnięta w karcie.
- Przetestuj w małym rozmiarze. Pomniejsz przeglądarkę albo po prostu spójrz na faktyczną kartę. Jeśli nie rozpoznasz, co to jest, na pierwszy rzut oka, uprość dalej.
Generowanie całego zestawu
Nie budujesz ich ręcznie. Wrzuć jeden kwadratowy obraz do generatora faviconów, a wyprodukuje pełny zestaw naraz — favicon.ico, pliki PNG 16/32/48/180/192/512, gotowy do użycia webmanifest oraz dokładny fragment HTML <head> do wklejenia. Wszystko działa w Twojej przeglądarce: obraz nigdy nie jest przesyłany, a po pierwszej wizycie narzędzie działa offline.
HTML, z którym skończysz
Dla odniesienia, kompletna konfiguracja favicona wygląda z grubsza tak w Twoim <head>:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Generator zapisuje to za Ciebie, więc możesz wkleić prosto. Pokryj sześć rozmiarów plus .ico i manifest, a każda przeglądarka, telefon i system dostanie ostrą ikonę, o którą prosi.