Favicon to niewielka ikona graficzna reprezentująca stronę internetową lub aplikację webową w przeglądarce. Pojawia się w zakładce przeglądarki obok tytułu strony, na liście zakładek, w historii przeglądania, a także na ekranie głównym urządzeń mobilnych, gdy użytkownik doda stronę do skrótów. Choć zajmuje zaledwie kilkanaście lub kilkadziesiąt pikseli, pełni istotną rolę w budowaniu rozpoznawalności marki i profesjonalnego wizerunku serwisu internetowego.
Skąd pochodzi nazwa favicon?
Nazwa „favicon” pochodzi od angielskiego złożenia słów „favourite” (ulubione) i „icon” (ikona) – czyli ikona ulubionych. Termin powstał w 1999 roku, gdy przeglądarka Internet Explorer 5 jako pierwsza zaczęła wyświetlać małe ikony przy adresach URL zapisanych w zakładkach. Wkrótce rozwiązanie to przejęły wszystkie główne przeglądarki, a favicon stał się standardowym elementem każdej strony internetowej. Przez lata ewoluował – z prostego pliku w formacie ICO do zestawu wielu plików graficznych obsługujących różne urządzenia i konteksty wyświetlania.
Gdzie wyświetla się favicon?
Favicon pojawia się w wielu miejscach interfejsu przeglądarki i systemu operacyjnego:
- w zakładce przeglądarki – obok tytułu strony, co ułatwia szybką identyfikację karty spośród wielu otwartych
- na liście zakładek i w menedżerze zakładek
- w historii przeglądania
- w pasku adresu (w niektórych przeglądarkach)
- w wynikach wyszukiwania Google – favicon wyświetlany jest obok adresu URL w organicznych wynikach wyszukiwania
- na ekranie głównym urządzeń mobilnych po dodaniu skrótu do strony
- w powiadomieniach przeglądarki i jako ikona aplikacji progresywnej (aplikacji działającej w przeglądarce)
Formaty plików favicon
Przez lata standardem był format ICO – kontenerowy format Microsoftu, który może zawierać kilka wersji ikony w różnych rozdzielczościach w 1 pliku. Współczesne strony internetowe stosują jednak rozbudowany zestaw plików graficznych, by zapewnić optymalny wygląd w każdym kontekście:
- ICO (favicon.ico) – klasyczny format obsługiwany przez wszystkie przeglądarki; powinien zawierać warianty o rozmiarach 16×16, 32×32 i 48×48 pikseli; umieszczany w katalogu głównym serwisu
- PNG – format obsługiwany przez nowoczesne przeglądarki; stosowany w rozmiarach 16×16, 32×32, 96×96, 192×192 i 512×512 pikseli; zapewnia lepszą jakość niż ICO na ekranach o wysokiej rozdzielczości
- SVG – format wektorowy skalujący się bez utraty jakości do dowolnego rozmiaru; obsługiwany przez większość nowoczesnych przeglądarek; idealny dla prostych, geometrycznych ikon
- Apple Touch Icon – plik PNG o rozmiarze 180×180 pikseli, używany przez urządzenia Apple (iPhone, iPad) przy dodawaniu skrótu na ekran główny
- manifest.webmanifest – plik JSON zawierający definicję ikon dla aplikacji progresywnych, zazwyczaj w rozmiarach 192×192 i 512×512 pikseli
Jak dodać favicon do strony internetowej?
Favicon dodaje się przez umieszczenie odpowiednich znaczników w sekcji <head> dokumentu HTML. Minimalna implementacja obsługująca wszystkie główne przeglądarki i urządzenia wygląda następująco:
- plik favicon.ico umieszczony w katalogu głównym serwisu – większość przeglądarek pobiera go automatycznie pod adresem
/favicon.ico, nawet bez znacznika w kodzie HTML - znacznik
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">dla przeglądarek obsługujących PNG - znacznik
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">dla urządzeń Apple - znacznik
<link rel="manifest" href="/site.webmanifest">dla aplikacji progresywnych
W praktyce najprostszym sposobem wygenerowania kompletnego zestawu plików i kodu HTML jest skorzystanie z jednego z dostępnych generatorów ikon, do których wystarczy wgrać plik graficzny w wysokiej rozdzielczości (minimum 512×512 pikseli) – narzędzie automatycznie przygotuje wszystkie wymagane warianty i gotowy kod do wklejenia w sekcję <head>.
Jak zaprojektować dobry favicon?
Projektowanie faviconu rządzi się innymi prawami niż tworzenie standardowej grafiki, bo ikona musi być czytelna w bardzo małych rozmiarach – nierzadko zaledwie 16×16 pikseli. Podstawowe zasady dobrego projektu to:
- prostota formy – złożone detale, cienkie linie i drobne napisy giną w małych rozmiarach; favicon powinien opierać się na 1 wyrazistym kształcie lub inicjale
- wysoki kontrast – ikona musi być czytelna zarówno na jasnym tle przeglądarki, jak i na ciemnym (tryb ciemny); warto przetestować favicon na obu tłach
- spójność z identyfikacją wizualną marki – favicon powinien być rozpoznawalną miniaturą logo lub elementem z systemu identyfikacji wizualnej; używanie tych samych kolorów i kształtu co logo buduje spójność
- odróżnialność od konkurencji – favicon powinien być na tyle charakterystyczny, by użytkownik mógł szybko zidentyfikować kartę przeglądarki bez czytania tytułu
- przezroczyste tło – PNG i SVG z przezroczystym tłem lepiej wpisują się w różne interfejsy przeglądarek niż ikony z jednolitym, białym tłem
Favicon a tryb ciemny
Rosnąca popularność trybu ciemnego w systemach operacyjnych i przeglądarkach stworzyła nowe wyzwanie dla projektantów faviconów. Ikona zaprojektowana z myślą o jasnym tle może stać się niewidoczna na ciemnym pasku kart. Rozwiązaniem jest zastosowanie formatu SVG z zapytaniem mediów wbudowanym bezpośrednio w plik – pozwala to zdefiniować różne wersje kolorystyczne ikony dla trybu jasnego i ciemnego:
- format SVG obsługuje atrybut
prefers-color-scheme, który automatycznie przełącza wersję kolorystyczną ikony zależnie od ustawień systemowych użytkownika - dla formatów rastrowych (PNG, ICO) zalecane jest projektowanie ikon na przezroczystym tle z kolorami kontrastującymi zarówno z jasnym, jak i ciemnym tłem
Favicon w wynikach wyszukiwania Google
Od 2019 roku Google wyświetla favicon strony w organicznych wynikach wyszukiwania – ikona pojawia się obok adresu URL, zanim użytkownik zobaczy tytuł i opis strony. Ma to istotne znaczenie dla rozpoznawalności marki w wynikach wyszukiwania i może wpływać na wskaźnik klikalności. Google stosuje własne zasady wyświetlania faviconów:
- ikona musi być dostępna pod adresem wskazanym w znaczniku HTML lub pod standardowym adresem
/favicon.ico - Google pobiera favicon i przeskalowuje go do rozmiaru 16×16 pikseli – ikony nieproporcjonalne lub zbyt szczegółowe mogą wyglądać nieczytelnie
- Google może odrzucić favicon zawierający treści niezgodne z wytycznymi (np. pornografię, symbole przemocy lub mowy nienawiści) i zastąpić go domyślną ikoną globusa
- zmiana faviconu na stronie jest przez Google zauważana i aktualizowana w wynikach wyszukiwania zazwyczaj po kilku tygodniach od indeksacji
