Favicon

Co to znaczy favicon?

Favicon to ikona przypisana do witryny, używana jako jej mały znak rozpoznawczy w interfejsach przeglądarek i niektórych usług. Nazwa powstała z połączenia angielskich słów favorite i icon.

Ikona może pojawiać się obok tytułu otwartej karty, na liście zakładek, w historii, przy skrócie na ekranie urządzenia oraz obok wyniku w Google. Miejsce i sposób prezentacji zależą od przeglądarki, systemu oraz formatu przygotowanych plików.

Favicon nie zastępuje logo używanego w nagłówku strony. Powinien być znacznie prostszy, ponieważ drobny napis lub cienkie linie przestają być czytelne po zmniejszeniu. Dobrym wyborem jest pojedynczy symbol, litera albo uproszczony fragment znaku marki.

Jak zrobić favicon?

Favicon należy zaprojektować na kwadratowym obszarze, z wyraźnym kształtem i odpowiednim kontrastem. Projekt można przygotować w programie graficznym lub generatorze online, a następnie wyeksportować do formatów obsługiwanych przez przeglądarki i urządzenia.

Najczęściej używa się PNG, SVG i ICO. PNG zachowuje przezroczystość i działa w wielu środowiskach. SVG dobrze skaluje prostą grafikę, lecz starsze programy mogą go nie obsługiwać. Plik ICO pozwala umieścić kilka rozmiarów w jednym kontenerze i nadal przydaje się jako format zgodności.

Przed publikacją trzeba obejrzeć ikonę w małym rozmiarze na jasnym i ciemnym tle. Pełne logo z nazwą firmy zwykle jest nieczytelne, dlatego lepiej zachować sam sygnet oraz bezpieczny odstęp od krawędzi.

Jaki rozmiar powinien mieć favicon?

Favicon powinien mieć proporcje 1:1, a zestaw plików powinien odpowiadać miejscom, w których ikona będzie prezentowana. Dla kart przeglądarki często przygotowuje się warianty 16 x 16 i 32 x 32 px, natomiast urządzenia mobilne mogą korzystać z większych grafik.

Według aktualnych wytycznych Google Search favicon musi być kwadratowy i mieć co najmniej 8 x 8 px. Google zaleca plik większy niż 48 x 48 px, aby znak dobrze wyglądał na różnych powierzchniach. Wcześniejsze porady często mówiły o rozmiarze będącym wielokrotnością 48 px, lecz bieżąca dokumentacja formułuje wymaganie inaczej.

Google obsługuje w wynikach wyszukiwania między innymi formaty ICO, PNG, GIF i JPEG. Samo spełnienie parametrów nie gwarantuje wyświetlenia ikony. Robot Google musi móc pobrać stronę główną i plik faviconu, a adres pliku powinien pozostawać stabilny.

Jak dodać favicon w HTML?

Favicon dodaje się przez element link umieszczony w sekcji head dokumentu HTML. Atrybut rel określa typ ikony, a href prowadzi do pliku pod adresem względnym lub bezwzględnym.

Podstawowy zapis ma postać <link rel="icon" href="/favicon.png">. Można dodać osobne elementy dla różnych formatów lub ikon urządzeń Apple. W systemach CMS odpowiednie pole często znajduje się w ustawieniach wyglądu albo identyfikacji witryny, więc ręczna edycja szablonu nie zawsze jest potrzebna.

Plik powinien odpowiadać kodem HTTP 200 i mieć poprawny typ MIME. Jeżeli adres prowadzi przez CDN, należy sprawdzić, czy cache nie zwraca starej grafiki. Zmiana nazwy pliku lub parametru wersji pomaga przeglądarce pobrać nowy wariant, ale adres używany dla Google nie powinien zmieniać się bez potrzeby.

Dlaczego favicon się nie wyświetla?

Favicon nie wyświetla się najczęściej przez błędny adres pliku, pamięć podręczną, blokadę dostępu dla robotów albo niepoprawny kod w sekcji head. Problem może dotyczyć jednej przeglądarki, wyników Google lub wszystkich miejsc jednocześnie.

• Otwórz bezpośredni adres pliku i sprawdź, czy serwer zwraca obraz bez błędu.
• Zweryfikuj element link w kodzie źródłowym strony głównej oraz zgodność ścieżki z używanym protokołem HTTPS.
• Wyczyść cache przeglądarki, strony i CDN, a następnie wykonaj test w oknie prywatnym.
• Sprawdź robots.txt i nagłówki HTTP, aby potwierdzić dostęp dla Googlebota oraz Googlebot-Image.
• Po zmianie poproś o ponowne zindeksowanie strony głównej w Google Search Console i poczekaj na ponowne przetworzenie danych.

Google może potrzebować od kilku dni do kilku tygodni na ponowne pobranie i przetworzenie faviconu. Brak natychmiastowej zmiany w wynikach nie świadczy więc sam w sobie o błędzie wdrożenia.

Czy favicon wpływa na SEO?

Favicon nie jest opisany jako bezpośredni sygnał ustalający pozycję strony, ale pomaga użytkownikowi rozpoznać markę w interfejsie przeglądarki i wynikach wyszukiwania. Jego rola dotyczy przede wszystkim identyfikacji i spójności wizualnej.

Google może zastąpić ikonę znakiem domyślnym, jeśli plik nie spełnia wytycznych, jest niedostępny albo przedstawia niedozwolony motyw. Jedna domena hosta może mieć jeden favicon dla strony głównej i wszystkich podkatalogów, natomiast subdomena jest traktowana jako osobny host.

Przy audycie trzeba sprawdzić zarówno wygląd grafiki, jak i jej dostępność techniczną. Sama obecność pliku favicon.ico w katalogu głównym nie rozwiązuje problemu, jeśli kod wskazuje inny adres lub robot nie może pobrać strony.