Favicon, często spolszczane na favicona, to malutka grafika dodawana do strony internetowej, która jest używana najczęściej do ilustracji tabu w przeglądarce, do ilustrowania wyników SERP  w wyszukiwarkach lub do ikon w widokach ulubione. 

Zrzut ekranu z przeglądarki Chrome z otwartymi tabami z faviconamizrzut ekranu | Zrzut ekranu z przeglądarki Chrome z otwartymi tabami z faviconami

Favicona stanowi część identyfikacji wizualnej strony internetowej i jest najczęściej uproszczoną formą sygnetu logotypu.

Webmasterzy favicon znajdą po również pod innymi nazwami: shortcut icon, website icon, tab icon, bookmark icon.

Jak wstawić favicon na stronie HTML?

W podstawowej formie dodawanie favicony na stronie HTML jest bardzo proste,  potrzebujemy dodać znacznik meta pomiędzy znacznikami sekcji <head></head> w postaci jak poniżej:

<link rel="shortcut icon" href="https://example.com/favicon.ico">

Atrybut href zawiera po prostu ścieżkę do Twojej zaprojektowanej ikonki, dodatkowo część przeglądarek szuka w głównym katalogu root pliku o nazwie favicon.ico.

Jakie formaty favicon?

Świat formatów favicon jest skomplikowany, ale przedstawimy Wam zalecenie jak obsłużyć najwięcej przeglądarek, w najlepszej jakości, jak najmniejszym kosztem pracy.

Dawniej wymagane było, żeby favicony były małych rozmiarów i żeby konwertowane były do formatu .ico. Teraz przeglądarki obsługują dużo większe rozmiary favicon i nie wymagają tylko i wyłącznie formatu .png.

Dobrze jednak jest dodać iconę w formacie ico, bo tylko taką obsługują starsze przeglądarki IE. Na stronie https://realfavicongenerator.net/ wygenerujesz odpowiednie ikony w rozmiarach 16x16, 32x32 oraz 48x48.

PNG obsługują już prawie wszystkie przeglądarki, sprawdzisz to na stronie CanIUse, z formatem SVG nie jest tak dobrze i obsługują go nie wszystkie przeglądarki, ale jest to już standardem, żeby dodawać favicon w formacie SVG. Zobacz, na których przeglądarkach obsługiwane jest SVG jako favicon.