Rozmiary favicony: jakie pliki są potrzebne i w ilu px

Skąd tyle plików favicony?

Favicona to mała ikonka witryny — na karcie przeglądarki, na liście zakładek, w wynikach wyszukiwania i na ekranie głównym telefonu. To twarz strony; bez niej wygląda na niedokończoną.

Sęk w tym, że każde z tych miejsc wymaga innego rozmiaru i formatu. Dlatego favicona to nie jeden plik, lecz mały zestaw.

Potrzebny zestaw

• •favicon.ico — 16, 32 i 48px w jednym pliku. Dla paska adresu, kart i zakładek; najstarszy standard, wciąż obowiązkowy
• •PNG 16px i 32px — ostre wersje używane przez nowoczesne przeglądarki na kartach
• •apple-touch-icon 180px — używana przy dodawaniu strony do ekranu głównego iPhone'a lub iPada
• •PNG 192px i 512px — na ekran główny Androida i instalacje PWA, rejestrowane w site.webmanifest

Jak przygotować obraz źródłowy

Właściwa droga: zacząć od dużego kwadratowego obrazu (od 512px) i zmniejszać. Powiększanie małego obrazu tylko go rozmywa.

Ikona musi być rozpoznawalna nawet przy 16px, więc im prościej, tym lepiej. Pojedynczy symbol bije logo pełne tekstu; drobny margines przy krawędziach zapobiega wrażeniu ciasnoty, a przezroczyste tło pasuje do jasnego i ciemnego motywu.

Jak dodać do HTML

Wgraj pliki do głównego katalogu witryny i wskaż je znacznikami link w head: rel="icon" dla ICO i PNG, rel="apple-touch-icon" dla ikony 180px oraz rel="manifest" dla site.webmanifest.

Awaryjnie większość przeglądarek znajdzie favicon.ico w katalogu głównym nawet bez znaczników. Ale żeby PNG w rozmiarach i ikony ekranu głównego działały poprawnie, dodaj znaczniki.

Nie składaj zestawu ręcznie

Zmniejszanie obrazka po obrazku i ręczne pakowanie ICO jest żmudne. Upuść jeden obraz w generatorze favicon Image Converter NOW — dostaniesz favicon.ico, wszystkie PNG, site.webmanifest i gotowe do wklejenia znaczniki HTML w jednym pliku ZIP.

Wszystko działa w przeglądarce — Twoje logo nigdy nie trafia na serwer.