Wyszukiwanie „rozmiar favicon” nadal zwraca listy piętnastu plików pochodzące z 2014 roku. W praktyce sześć wymiarów wystarcza dziś dla kart przeglądarki, wyników wyszukiwania, iOS, Androida i PWA. Oto one i ich uzasadnienie.
Rozmiary, których naprawdę potrzebujesz
Każdy wiersz odpowiada udokumentowanemu zastosowaniu w proponowanym pakiecie. Tabela przedstawia niewielki, zgodny zestaw zamiast kolekcji historycznych wariantów.
| Plik | Wymiary | Zastosowanie |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Karty, zakładki, starsze przeglądarki, roboty |
| favicon.svg | wektorowy, kwadratowy | Nowoczesne przeglądarki, ostrość w każdym rozmiarze, obsługa trybu ciemnego |
| favicon-96x96.png | 96×96 | Wyniki wyszukiwania Google na urządzeniach mobilnych |
| apple-touch-icon.png | 180×180 | Ekran główny iOS i iPadOS, bez przezroczystości |
| web-app-manifest-192x192.png | 192×192 | Ekran główny Androida, deklaracja w manifeście aplikacji |
| web-app-manifest-512x512.png | 512×512 | Ekran startowy PWA, wersja „maskable” |
Dlaczego 16, 32 i 48 mieszczą się w jednym .ico
ICO to format kontenera: jeden plik może zawierać kilka obrazów, a przeglądarka wybiera ten odpowiedni do wyświetlania. To pożądane zachowanie, ponieważ wymagany rozmiar zależy od kontekstu.
16×16 służy karcie na standardowym ekranie. 32×32 zapewnia wariant dla ekranów o dużej gęstości pikseli i innych elementów przeglądarki. 48×48 uzupełnia kontener i odpowiada także opisanej przez Google zasadzie wielokrotności 48 dla favicon w wynikach wyszukiwania.
Dostarczanie .ico zawierającego wyłącznie 16×16 to najczęstszy błąd: na ekranie Retina ikona zostaje powiększona i stale wygląda na rozmytą.
180×180 dla iOS, 192 i 512 dla Androida
iOS nie odczytuje ikony ekranu głównego z manifestu aplikacji: szuka znacznika apple-touch-icon. Wystarczy jeden rozmiar, 180×180, obsługujący wszystkie nowsze iPhone’y i iPady. Dla starszych urządzeń system sam zmniejszy obraz.
Android korzysta z manifestu aplikacji. Wystarczą dwa wpisy: 192×192 dla ikony ekranu głównego i 512×512 dla ekranu startowego po zainstalowaniu witryny jako aplikacji. Wersję 512 należy zadeklarować z purpose „maskable”, czyli zaprojektować tak, by można ją było przyciąć do koła lub zaokrąglonego kwadratu.
W ikonie z maskowaniem zachowaj najważniejsze elementy w środkowych 80%. Obszar poza nimi może zostać przycięty zależnie od producenta telefonu.
Od jakiego obrazu źródłowego zacząć
Najlepszym punktem wyjścia jest SVG: skaluje się bezstratnie do wszystkich podanych rozmiarów. Jeśli go nie masz, użyj kwadratowego PNG o wymiarach co najmniej 512×512 pikseli. Wtedy nawet ikona startowa Androida powstanie przez zmniejszanie, a nie powiększanie.
Poziome logo z tekstem nie sprawdza się przy 16×16: słowo zamienia się w kilka nieczytelnych pikseli. Wyodrębnij symbol lub zacznij od jednej albo dwóch liter na kontrastowym tle.
Na koniec sprawdź kontrast na jasnym i ciemnym tle: czarne logo znika na ciemnej karcie. Właśnie temu służy ciemny wariant favicon SVG.
Rozmiary, których już nie potrzebujesz
Starsze generatory nadal tworzą pliki dla historycznych integracji, np. kafelków Windows z mstile-150x150.png i browserconfig.xml. Dodawaj je tylko wtedy, gdy zakres obsługiwanych środowisk wyraźnie obejmuje te interfejsy.
Długa seria apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 i 152x152 pochodzi z czasów, gdy iOS nie zmieniał rozmiaru. Jeden obraz 180×180 zastępuje je wszystkie.
Usunięcie nieużywanych deklaracji upraszcza repozytorium i HTML. Przed usunięciem istniejącej integracji sprawdź docelowe przeglądarki i platformy.
Źródła pierwotne
Najczęstsze pytania
Czy favicon.ico jest nadal potrzebny?
Tak, ale tylko w katalogu głównym witryny. Nowoczesne przeglądarki preferują SVG, jednak wiele robotów, agregatorów i klientów poczty nadal pobiera /favicon.ico bez czytania HTML. Plik zajmuje kilka kilobajtów: warto go zachować.
Jakiego rozmiaru favicon używa Google w wynikach wyszukiwania?
Google wymaga ikony o boku będącym wielokrotnością 48 pikseli i zwykle wyświetla ją w rozmiarze 48×48. PNG 96×96 lub SVG wystarcza bez problemu. Ikona musi być dostępna dla robotów i nie może być blokowana przez robots.txt.
Czy favicon może być prostokątna?
Technicznie tak, wizualnie nie. Każde miejsce wyświetlania rezerwuje kwadrat: prostokątny obraz jest rozciągany albo wyśrodkowany z pustymi pasami. Zawsze zaczynaj od kwadratu, w razie potrzeby dodając margines wokół symbolu.