Favicon: co to jest, wymiary i jak dodać [2026]

Favicon to mała ikona strony widoczna w karcie przeglądarki, na liście zakładek i w wynikach wyszukiwania na telefonie. To miniaturowy znak rozpoznawczy witryny, zwykle logo albo jego uproszczona wersja. Dodaję favikony do każdej strony, którą prowadzę, bo to drobiazg, który robi różnicę w rozpoznawalności, a zajmuje dosłownie chwilę. Poniżej tłumaczę, czym favicon jest, gdzie się wyświetla, jakie ma wymiary i formaty, jak go stworzyć oraz jak dodać w WordPress i w czystym HTML.

Czym jest favicon i po co go mieć?

Nazwa pochodzi od angielskiego favorite icon. Gdy otwierasz kilkanaście kart naraz, to właśnie po favikonie rozpoznajesz, która należy do danej witryny. Dobra ikona porządkuje karty, buduje wizerunek i sprawia, że strona wygląda profesjonalnie. Brak favikona od razu rzuca się w oczy, bo przeglądarka pokazuje wtedy pustą, domyślną kartkę.

Gdzie wyświetla się favicon?

Choć to maleńki plik, pokazuje się w zaskakująco wielu miejscach naraz. Warto je znać, bo to one tłumaczą, dlaczego ikona w ogóle ma znaczenie:

Najważniejszy z perspektywy promocji jest ostatnio widok w wynikach Google na telefonie. To tam favicon konkuruje o uwagę z dziesiątkami innych wyników i potrafi delikatnie podbić klikalność.

Jakie są wymiary favicona?

To pytanie pada najczęściej, więc rozkładam je na czynniki. Nie ma jednego rozmiaru, jest zestaw dopasowany do urządzeń:

W praktyce przygotowuję jeden duży kwadrat, zwykle 512×512, i z niego generuję resztę. Dzięki temu ikona jest spójna wszędzie, od karty przeglądarki po ekran domowy telefonu.

W jakim formacie zapisać favicon?

Najbezpieczniejszy zestaw to dziś trzy formaty. ICO z osadzonymi rozmiarami 16 i 32 piksele daje najszerszą zgodność, PNG sprawdza się dla konkretnych wymiarów jako grafika rastrowa, a SVG skaluje się idealnie w nowoczesnych przeglądarkach. Połączenie SVG plus ICO i PNG jako zapas pokrywa praktycznie wszystkie przypadki.

Jak stworzyć favicon krok po kroku?

Zanim dodasz ikonę, musisz ją mieć, a tu liczy się prostota. Favicon ogląda się czasem w rozmiarze 16 pikseli, więc nie zmieści się w nim szczegółowe logo z tekstem. Trzymam się kilku zasad:

• zaprojektuj prosty znak, najlepiej oparty na logo, czytelny nawet jako maleńka ikona,
• postaw na kontrast, bo blada ikona ginie na jasnym tle karty,
• zapisz kwadrat co najmniej 512×512 pikseli jako materiał wyjściowy,
• użyj generatora favicon, na przykład RealFaviconGenerator albo favicon.io, który zwróci gotowy zestaw plików.

Z mojego doświadczenia najczęstszy błąd to wrzucenie pełnego logo z drobnym napisem. W karcie zamienia się ono w nieczytelną plamę, dlatego prawie zawsze upraszczam znak do jednego symbolu albo inicjału.

Jak dodać favicon w WordPress?

Najprościej z panelu, bez dotykania kodu:

1. wejdź w Wygląd, potem Personalizuj,
2. otwórz sekcję Tożsamość witryny,
3. w polu Ikona witryny wgraj kwadratowy plik o boku co najmniej 512 pikseli,
4. zapisz i sprawdź podgląd, WordPress sam przygotuje mniejsze wersje.

Jak dodać favicon w czystym HTML?

Jeśli motyw nie ma opcji ikony albo prowadzisz zwykłą stronę w HTML, favicon dodasz ręcznie. Wystarczy wgrać pliki na serwer i wskazać je w sekcji head:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Taki zestaw znaczników obsługuje od razu klasyczny favicon, wersję SVG, ikonę dla iPhone oraz manifest aplikacji. To bezpieczny standard, który działa niezależnie od systemu, na którym stoi strona.

Dlaczego favicon się nie wyświetla?

Najczęstszy powód to pamięć podręczna. Lista rzeczy do sprawdzenia:

• odśwież stronę twardo lub otwórz ją w trybie incognito,
• upewnij się, że plik jest kwadratowy i ma poprawny rozmiar,
• sprawdź, czy ścieżka do pliku jest prawidłowa,
• daj przeglądarce chwilę, bo aktualizacja ikony bywa opóźniona.

Jak favicon wpływa na markę i SEO?

Favicon nie podnosi pozycji wprost, ale Google pokazuje go przy wynikach na telefonach, więc realnie wpływa na rozpoznawalność i klikalność. Z mojego doświadczenia to jeden z najtańszych elementów budowania marki: kilka minut pracy, a strona od razu wygląda na dopiętą. Warto, żeby ikona była czytelna nawet w 16 pikselach, dlatego pełne logo z drobnym tekstem prawie zawsze trzeba uprościć.

FAQ

Co to jest favicon?

Favicon to mała ikona strony, którą widać w karcie przeglądarki, na liście zakładek i w wynikach wyszukiwania na telefonie. To miniaturowy znak rozpoznawczy witryny, najczęściej logo lub jego uproszczona wersja. Nazwa pochodzi od favorite icon.

Jakie są wymiary favicona?

Podstawą są kwadraty 16×16 i 32×32 piksele, do tego 48×48 jako zapas, 180×180 dla ikony na iPhone, oraz 192×192 i 512×512 dla Androida i aplikacji PWA. Najwygodniej przygotować jeden duży kwadrat, na przykład 512×512, i wygenerować z niego pozostałe rozmiary.

Gdzie wyświetla się favicon?

W kilku miejscach naraz: w karcie przeglądarki obok tytułu, na pasku zakładek i liście ulubionych, w historii przeglądania, a na telefonie również w wynikach wyszukiwania Google obok adresu. Pojawia się też jako ikona skrótu, gdy ktoś doda stronę do ekranu domowego.

Jak stworzyć favicon?

Zaprojektuj prosty, czytelny znak, najlepiej oparty na logo, jako kwadratowy obraz co najmniej 512×512 pikseli. Następnie wgraj go do generatora favicon, na przykład RealFaviconGenerator lub favicon.io, który zwróci gotowy zestaw plików ICO, PNG i SVG w odpowiednich rozmiarach.

Jak dodać favicon w WordPress?

Wejdź w Wygląd, potem Personalizuj i Tożsamość witryny, a następnie wgraj plik w polu Ikona witryny. WordPress prosi o obraz kwadratowy o boku co najmniej 512 pikseli i sam przygotuje mniejsze wersje. Bez tej opcji favicon dodasz ręcznie w sekcji head znacznikiem link rel icon.

Czy favicon ma znaczenie dla SEO?

Bezpośrednio nie podnosi pozycji, ale Google pokazuje favicon przy wynikach na urządzeniach mobilnych, więc wpływa na rozpoznawalność i klikalność. To także element spójnego wizerunku marki, dlatego warto go mieć i dopasować do logo.

Rafał Bajgier

Od 8 lat nieustannie związany z marketingiem internetowym. Zajmuje się kompleksową obsługą przedsiębiorstw w zakresie SEO oraz AI. W wolnym czasie poszerzam swoją wiedzę z zakresu marketingu internetowego.