Stwórz favicon.ico dla swojej strony z jednego obrazu

Każdy rozmiar ma swoje zastosowanie:

Jeśli nie tworzysz PWA, wystarczą Ci: favicon.ico, 32x32 PNG i 180x180 PNG. Te trzy pliki pokryją większość przypadków użycia.

Google wyświetla favicon obok adresu strony w wynikach wyszukiwania. Na urządzeniach mobilnych ikona witryny pojawia się w wynikach od 2019 roku. Na komputerach stacjonarnych Google zaczął pokazywać favicon od stycznia 2020. Ikona strony jest więc widocznym elementem marki w każdym wyszukiwaniu.

Wymagania Google wobec favicon są precyzyjne. Ikona musi mieć wymiary co najmniej 48×48 pikseli. Kształt powinien być kwadratowy. Obraz musi być wyraźnie widoczny na białym tle. Google odrzuca ikony o treści nieodpowiedniej lub pustej.

Robot Google indeksuje favicon niezależnie od pozostałej zawartości strony. Aktualizacja ikony w wynikach wyszukiwania może potrwać od kilku dni do kilku tygodni. Plik favicon nie może być zablokowany w robots.txt - w przeciwnym razie Google nie pobierze nowej wersji.

Profesjonalna ikona witryny zwiększa rozpoznawalność marki wśród wyników wyszukiwania. Użytkownicy szybciej identyfikują znane favicon na liście wyników. To przekłada się na wyższy współczynnik klikalności (CTR). Wyszukiwarki Bing i DuckDuckGo również wyświetlają favicon obok wyników - pełny zestaw ikon zapewnia spójny wygląd marki we wszystkich wyszukiwarkach.

Favicon to mikroelement brandingu widoczny w wielu miejscach jednocześnie. Ikona pojawia się w kartach przeglądarki, na liście zakładek, w historii przeglądania i na ekranie głównym telefonu. Gdy użytkownik ma otwartych kilkanaście kart, favicon pozostaje jedynym widocznym elementem identyfikującym stronę.

Spójność kolorystyczna między favicon a logotypem firmy wzmacnia zapamiętywanie marki. Ikona witryny powinna wykorzystywać te same kolory i kształty co główne logo. Uproszczona wersja logotypu lub jego pierwszy znak najczęściej sprawdza się najlepiej w małych rozmiarach pikseli.

W polskim e-commerce profesjonalna ikona sygnalizuje wiarygodność sklepu. Na porównywarkach cenowych takich jak Ceneo czy Skąpiec favicon wyróżnia ofertę na tle konkurencyjnych wyników. Sklepy na platformach Shoper, Sky-Shop i WooCommerce pozwalają ustawić favicon w panelu administracyjnym w sekcji ustawień wyglądu.

Firmy usługowe - od gabinetów dentystycznych po kancelarie prawne - budują zaufanie klientów już na poziomie ikony w karcie przeglądarki. Brak favicon lub domyślna ikona przeglądarki może sugerować niski poziom profesjonalizmu strony.

Progressive Web Apps (PWA) wymagają dodatkowych ikon wykraczających poza standardowy favicon. Plik manifest.json musi zawierać tablicę ikon z wymiarami 192×192 i 512×512 pikseli w formacie PNG.

Ikony maskable to specjalny typ ikony dla systemu Android. System przycina maskable icon do różnych kształtów - koło, kwadrat z zaokrąglonymi rogami, kropla. Strefa bezpieczna obejmuje wewnętrzne 80% powierzchni obrazu. Kluczowe elementy graficzne powinny znajdować się w tej strefie, aby uniknąć przycięcia.

Apple wymaga osobnego pliku apple-touch-icon o wymiarach 180×180 pikseli. Ten plik musi być zadeklarowany w sekcji head dokumentu HTML - system iOS nie odczytuje go z pliku manifest.

W Polsce technologia PWA zyskuje na popularności. Banki takie jak mBank i ING oferują doświadczenie zbliżone do natywnej aplikacji przez przeglądarkę. InPost i Żabka wykorzystują PWA do szybkiego dostępu z ekranu głównego telefonu.

Audyt Lighthouse w narzędziach deweloperskich Chrome sprawdza obecność i poprawność favicon oraz ikon PWA. Wynik audytu wskazuje brakujące rozmiary i nieprawidłowe deklaracje w pliku manifest.json.