Jak dodać faviconę do witryny WordPress

Dodanie favicony do WordPress zajmuje około 30 sekund: przejdź do Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny, prześlij plik PNG o wymiarach 512x512 i kliknij Opublikuj. Gotowe.

Ale jeśli to nie zadziała — lub chcesz mieć więcej kontroli — czytaj dalej. Jest kilka pułapek, o których warto wiedzieć.

Szybka metoda: WordPress Customizer

Ta metoda działa na każdej witrynie WordPress w wersji 4.3 lub nowszej (wydanej w 2015 roku). Jeśli korzystasz z w miarę aktualnej wersji, masz tę opcję.

Krok 1: Otwórz Customizer

• Przejdź do Wygląd → Dostosuj w panelu administracyjnym WordPress
• Lub kliknij "Dostosuj" na pasku administracyjnym podczas przeglądania strony

Krok 2: Znajdź Tożsamość witryny

• Kliknij Tożsamość witryny na pasku bocznym Customizera
• Przewiń w dół do Ikona witryny

Krok 3: Prześlij obraz

• Kliknij Wybierz ikonę witryny
• Prześlij obraz PNG o wymiarach co najmniej 512 x 512 pikseli
• WordPress automatycznie wygeneruje wszystkie mniejsze rozmiary, których potrzebuje (w tym 32x32, 180x180 itd.)
• Przytnij, jeśli zostaniesz o to poproszony, a następnie kliknij Opublikuj

To wszystko. WordPress zajmie się resztą — tworzy tagi <link> dla favicony przeglądarki, ikon Apple Touch i nawet obrazu kafelka Windows.

Metoda z kodem: Ręczne dodawanie favicony

Czasem podejście z Customizerem nie wystarcza. Może budujesz niestandardowy motyw lub Twój motyw nadpisuje domyślne zachowanie. Oto jak dodać faviconę kodem.

Opcja A: Umieść pliki w motywie

Prześlij pliki favicony do katalogu głównego motywu, a następnie dodaj to do functions.php motywu:

function custom_favicon() {
    $favicon_url = get_stylesheet_directory_uri();
    ?>
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo $favicon_url; ?>/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo $favicon_url; ?>/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo $favicon_url; ?>/apple-touch-icon.png">
    <?php
}
add_action('wp_head', 'custom_favicon');

Opcja B: Użyj favicony SVG

Favicony SVG skalują się idealnie i obsługują tryb ciemny. Dodaj to do functions.php:

function svg_favicon() {
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.svg';
    ?>
    <link rel="icon" type="image/svg+xml" href="<?php echo $favicon_url; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon-32x32.png">
    <?php
}
add_action('wp_head', 'svg_favicon');

Awaryjna wersja PNG jest potrzebna dla Safari, które wciąż nie w pełni obsługuje favicony SVG.

Korzystanie z wtyczki (jeśli wolisz)

Kilka wtyczek obsługuje favicony, ale szczerze? Wbudowany Customizer działa dobrze w większości przypadków. Wtyczki mają sens, gdy potrzebujesz:

• Różnych favicon dla poszczególnych stron lub wpisów
• Testów A/B różnych ikon
• Multisite z faviconami dla każdej podstrony

Popularne opcje to All in One Favicon i Flavor (dawniej flavicon). Ale znowu — najpierw wypróbuj Customizer.

Motywy blokowe WordPress (Full Site Editing)

Jeśli korzystasz z motywu blokowego, takiego jak Twenty Twenty-Four lub Twenty Twenty-Five, proces jest nieco inny:

1. Przejdź do Wygląd → Edytor
2. Kliknij Style (ikona półkola)
3. Przejdź do globalnych stylów witryny
4. Ustawienie Ikony witryny nadal znajduje się w Wygląd → Dostosuj → Tożsamość witryny

Motywy blokowe nadal korzystają z tego samego Customizera dla favicony. WordPress nie przeniósł jeszcze tej funkcji do Edytora witryny.

Zalecane pliki favicony

Dla pełnego pokrycia przygotuj te pliki:

WordPress Customizer obsługuje większość z nich automatycznie, gdy prześlesz obraz 512x512. Pliki SVG i ICO należy dodać ręcznie, jeśli ich potrzebujesz.

Rozwiązywanie problemów: Favicona się nie wyświetla

Wyczyść wszystko

Problemy z faviconą w WordPress prawie zawsze wynikają z buforowania:

1. Pamięć podręczna przeglądarki: Wymuś odświeżenie za pomocą Ctrl+Shift+R (Windows) lub Cmd+Shift+R (Mac)
2. Pamięć podręczna WordPress: Jeśli korzystasz z WP Super Cache, W3 Total Cache lub LiteSpeed Cache — wyczyść ją
3. Pamięć podręczna CDN: Cloudflare, Fastly lub cokolwiek używasz — wyczyść adresy URL favicony
4. Spróbuj trybu incognito: Otwiera czystą sesję bez buforowanych plików

Sprawdź konflikty wtyczek

Niektóre wtyczki SEO i frameworki motywów dodają własne tagi favicony. Jeśli widzisz zduplikowane tagi <link rel="icon"> w źródle strony:

1. Wyświetl źródło strony (Ctrl+U)
2. Wyszukaj "icon" lub "favicon"
3. Jeśli są duplikaty, sprawdź, która wtyczka je dodaje
4. Wyłącz funkcję favicony we wtyczce lub usuń swój ręczny kod

Problemy z nadpisywaniem przez motyw

Niektóre motywy (szczególnie premium) mają własne ustawienia favicony, które nadpisują Customizer. Sprawdź:

• Panel Opcje motywu pod kątem ustawień favicony
• Plik header.php motywu pod kątem zakodowanych na stałe tagów <link rel="icon">
• Dokumentację motywu pod kątem instrukcji dotyczących favicony

Rozwiązywanie problemów: Google pokazuje złą faviconę

Google może potrzebować od kilku dni do kilku tygodni na aktualizację favicony w wynikach wyszukiwania. Oto jak to przyspieszyć:

Wymagania Google dotyczące favicony

Google ma określone zasady wyświetlania favicony w wynikach wyszukiwania:

• Musi być wielokrotnością 48 px (48x48, 96x96, 144x144)
• Musi być kwadratowa
• Nie może zawierać nieodpowiednich lub NSFW treści
• Musi reprezentować witrynę (nie być generyczną ikoną)

Przyspiesz aktualizację

1. Upewnij się, że favicona jest dostępna na żywo
2. Otwórz Google Search Console
3. Użyj Sprawdzania adresów URL na stronie głównej
4. Kliknij Poproś o indeksowanie
5. Poczekaj — zwykle zajmuje to 1-2 tygodnie

Rozwiązywanie problemów: Favicona widoczna na desktopie, ale nie na urządzeniach mobilnych

Przeglądarki mobilne są bardziej wymagające co do formatów favicony:

• Safari iOS: Potrzebuje apple-touch-icon (180x180) — zwykła favicona nie wyświetli się na ekranie głównym
• Chrome Android: Szuka manifest.json z odwołaniami do ikon dla ekranu głównego
• PWA: Wymaga zarówno ikon 192x192, jak i 512x512 zdefiniowanych w manifeście aplikacji webowej

Jeśli Twoja witryna WordPress ma manifest aplikacji webowej (niektóre motywy i wtyczki go dodają), upewnij się, że ścieżki ikon w nim są prawidłowe.

Rozważania dotyczące Multisite

Prowadzisz WordPress Multisite? Każda witryna potrzebuje własnej favicony.

• Customizer jest per-witryna, więc każda podstrona może mieć własną ikonę
• Ustawienia na poziomie sieci nie zawierają domyślnej favicony
• Jeśli chcesz domyślną faviconę dla całej sieci, dodaj ją przez functions.php we wtyczce must-use (wp-content/mu-plugins/)

Najlepsze praktyki

• Zacznij od dużego: Prześlij co najmniej 512x512 — WordPress skaluje w dół, nigdy w górę
• Użyj PNG: Przezroczyste tła działają lepiej niż JPEG
• Prostota: Twoja favicona jest malutka — złożone logotypy nie będą czytelne w 16x16
• Testuj w różnych przeglądarkach: Użyj Favicon.im, aby zweryfikować konfigurację
• Wersjonuj faviconę: Dodaj ?v=2 do URL-a przy aktualizacji, aby wymusić odświeżenie cache'a

FAQ

Jak dodać faviconę w WordPress?

Przejdź do Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny, prześlij obraz PNG o wymiarach 512x512 pikseli i kliknij Opublikuj. WordPress automatycznie generuje wszystkie wymagane rozmiary.

Jaki rozmiar powinna mieć favicona WordPress?

Prześlij co najmniej 512 x 512 pikseli. WordPress automatycznie stworzy rozmiary 32x32, 180x180 i inne. Dla wyników wyszukiwania Google użyj wielokrotności 48 px.

Dlaczego moja favicona WordPress się nie wyświetla?

Zwykle jest to problem z buforowaniem. Wyczyść pamięć podręczną przeglądarki, wtyczkę cache WordPress i cache CDN. Spróbuj trybu incognito. Sprawdź też konflikty wtyczek powodujące zduplikowane tagi favicony.

Czy mogę użyć favicony SVG w WordPress?

WordPress domyślnie nie obsługuje przesyłania SVG ze względów bezpieczeństwa. Możesz dodać obsługę favicony SVG ręcznie przez kod functions.php lub użyć wtyczki umożliwiającej przesyłanie SVG.

Jak dodać różne favicony dla trybu jasnego i ciemnego w WordPress?

Użyj favicony SVG z osadzonymi zapytaniami medialnymi CSS dla prefers-color-scheme. Dodaj plik SVG ręcznie przez functions.php, ponieważ Customizer obsługuje tylko formaty PNG/ICO.

Źródła

1. Site Icon - WordPress Developer Resources - Oficjalna dokumentacja WordPress
2. Define a favicon to show in search results - Google Search Central
3. Favicon.im - Narzędzie do testowania i walidacji favicony