Favicon: wymiary. Co musisz wiedzieć?

Wymiary faviconu ewoluowały od pojedynczej ikony 16×16 pikseli do złożonego systemu grafik dostosowanych do różnych urządzeń. Współczesna strona internetowa wymaga przygotowania zestawu ikon w wielu rozdzielczościach – od miniaturowych wersji dla kart przeglądarki po duże grafiki dla ekranów głównych smartfonów. Poznaj aktualne wymagania techniczne i wybierz właściwy format ikony dla swojej witryny.

Z tego artykułu dowiesz się m.in.:

• Jakie wymiary powinien mieć favicon?
• Jaki format powinien mieć favicon?

Jakie wymiary powinien mieć favicon?

Wymagania dotyczące wymiarów faviconu na przestrzeni lat zmieniły się radykalnie. Klasyczny rozmiar 16×16 pikseli, wprowadzony przez Microsoft w 1999 roku^[1], dziś stanowi jedynie punkt wyjścia.

Dla przeglądarek desktopowych podstawowym rozmiarem pozostaje 16×16 pikseli – ta wersja wyświetla się na kartach przeglądarki i w pasku adresu. Rozmiar 32×32 pikseli to standard dla ekranów o wysoką rozdzielczością ekranu typu Retina i HiDPI^[2]. Wymiar 48×48 pikseli wykorzystują skróty pulpitowe w systemie Windows oraz pasek zadań.

Google określiło precyzyjne wymagania dla wyników wyszukiwania. Favicon musi być kwadratem o proporcjach 1:1. Minimalny rozmiar to 8×8 pikseli, jednak wyszukiwarka zaleca wielokrotność 48×48 pikseli – czyli 48×48, 96×96 lub 144×144 pikseli^[3]. Tylko takie wymiary gwarantują ostre wyświetlanie w wynikach wyszukiwania Google.

Urządzenia mobilne wymagają znacznie wyższych rozdzielczości. Apple Touch Icon dla iPhone’a i iPada powinien mieć 180×180 pikseli^[4]. System Android wymaga minimum 192×192 pikseli dla ikon na ekranie głównym. Dla ekranów powitalnych w aplikacjach PWA standard to 512×512 pikseli^[5].

WordPress upraszcza sprawę – system zaleca przesyłanie jednego obrazu 512×512 pikseli i automatycznie generuje wszystkie mniejsze wersje^[6]. To optymalne rozwiązanie dla użytkowników korzystających z tego systemu CMS.

Favicon ewoluował z prostego dodatku do złożonego systemu ikon. Dziś nie wystarczy jeden plik – potrzebujesz zestawu grafik dla każdej platformy. Zasada pozostaje ta sama: prostota i czytelność w każdym rozmiarze.

Borys Bednarek, Head of SEO & TL Performance Marketing

Jaki format powinien mieć favicon?

Nie istnieje jeden uniwersalny format pliku, który działałby idealnie na wszystkich urządzeniach i przeglądarkach. Format ICO to tradycyjne rozwiązanie, niezbędne dla starszych przeglądarek. Przeglądarki Internet Explorer w wersjach 5-10 obsługują wyłącznie ten format^[7]. Jego unikalna zaleta to możliwość przechowywania wielu rozmiarów – 16×16, 32×32 i 48×48 pikseli – w jednym pliku. Plik favicon.ico powinien znajdować się w głównym katalogu strony.

Format PNG stanowi obecnie najpopularniejszy standard. Oferuje wysoką jakość obrazu, obsługuje przezroczystość i sprawdza się na nowoczesnych urządzeniach mobilnych. To zalecany format ikony dla Apple Touch Icon, ikon Android i aplikacji PWA. Wymaga jednak oddzielnych plików dla każdego rozmiaru.

Format SVG to przyszłościowe rozwiązanie wektorowe dla nowoczesnych przeglądarek Chrome, Firefox i Edge. Jest nieskończenie skalowalny bez utraty jakości i posiada bardzo mały rozmiar pliku. Unikalna funkcja tego formatu to obsługa trybu ciemnego – poprzez osadzone style CSS ikona może automatycznie zmieniać kolor zależnie od motywu systemowego użytkownika.

Rekomendowany zestaw na rok 2025 obejmuje: favicon.ico (32×32 pikseli) dla starszych systemów, icon.svg dla nowoczesnych przeglądarek, apple-touch-icon.png (180×180 pikseli) dla urządzeń Apple oraz manifest.webmanifest wskazujący na ikony PNG 192×192 i 512×512 pikseli dla systemu Android^[8]. Taki zestaw gwarantuje, że strona wyglądała profesjonalnie wszędzie – od lewej stronie paska adresu po ekran główny smartfona.