Zweryfikowano: lipiec 2026 – procedury sprawdzone pod WordPress 7.0.2 i nowoczesne stosy PHP 8.x.

1. Co to jest favicon i dlaczego warto go mieć?

Favicon (skrót od „favorite icon”) to mała ikona wyświetlana w zakładce przeglądarki obok tytułu strony, a także w innych miejscach, takich jak lista zakładek czy ekrany startowe urządzeń mobilnych.

Przyklad:

Choć niewielka, ta ikona pełni ważną rolę w identyfikacji Twojej strony i budowaniu jej rozpoznawalności. Dzięki faviconowi użytkownicy łatwiej odnajdują Twoją witrynę wśród wielu otwartych kart czy zapisanych zakładek.

Dlaczego warto dodać favicon do swojej strony?

Profesjonalizm: Obecność faviconu sprawia, że strona wygląda bardziej profesjonalnie i dopracowanie.
Rozpoznawalność: Pomaga w budowaniu marki i ułatwia użytkownikom identyfikację Twojej strony.
Użyteczność: Ułatwia nawigację, zwłaszcza gdy użytkownik ma otwartych wiele kart w przeglądarce.

2. Jak przygotować faviconę do WordPressa?

Zanim dodasz faviconę do swojej strony, warto przygotować odpowiedni plik graficzny. Dobrze zaprojektowana ikona zapewni czytelność i estetyczny wygląd w przeglądarkach oraz na urządzeniach mobilnych.

Zalecane parametry favicony:

Wymiary: co najmniej 512×512 pikseli
Format: PNG, ICO lub SVG
Kształt: kwadratowy (WordPress umożliwia przycinanie obrazu podczas dodawania)

Narzędzia do tworzenia favicony:

Favicon.io – generowanie favicon z tekstu, obrazu lub emoji
RealFaviconGenerator – tworzenie favicon kompatybilnych z różnymi urządzeniami
Favicon Generator – konwersja GIF, PNG lub JPEG do formatu ICO
Canva – intuicyjne narzędzie online do projektowania favicon
Favicon.cc – tworzenie favicon od podstaw lub z istniejącego obrazu
RedKetchup – generowanie favicon z tekstu z możliwością dostosowania
IONOS Favicon Generator – tworzenie favicon z tekstu lub obrazu
FaviconGenerator.com – darmowe narzędzie do tworzenia favicon
LogoAI Favicon Generator – generowanie favicon z tekstu lub obrazu
Favycon – proste narzędzie do generowania favicon w różnych rozmiarach
HubSpot Favicon Generator – tworzenie profesjonalnych favicon z możliwością dostosowania
ImagineArt AI Favicon Generator – generowanie favicon za pomocą sztucznej inteligencji

Pamiętaj, aby wybrany obraz był czytelny nawet w małych rozmiarach. Unikaj zbyt skomplikowanych wzorów i drobnych szczegółów, które mogą być niewidoczne po zmniejszeniu ikony.

Inspiracja: Zainspiruj się faviconami znanych marek, takich jak Twitter, Facebook czy LinkedIn. Zwróć uwagę, jak prostota i minimalizm pomagają w rozpoznawalności marki nawet w małych rozmiarach.

3. Metody dodawania faviconu w WordPress

W WordPressie istnieje kilka sposobów na dodanie favicony, dostosowanych do różnych potrzeb i poziomów zaawansowania użytkowników. Możesz skorzystać z wbudowanych funkcji systemu, użyć dedykowanych wtyczek lub dodać ikonę ręcznie poprzez edycję plików. W kolejnych podsekcjach omówimy te metody krok po kroku.

Za pomocą personalizatora motywu

To najprostszy sposób na dodanie faviconu, dostępny w większości motywów WordPress. Wszystko zrobisz bez dodatkowych wtyczek, bez programowania – wystarczy kilka kliknięć.

Ścieżka w panelu: Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny

Krok 1: Zaloguj się do panelu WordPress i przejdź do Wygląd → Dostosuj.
Krok 2: W menu po lewej znajdź i kliknij Tożsamość witryny.
Krok 3: Kliknij pole Ikona witryny, a następnie wybierz przycisk Wybierz obraz.
Krok 4: Wgraj przygotowany plik favicony (najlepiej PNG 512×512 px) lub wybierz go z biblioteki mediów.
Krok 5: WordPress pozwoli Ci przyciąć obraz, aby idealnie pasował do favicony – jeśli ikona jest już kwadratowa, przycinanie nie będzie konieczne.
Krok 6: Po zatwierdzeniu przycięcia kliknij Opublikuj, by zapisać zmiany.

Po tych krokach Twoja favicon powinna być widoczna w przeglądarce – pamiętaj, by odświeżyć stronę i wyczyścić pamięć podręczną, jeśli nie widzisz zmian od razu.

Poprzez ustawienia ogólne (WordPress 6.5 i nowsze)

W najnowszych wersjach WordPress (6.5 i wyżej) możesz dodać faviconę bezpośrednio w ustawieniach ogólnych – to szybka i wygodna opcja, jeśli nie korzystasz z personalizatora motywu.

Ścieżka w panelu: Ustawienia → Ogólne → Ikona witryny

Krok 1: Zaloguj się do panelu WordPress i przejdź do Ustawienia → Ogólne.
Krok 2: Znajdź sekcję Ikona witryny – to miejsce, gdzie możesz wgrać faviconę.
Krok 3: Kliknij przycisk Wybierz plik i załaduj swój plik favicony (najlepiej PNG o wymiarach 512×512 px).
Krok 4: Po wgraniu możesz przyciąć obraz, jeśli to potrzebne – WordPress podpowie, jak to zrobić.
Krok 5: Zapisz zmiany na dole strony klikając Zapisz zmiany.

Po zakończeniu odśwież stronę w przeglądarce i sprawdź, czy favicon pojawiła się na karcie przeglądarki.

Za pomocą wtyczki

Jeśli chcesz mieć więcej kontroli nad faviconą lub korzystasz ze starszej wersji WordPress, możesz skorzystać z wtyczek. To rozwiązanie dobre dla osób, które chcą szybko i bezpiecznie dodać faviconę, bez ręcznej edycji plików.

Przykładowe wtyczki do faviconu:

Favicon by RealFaviconGenerator – najpopularniejsza, generuje favicony kompatybilne ze wszystkimi przeglądarkami i urządzeniami.
All In One Favicon – prosty dodatek do ustawienia favicony i ikony dla urządzeń mobilnych.
WP Favicon – umożliwia łatwe dodanie favicony i zarządzanie nią.
Insert Headers and Footers – nie dedykowana, ale pozwala dodać kod favicon ręcznie do sekcji <head>.

Instrukcja instalacji i konfiguracji na przykładzie „Favicon by RealFaviconGenerator”:

Krok 1: Zaloguj się do panelu WordPress i przejdź do Wtyczki → Dodaj nową.
Krok 2: W polu wyszukiwania wpisz „Favicon by RealFaviconGenerator”.
Krok 3: Kliknij Zainstaluj teraz, a następnie Aktywuj.
Krok 4: Po aktywacji znajdź w menu panelu zakładkę wtyczki (zazwyczaj pod Wygląd lub osobnym menu „Favicon”).
Krok 5: Wgraj swój plik favicony i postępuj zgodnie z kreatorem, który wygeneruje odpowiednie formaty i doda je do Twojej strony.
Krok 6: Zapisz ustawienia i odśwież stronę, aby zobaczyć efekt.

Wtyczki takie jak RealFaviconGenerator dbają o to, by favicon była poprawnie wyświetlana na komputerach, telefonach i tabletach, co często wymaga wielu formatów i rozmiarów plików.

Ręczne dodanie poprzez FTP lub cPanel

Jeśli wolisz mieć pełną kontrolę nad faviconą i znasz podstawy obsługi FTP lub panelu cPanel, możesz dodać ikonę ręcznie. To metoda dla bardziej zaawansowanych, ale pozwala na dokładne dopasowanie i niezależność od wtyczek.

Krok 1: Umieszczenie pliku favicon.ico w katalogu głównym strony

Przygotuj plik favicon.ico (najczęściej 16×16 lub 32×32 px).
Połącz się z serwerem FTP lub zaloguj do panelu cPanel.
Przejdź do katalogu głównego swojej strony (zazwyczaj public_html lub folder odpowiadający Twojej domenie).
Prześlij plik favicon.ico do tego katalogu.

Krok 2: Dodanie kodu do sekcji <head>

Znajdź plik header.php w katalogu motywu (najlepiej motywu potomnego, aby nie stracić zmian przy aktualizacji).
Otwórz header.php do edycji (możesz użyć edytora w WordPress: Wygląd → Edytor motywu lub edytora plików w cPanel/FTP).
W sekcji <head> dodaj poniższy kod:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Zapisz zmiany i przeładuj stronę w przeglądarce.
Odśwież stronę kilka razy lub wyczyść pamięć podręczną przeglądarki, aby zobaczyć efekt.

Ta metoda działa najszybciej i jest wspierana przez wszystkie przeglądarki, jednak wymaga ostrożności, aby nie uszkodzić plików motywu podczas edycji.

Sprawdzenie działania faviconu

Po dodaniu faviconu warto upewnić się, że działa poprawnie na różnych urządzeniach i przeglądarkach. Czasami przeglądarki mogą korzystać z pamięci podręcznej, dlatego warto wykonać kilka kroków, by zobaczyć aktualną ikonę.

Odśwież stronę: Wciśnij Ctrl + F5 (Windows) lub Cmd + Shift + R (Mac), aby wymusić pełne odświeżenie strony bez korzystania z cache.
Sprawdź favicon w różnych przeglądarkach: Otwórz swoją stronę w Chrome, Firefox, Edge, Safari i na urządzeniach mobilnych, by upewnić się, że favicon jest widoczna wszędzie.
Wyczyść pamięć podręczną przeglądarki: Jeśli favicon się nie zmienia, wyczyść cache lub sprawdź stronę w trybie incognito.

Narzędzia do testowania kompatybilności faviconu:

RealFaviconGenerator – Favicon Checker – sprawdza, czy favicon jest poprawnie widoczna na różnych urządzeniach i przeglądarkach.
BrowserStack – narzędzie do testowania stron w wielu przeglądarkach i urządzeniach (wersja płatna, ale oferuje darmowy okres próbny).

Sprawdzenie favicony to ważny krok, który pozwala uniknąć sytuacji, że Twoja ikona nie wyświetla się poprawnie lub wcale – co może wpłynąć negatywnie na odbiór strony przez użytkowników.

Częste problemy i ich rozwiązania

Nawet jeśli dodałeś faviconę poprawnie, czasem może się zdarzyć, że nie jest widoczna. Poniżej znajdziesz najczęstsze problemy wraz z prostymi rozwiązaniami.

Dlaczego favicon nie wyświetla się na mojej stronie?

Najczęściej powodem jest pamięć podręczna przeglądarki, błędny kod HTML lub nieprawidłowy format pliku favicony. Upewnij się, że dodałeś favicon poprawnie i że plik ma odpowiednie rozszerzenie (.ico, .png lub .svg).

Jak wyczyścić pamięć podręczną przeglądarki?

Aby zobaczyć aktualną faviconę, musisz wymusić odświeżenie strony. Użyj Ctrl + F5 (Windows) lub Cmd + Shift + R (Mac), albo otwórz stronę w trybie incognito. Możesz też ręcznie wyczyścić cache w ustawieniach przeglądarki.

Jaki format favicony jest najlepszy?

Najbardziej uniwersalnym formatem jest .ico, ale WordPress obsługuje również .png i .svg. Ważne, aby plik był kwadratowy (np. 512×512 px) i zapisany w dobrej jakości.

Gdzie wstawić kod HTML favicony?

Jeśli dodajesz favicon ręcznie, kod powinien znajdować się w sekcji <head> pliku header.php w Twoim motywie. Przykładowy kod:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

Jeśli mimo wszystko favicon nie działa, sprawdź jeszcze raz nazwę pliku, jego lokalizację oraz to, czy nie nadpisuje go inna wtyczka lub ustawienie motywu.

Checklista wdrożenia favicon w WordPress krok po kroku

Praktyczne kroki, które pozwolą Ci poprawnie dodać faviconę do Twojej strony WordPress i upewnić się, że działa ona poprawnie na wszystkich urządzeniach.

Przygotuj plik favicony o wymiarach minimum 512×512 px, w formacie .ico, .png lub .svg, dbając o czytelność ikony w małych rozmiarach.
Dodaj faviconę za pomocą wbudowanego narzędzia WordPress: przejdź do Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny lub w wersji 6.5+ do Ustawienia → Ogólne → Ikona witryny i załaduj przygotowany plik.
Jeśli preferujesz wtyczkę, zainstaluj i aktywuj np. „Favicon by RealFaviconGenerator”, a następnie skonfiguruj ją zgodnie z instrukcjami wtyczki.
Dla zaawansowanych: umieść plik favicon.ico w katalogu głównym strony i dodaj do pliku header.php motywu w sekcji <head> kod: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />.
Po dodaniu favicony odśwież stronę w przeglądarce, wyczyść pamięć podręczną lub otwórz stronę w trybie incognito, aby zobaczyć zmiany.
Sprawdź poprawność działania favicony na różnych przeglądarkach i urządzeniach, korzystając z dostępnych narzędzi do testowania kompatybilności.
W razie problemów zweryfikuj nazwę i lokalizację pliku, poprawność kodu HTML oraz konflikt z innymi wtyczkami lub ustawieniami motywu.

Powiązane na WP-Dude

Jeśli chcesz dalej rozwijać swoją stronę WordPress i zadbać o jej funkcjonalność oraz bezpieczeństwo, warto zapoznać się z poniższymi poradnikami.

Podsumowanie

Favicon to niewielki, ale bardzo istotny element Twojej strony internetowej. Pomaga budować rozpoznawalność marki, podnosi profesjonalizm witryny i ułatwia użytkownikom poruszanie się po wielu otwartych kartach w przeglądarce.

Pamiętaj, aby regularnie sprawdzać działanie favicony w różnych przeglądarkach i urządzeniach. Jeśli zmieniasz logo lub styl wizualny strony – favicon również warto odświeżyć.

Masz problem z dodaniem favicony? Coś nie działa tak jak powinno? Albo po prostu chcesz, żeby ktoś zrobił to za Ciebie – bez stresu i bez kombinowania?

Skontaktuj się z nami na wp-dude.com/ – zajmiemy się Twoim WordPressem od A do Z. Profesjonalnie, szybko i po ludzku. Bo WordPress to nasz żywioł 🚀

Jak dodać favicon w WordPress krok po kroku – poradnik dla początkujących