Jak dodać do WordPress favicon (ikonę strony w przeglądarce)

Wprowadzenie – znaczenie favicon dla rozpoznawalności marki

Favicon to mała ikona strony, widoczna między innymi na karcie przeglądarki i w zakładkach. Pomaga odnaleźć witrynę wśród wielu otwartych kart. Google może też pokazać ją przy wyniku wyszukiwania, ale nie gwarantuje jej wyświetlenia ani wyższej pozycji.

W WordPress najłatwiej ustawić favicon jako ikonę witryny. Poniżej znajdziesz instrukcję, wskazówki do ręcznego wdrożenia oraz sposoby sprawdzenia problemów.

Wymagania techniczne i formaty favicon

Przygotuj kwadratowy obraz PNG o wymiarach co najmniej 512×512 pikseli. To zalecany materiał źródłowy dla funkcji ikony witryny WordPress; system przygotuje z niego mniejsze wersje. PNG obsługuje przezroczystość, a ICO może przydać się przy ręcznym wdrożeniu. Nie trzeba generować wszystkich formatów na zapas.

Google Search wymaga kwadratowej ikony co najmniej 8×8 pikseli i zaleca rozmiar większy niż 48×48 pikseli. PNG jest jednym z obsługiwanych formatów. Szczegóły znajdziesz w wytycznych Google.

Przygotowanie grafiki favicon

Wybierz prosty symbol lub inicjał zamiast całego logo z drobnym tekstem. Zostaw niewielki margines i sprawdź kontrast na jasnym oraz ciemnym tle. Przeskaluj podgląd do 16×16 i 32×32 pikseli: jeśli znak przestaje być czytelny, uprość go.

Wyeksportuj kwadratowy PNG z programu graficznego. Jeśli korzystasz z generatora online, nie wysyłaj do niego poufnych materiałów. Optymalizację pliku sprawdź wizualnie — zbyt mocna kompresja może pogorszyć krawędzie.

Dodawanie favicon przez panel WordPress

W WordPress 6.5 i nowszym ustawienie znajduje się w sekcji Ustawienia → Ogólne:

1. Znajdź pole Ikona witryny i wybierz ikonę.
2. Prześlij przygotowany PNG lub wybierz go z biblioteki mediów.
3. W razie potrzeby przytnij obraz, zatwierdź wybór i zapisz zmiany.
4. Otwórz stronę w nowej karcie i sprawdź jej ikonę.

W wersjach WordPress 4.3–6.4 użyj ścieżki Wygląd → Personalizuj → Identyfikacja witryny → Ikona witryny, a następnie opublikuj zmiany. Dostępność personalizatora zależy od motywu. Zobacz też instrukcję WordPress.

Ręczna implementacja favicon w kodzie

Ręczne wdrożenie ma sens, gdy potrzebujesz własnych wariantów ikon. Najpierw wykonaj kopię zapasową i sprawdź zmianę na środowisku testowym. Nie edytuj plików motywu nadrzędnego: aktualizacja może nadpisać zmiany.

Umieść plik w motywie potomnym i dodaj w sekcji head odwołanie do niego, na przykład:

<link rel="icon" type="image/png" href="/sciezka/do/favicon-32.png" sizes="32x32">

Zastąp ścieżkę rzeczywistym adresem pliku. W kodzie motywu potomnego można użyć funkcji get_stylesheet_directory_uri() do pobrania jego adresu i akcji wp_head do wypisania znacznika; motyw musi wywoływać wp_head(). W motywie nadrzędnym odpowiada jej get_template_directory_uri(). Nie dodawaj równolegle sprzecznych ikon przez motyw, wtyczkę i ustawienia WordPress — sprawdź znaczniki w źródle strony.

Tworzenie favicon dla urządzeń mobilnych (iOS, Android)

Ikona na ekranie głównym telefonu to inne zastosowanie niż mały favicon na karcie. WordPress generuje odpowiednie warianty z ikony witryny, w tym ikonę Apple. Po ustawieniu sprawdź efekt na urządzeniu, dodając stronę do ekranu głównego.

Przy ręcznym wdrożeniu można wskazać PNG 180×180 pikseli przez rel="apple-touch-icon". Jeśli witryna działa jako PWA, ikony instalacji dla zgodnych przeglądarek definiuje się także w manifeście, opisanym poniżej.

Dodawanie favicon do PWA (Progressive Web Apps)

Do zwykłego favicon nie potrzebujesz PWA ani service workera. Jeśli jednak witryna ma być instalowana jako aplikacja, przygotuj manifest z nazwą, adresem startowym, trybem wyświetlania i ikonami. Dla przeglądarek Chromium warto podać PNG 192×192 i 512×512 pikseli, a następnie podłączyć manifest znacznikiem link rel="manifest".

Wymagania instalacji różnią się między przeglądarkami. Service worker może obsługiwać działanie offline, ale jego konfiguracja wykracza poza dodanie ikony. Szczegóły opisuje dokumentacja MDN.

Testowanie favicon w różnych przeglądarkach

1. Otwórz stronę w nowej karcie, a następnie w oknie prywatnym lub innej przeglądarce. Sprawdź czytelność ikony na jasnym i ciemnym tle.
2. W narzędziach deweloperskich znajdź w nagłówku dokumentu znaczniki rel="icon" i apple-touch-icon. Upewnij się, że wskazują właściwe pliki i nie ma sprzecznych wpisów.
3. Otwórz adres ikony bezpośrednio. W zakładce Network sprawdź, czy plik ładuje się poprawnie, bez błędu 404, blokady dostępu lub przekierowania do strony logowania.
4. Jeśli ikona ma służyć jako skrót mobilny, dodaj stronę do ekranu głównego na docelowym urządzeniu i sprawdź rezultat.

Rozwiązywanie problemów z wyświetlaniem ikon

Ikona nie wyświetla się lub jest nieaktualna

Sprawdź adres i odpowiedź serwera zgodnie z checklistą powyżej. Jeśli plik jest poprawny, wyczyść pamięć podręczną przeglądarki oraz — jeśli są używane — cache WordPressa i CDN. Twarde odświeżenie nie zawsze usuwa zapisany favicon. Przy ręcznym wdrożeniu można jednorazowo zmienić adres pliku i zaktualizować wskazujący na niego znacznik; nie zmieniaj adresu często, ponieważ Google zaleca stabilny URL.

Ikona nie pojawia się w Google

Sprawdź, czy strona główna wskazuje właściwą ikonę i czy Googlebot może ją pobrać, a Googlebot-Image ma dostęp do pliku, również przez ewentualne przekierowania. Upewnij się, że obraz jest kwadratowy i ma obsługiwany format. Zmiana w wynikach może potrwać od kilku dni do kilku tygodni; możesz poprosić o ponowne zaindeksowanie strony głównej w Search Console. Nawet po spełnieniu wytycznych Google nie gwarantuje wyświetlenia ikony. Plik nie musi znajdować się w katalogu głównym.

Podsumowanie – najlepsze praktyki

W większości witryn wystarczy czytelny PNG 512×512 pikseli ustawiony jako ikona witryny w WordPress. Po zapisaniu sprawdź kartę przeglądarki, adres pliku i ewentualne duplikaty znaczników. Osobny manifest przygotuj wtedy, gdy rozwijasz PWA, a nie tylko po to, by dodać favicon.

Jeśli chcesz dowiedzieć się więcej o projektowaniu interfejsów w WordPress, polecam nasz artykuł o sekcjach opinii klientów, który zawiera dodatkowe wskazówki dotyczące projektowania elementów wizualnych.