Co to jest Favicon?
Dostałeś zadanie, żeby dodać favicon na stronie i nie wiesz, co to jest? Ten artykuł wyjaśni Ci, co to jest "favicona" i jak poprawnie dodać ją na stronie internetowej.
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 | 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.
