Favicon: znaczenie i konfiguracja

Czym jest Favicon?

Favicon (skrót od "favorites icon") to mała ikona reprezentująca stronę internetową. Pojawia się w zakładce przeglądarki obok tytułu strony, na liście zakładek oraz, gdy strona zostanie dodana do ekranu głównego smartfona, jako ikona przypominająca aplikację. Choć jest mała, pełni ważną funkcję: sprawia, że strona jest natychmiast rozpoznawalna.

Dlaczego Favicon jest ważny?

Rozpoznawalność: Osoby, które mają otwartych wiele zakładek, znacznie szybciej odnajdą pożądaną stronę po favikonie niż tylko po tekście.
Tożsamość marki: Favicon to mały, ale stały element identyfikacji wizualnej marki, który wzmacnia jej rozpoznawalność.
Profesjonalny wygląd: Strona bez favicona wyświetla w zakładce jedynie neutralną, standardową ikonę. To sprawia, że może wyglądać na niedokończoną i nieprofesjonalną.
Widoczność w wynikach wyszukiwania: Google wyświetla favicon również bezpośrednio w mobilnych wynikach wyszukiwania obok tytułu strony. Wyraźny i jednoznaczny favicon może przyczynić się do tego, że wpis będzie bardziej zauważalny.

Jak dodać Favicon?

Favicon jest dodawany w sekcji <head> strony za pomocą znacznika <link>. Nowoczesna, powszechnie stosowana wersja wygląda następująco:

<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Znacznik apple-touch-icon jest używany, gdy użytkownik doda stronę do ekranu głównego na iPhonie lub iPadzie. Powinien być większy (zazwyczaj 180x180 pikseli), aby był wyraźnie wyświetlany również tam.

Jakie formaty i rozmiary są odpowiednie?

Formaty: Klasyczny format .ico działa we wszystkich przeglądarkach. Nowoczesne strony korzystają dodatkowo z .png i .svg. Favicon w formacie SVG ma tę zaletę, że pozostaje ostry przy każdej rozdzielczości.
Rozmiary: Zamiast tylko 16x16 pikseli, należy dostarczyć kilka rozmiarów, np. 32x32 i 48x48 pikseli. Dla wyświetlania w wynikach wyszukiwania Google zaleca, aby długość krawędzi favicona była wielokrotnością 48 pikseli (np. 48x48 lub 96x96 pikseli).

Wskazówki dotyczące dobrego Favicona

Zachowaj prostotę: Przy tak małych rozmiarach szczegóły giną. Wyraźny symbol lub pojedyncza litera sprawdza się lepiej niż pomniejszone, skomplikowane logo.
Dobry kontrast: Favicon musi być rozpoznawalny zarówno na jasnym, jak i ciemnym tle, ponieważ przeglądarki wykorzystują różne style zakładek.
Dopasowanie do marki: Idealnie, gdy favicon nawiązuje kolorystyką lub kształtem do logo marki, aby zapewnić rozpoznawalność.

Wskazówki praktyczne

Aby stworzyć kompletny zestaw faviconów we wszystkich potrzebnych rozmiarach i formatach, można skorzystać z darmowych narzędzi online, takich jak RealFaviconGenerator, który na podstawie jednego obrazu generuje wszystkie potrzebne pliki oraz odpowiedni kod HTML. Użytkownicy WordPressa mogą wygodnie dodać favicon (nazywany tam "ikoną witryny") za pomocą Customizera w sekcji "Wygląd", bez konieczności edycji kodu.

Podsumowanie

Favicon to mały detal o zauważalnym wpływie. Wzmacnia rozpoznawalność, podkreśla profesjonalizm i jest widoczny nawet w wynikach wyszukiwania Google. Nakład pracy związany z jego konfiguracją jest niewielki, natomiast korzyści dla brandingu i wizerunku są trwałe. Dlatego każda strona internetowa powinna posiadać prawidłowo skonfigurowany favicon.