📌 Jak dodać favicon w WordPress: 3 sposoby dla każdej strony

Strona bez favicon wygląda na niedokończoną. Odwiedzający otwiera pięć kart, szuka Pana/Pani strony wśród nich i nie znajduje, bo zamiast ikony widnieje tam szara domyślna ikona przeglądarki. Drobiazg? Tak. Ale to właśnie takie drobiazgi kształtują wrażenie: czy o Pana/Panią zadbano, czy zrobiono na szybko.

WordPress uprościł dodawanie ikony witryny do kilku kliknięć, jednak połowa właścicieli stron albo nie wie o tej funkcji, albo po przesłaniu pliku napotyka problem z niewyświetlaniem się favicon. Przyczyna prawie zawsze leży w pamięci podręcznej przeglądarki lub nieprawidłowym rozmiarze pliku.

Poniżej trzy działające sposoby na dodanie favicon w WordPress: przez kreator dostosowywania (najprostszy), ręcznie przez kod i przez wtyczkę. Plus omówienie wymagań dotyczących rozmiaru i formatu, aby ikona wyświetlała się wszędzie: na kartach, w zakładkach, na iPhonie i Androidzie.

💡 Szybki przegląd:

• Czym jest favicon i po co jest stronie: rozpoznawalność marki, zaufanie, nawigacja po kartach
• Wymagania dotyczące pliku: kwadratowy obraz o standardowym rozmiarze, format PNG, ICO lub SVG
• Sposób 1: przesłanie przez „Witryna" → kreator dostosowywania (2 minuty, bez wtyczek)
• Sposób 2: ręczne wstawienie przez functions.php lub header.php (dla osób edytujących szablon)
• Sposób 3: instalacja wtyczki Site Favicon (jeśli kreator dostosowywania jest niedostępny)
• Co robić, gdy favicon się nie wyświetla: pamięć podręczna przeglądarki, stary plik ICO, CDN

Po co stronie favicon i jakie są wobec niego wymagania

Favicon (skrót od favorite icon) to mała ikona, którą przeglądarka pokazuje po lewej stronie tytułu strony na karcie, w zakładkach i w historii przeglądania. Użytkownik z kilkunastoma otwartymi kartami znajduje Pana/Pani stronę wzrokiem w ułamku sekundy właśnie po favicon, a nie po tekście tytułu.

Druga funkcja jest mniej oczywista: favicon uczestniczy w budowaniu mikro-wizerunku marki. Gdy ktoś zapisuje stronę w zakładkach lub dodaje witrynę do ekranu głównego smartfona, trafia tam właśnie ikona witryny. Bez niej WordPress wstawia albo szary symbol zastępczy, albo zrzut ekranu strony, co wygląda niechlujnie.

Wymagania dotyczące rozmiaru i formatu

Od 2014 roku WordPress obsługuje przesyłanie ikony witryny przez kreator dostosowywania. Wymagania są standardowe:

• Rozmiar: 512×512 pikseli. WordPress automatycznie generuje pomniejszone kopie dla przeglądarek (32×32, 180×180 dla ikony dotykowej Apple, 192×192 i 512×512 dla Androida). Nie trzeba przesyłać osobnych plików dla każdej rozdzielczości, rdzeń systemu robi to sam. Więcej o wymaganiach dotyczących ikony witryny w oficjalnej dokumentacji WordPress.
• Format: PNG (zalecany), ICO lub SVG. PNG daje najlepszą jakość na ekranach retina. ICO, format starszego typu dla starych przeglądarek, w praktyce w 2026 roku można się bez niego obejść.
• Co wykorzystać jako favicon: logo, rozpoznawalne w kwadracie i czytelne przy dużym pomniejszeniu. Tekst z trzech-czterech liter na kolorowym tle działa lepiej niż skomplikowana ilustracja.

Główna zasada podczas przygotowywania pliku: kwadrat. Nie-kwadratowy obraz WordPress przytnie siłą, a rezultat może Pana/Pani nie zadowolić.

Jak dodać favicon w WordPress: 3 sposoby

Sposób 1: przez kreator dostosowywania, najprościej

Ta metoda działa na każdej nowoczesnej wersji WordPress z klasycznym szablonem. W przypadku szablonów blokowych (FSE) ścieżka jest nieco inna, pokażę obie.

Szablon klasyczny (Customizer):

• Proszę wejść do panelu administracyjnego WordPress.
• Proszę przejść do Wygląd → Dostosuj (Appearance → Customize).
• Proszę wybrać sekcję Tożsamość witryny (Site Identity). W niektórych szablonach nazywa się ona „Informacje o witrynie" lub „Site Icon & Logo".
• Proszę znaleźć pole Ikona witryny (Site Icon). Proszę kliknąć „Wybierz ikonę witryny" i przesłać kwadratowy plik PNG, WordPress oczekuje obrazu o wymiarach co najmniej 512×512, zgodnie z dokumentacją.
• W razie potrzeby proszę przyciąć obraz we wbudowanym edytorze i kliknąć „Zapisz zmiany".

Szablon blokowy (Site Editor, WordPress 5.9+):

Jeśli szablon obsługuje Full Site Editing, kreator dostosowywania został zastąpiony edytorem witryny. Proszę wejść w Wygląd → Edytor, otworzyć panel Style lub Ustawienia, znaleźć sekcję Ikona witryny i przesłać ten sam kwadratowy obrazek. Logika jest ta sama, interfejs inny.

Po zapisaniu proszę otworzyć stronę w nowym prywatnym oknie przeglądarki, favicon powinien pojawić się na karcie. Jeśli nie pojawi się od razu, proszę nie panikować: przeglądarka agresywnie buforuje favicon. Więcej na ten temat w sekcji najczęstszych pytań poniżej.

Sposób 2: ręcznie przez functions.php

Opcja dla osób, które edytują szablon potomny i nie chcą polegać na kreatorze dostosowywania. Proszę dodać następujący kod do functions.php szablonu potomnego lub przez wtyczkę Code Snippets:

1
/**
2
 * Підключаємо favicon через wp_head.
3
 * Файл favicon.png повинен лежати в корені дочірньої теми.
4
 */
5
add_action( 'wp_head', 'sdstudio_add_favicon' );
6
 
7
function sdstudio_add_favicon() {
8
    $favicon_url = get_stylesheet_directory_uri() . '/favicon.png';
9
    echo '<link rel="icon" href="' . esc_url( $favicon_url ) . '" type="image/png" sizes="512x512">' . "\n";
10
    echo '<link rel="apple-touch-icon" href="' . esc_url( $favicon_url ) . '" sizes="180x180">' . "\n";
11
}

Co tu się dzieje: hak wp_head wstawia dwa znaczniki <link> do <head> każdej strony. Pierwszy to standardowy favicon dla przeglądarek, drugi to ikona dotykowa Apple dla urządzeń Apple (iPhone, iPad). Funkcja get_stylesheet_directory_uri() zwraca URL szablonu potomnego, favicon należy umieścić właśnie tam, w katalogu głównym folderu z szablonem.

Zmiana nazwy pliku na favicon.ico nie jest obowiązkowa. WordPress normalnie pracuje z PNG, a przeglądarki rozumieją go bez problemu. Najważniejszy jest kwadrat o standardowym rozmiarze.

Jeśli podłącza Pan/Pani favicon nie z szablonu, a z katalogu głównego witryny, proszę zastąpić get_stylesheet_directory_uri() przez home_url() i skorygować ścieżkę:

1
$favicon_url = home_url( '/favicon.png' );

Po dodaniu kodu proszę przesłać plik favicon.png do odpowiedniego folderu przez FTP lub menedżera plików hostingu. Proszę sprawdzić rezultat w prywatnym oknie przeglądarki.

Sposób 3: przez wtyczkę

Jeśli kreator dostosowywania z jakiegoś powodu nie pozwala przesłać ikony witryny (zdarza się w niestandardowych i przestarzałych szablonach), proszę zainstalować wtyczkę Site Favicon, minimalistyczną i bezpłatną. Instaluje się ją standardowo: Wtyczki → Dodaj nową → wyszukiwanie „Site Favicon" → Zainstaluj → Aktywuj. Po aktywacji w panelu administracyjnym pojawia się pozycja Ustawienia → Site Favicon, gdzie można przesłać ikonę i od razu zobaczyć podgląd.

Inną opcją jest All in One SEO. Jeśli wtyczka SEO jest już na stronie, proszę zajrzeć do jej ustawień: jest tam sekcja przesyłania ikony witryny, która robi to samo bez dodatkowej wtyczki. Ale instalowanie ciężkiego kombajnu SEO tylko dla favicon nie jest zalecane, Site Favicon radzi sobie z zadaniem, waży mniej i nie dodaje zbędnego obciążenia.

Po ustawieniu favicon którymkolwiek z trzech sposobów proszę sprawdzić, czy ikona rzeczywiście się wyświetla: proszę otworzyć stronę w trybie incognito i spojrzeć na kartę przeglądarki.

Na filmie powyżej znajduje się demonstracja krok po kroku wszystkich trzech sposobów na działającej stronie WordPress. Jeśli po przeczytaniu pozostały wątpliwości co do któregoś z kroków, proszę obejrzeć nagranie: w 1:15 pokazują przesyłanie przez kreator dostosowywania, w 3:40 sposób ręczny.

⁉️🤔 Najczęstsze pytania

Dlaczego favicon nie wyświetla się po przesłaniu przez kreator dostosowywania?

W większości przypadków problemem jest pamięć podręczna przeglądarki. Favicon jest buforowany agresywnie, przeglądarka może przechowywać starą wersję przez kilka dni. Proszę otworzyć stronę w trybie incognito (Ctrl+Shift+N w Chrome): jeśli ikona się pojawiła, chodzi właśnie o pamięć podręczną. Proszę wyczyścić pamięć podręczną przeglądarki lub poczekać na jej naturalne zresetowanie. Drugą najczęstszą przyczyną jest przesłanie favicon w formacie ICO, podczas gdy przeglądarka oczekuje PNG. WordPress od wersji 4.3 preferuje PNG, proszę przesłać kwadrat o standardowym rozmiarze w PNG, jak wymaga tego dokumentacja, a problem zniknie.

Czy można użyć logo jako favicon?

Można i trzeba, to standardowa praktyka. Ale nie każde logo się nadaje. Proszę sprawdzić, jak Pana/Pani logo wygląda w małej skali: jeśli detale zlewają się w nieczytelną plamę, proszę zrobić uproszczoną wersję. Dobrym przykładem jest ikona WordPress (W na niebieskim tle): rozpoznawalna nawet w mikroskopijnym rozmiarze. Poziome logo z dziesięcioliterowym tekstem przy dużym pomniejszeniu zamieni się w szary pasek, do favicon proszę wziąć tylko znak bez tekstu.

Dlaczego WordPress wymaga favicon właśnie takiego rozmiaru?

Dla WordPress tak. Rdzeń systemu przyjmuje właśnie ten rozmiar jako źródłowy i generuje wszystkie niezbędne pomniejszone kopie automatycznie, oficjalna dokumentacja potwierdza minimalne wymaganie 512 px na każdym boku. Jeśli przesłać favicon o mniejszym rozmiarze (na przykład 128×128), skalowanie do 512 pikseli nastąpi z utratą jakości, a na ekranach retina ikona będzie wyglądać na rozmytą. Wyjątek stanowi sytuacja, gdy podłącza Pan/Pani favicon ręcznie przez kod (sposób 2): wtedy można przygotować kilka rozmiarów i zdefiniować je osobnymi znacznikami <link>.

Jak usunąć lub zmienić favicon?

Zmiana odbywa się przez ten sam interfejs, w którym ikona była przesyłana: kreator dostosowywania → Tożsamość witryny → Ikona witryny → „Usuń", a następnie przesłanie nowej. Stara ikona będzie przez jakiś czas widoczna w pamięci podręcznej przeglądarki (nawet do kilku dni), to normalne. Całkowite usunięcie to przycisk „Usuń" w tym samym interfejsie, po czym WordPress przestanie wysyłać znaczniki favicon, a przeglądarka wróci do szarego symbolu zastępczego.

Czy favicon wpływa na SEO?

Bezpośrednio nie. Google nie wykorzystuje obecności ani braku favicon jako czynnika rankingowego. Pośrednio tak: strona z favicon wygląda bardziej profesjonalnie, użytkownicy rzadziej mylą ją z konkurencją podczas nawigacji po kartach. Obniża to wskaźnik pogo-sticking (powrotu do wyników wyszukiwania), co wyszukiwarki uwzględniają pośrednio. Dodatkowo Google czasami pokazuje favicon w wynikach wyszukiwania mobilnego, ikona czyni snippet bardziej widocznym wizualnie, co podnosi CTR.

Który sposób wybrać: krótki algorytm

Jeśli ma Pan/Pani standardowy szablon z kreatorem dostosowywania, proszę użyć sposobu 1. To dwa kliknięcia, a WordPress bierze na siebie całą część techniczną: zmianę rozmiaru, generowanie znaczników, obsługę Apple i Androida. Dziewięć na dziesięć stron na WordPress załatwia kwestię favicon właśnie tak.

Niestandardowy szablon bez obsługi ikony witryny? Proszę podłączyć przez functions.php (sposób 2), trzy linijki kodu dają pełną kontrolę nad rozmiarami i formatem. Wtyczkę (sposób 3) proszę zostawić na wypadek, gdy ani kreator dostosowywania, ani edycja szablonu nie są dostępne, na przykład jeśli strona jest na instalacji wielostanowiskowej z ograniczonymi uprawnieniami lub pracuje Pan/Pani z kreatorem stron, który nie daje dostępu do functions.php.

I najważniejsze: po przesłaniu favicon proszę sprawdzić stronę w trybie incognito nowej przeglądarki. Proszę nie polegać na zwykłym oknie, mogła się tam zapisać w pamięci podręcznej stara wersja lub sam symbol zastępczy. Zobaczył Pan/Pani ikonę na karcie? Gotowe.