Favicon (skrót od „favorite icon”) to mała ikonka, którą widzisz na karcie przeglądarki obok tytułu strony, w zakładkach, w historii przeglądania, na ekranie głównym telefonu (jeśli dodasz stronę jako skrót) i — co najważniejsze dla SEO — w wynikach wyszukiwania Google (mobile SERP od 2019, desktop SERP od 2023).
Brak favicona to jak wizytówka bez logo — strona wygląda nieprofesjonalnie i traci rozpoznawalność w gąszczu kart przeglądarki. W tym poradniku pokazuję jak stworzyć favicon, jakie rozmiary i formaty są potrzebne, i jak dodać go do strony — w WordPress i czystym HTML.
Gdzie widać favicon
- Karty przeglądarki — mała ikonka obok tytułu strony na każdej karcie. Przy 20 otwartych kartach tylko favicon pozwala odróżnić jedną od drugiej.
- Zakładki / Ulubione — favicon jest wyświetlany obok nazwy strony na liście zakładek.
- Historia przeglądania — ułatwia znalezienie strony w długiej liście.
- Wyniki Google (SERP) — Google wyświetla favicon obok nazwy strony w wynikach wyszukiwania (mobile i desktop). Brak favicona = Google pokazuje generyczną ikonkę kuli ziemskiej.
- Ekran główny telefonu — jeśli użytkownik doda stronę jako skrót (PWA / „Add to Home Screen”), favicon jest ikoną aplikacji.
- Pasek adresu — niektóre przeglądarki pokazują favicon obok URL.
Jakie rozmiary i formaty favicona potrzebujesz
W idealnym świecie dostarczasz favicon w kilku rozmiarach, żeby każdy kontekst miał optymalną ikonę:
| Rozmiar | Format | Zastosowanie |
|---|---|---|
| 16×16 px | ICO lub PNG | Karta przeglądarki (klasyczny) |
| 32×32 px | ICO lub PNG | Karta przeglądarki (Retina/HiDPI) |
| 48×48 px | ICO | Ikona Windows (pinboard) |
| 180×180 px | PNG | Apple Touch Icon (iPhone/iPad) |
| 192×192 px | PNG | Android Chrome (manifest.json) |
| 512×512 px | PNG | PWA splash screen, Google SERP |
| Wektorowy | SVG | Nowoczesne przeglądarki (skalowalne) |
Minimum, które musisz mieć
Jeżeli nie chcesz komplikować: jedno PNG 512×512 px + generator (opisany niżej) zrobi resztę automatycznie. Ale najczęstszy minimalny zestaw to:
- favicon.ico (multi-resolution: 16×16 + 32×32 + 48×48 w jednym pliku ICO) — dla kompatybilności ze starszymi przeglądarkami.
- apple-touch-icon.png (180×180 px) — dla iPhone/iPad.
- favicon-32×32.png + favicon-16×16.png — dla nowoczesnych przeglądarek.
Jak stworzyć favicon — 3 metody
Metoda 1. realfavicongenerator.net (rekomendacja)
RealFaviconGenerator to najlepsze darmowe narzędzie do generowania favicona — obsługuje wszystkie platformy i generuje kompletny zestaw plików + kod HTML do wklejenia:
- Wejdź na realfavicongenerator.net.
- Kliknij „Select your Favicon image” — wgraj logo lub ikonę (min. 260×260 px, najlepiej 512×512 px PNG).
- Skonfiguruj wygląd per platforma (iOS, Android, Windows, Safari, ogólne). Możesz dostosować marginesy, tło, kształt.
- Kliknij „Generate your Favicons and HTML code”.
- Pobierz paczkę ZIP z wszystkimi plikami favicona.
- Skopiuj wygenerowany kod HTML do
<head>strony.
Generator tworzy: favicon.ico, apple-touch-icon.png, favicon-32×32.png, favicon-16×16.png, android-chrome-192×192.png, android-chrome-512×512.png, site.webmanifest, browserconfig.xml, safari-pinned-tab.svg — kompletny zestaw.
Metoda 2. Canva / Figma (stwórz od zera)
Jeżeli nie masz gotowego logo i potrzebujesz zaprojektować favicon od zera:
- Canva (canva.com) → Utwórz projekt → Niestandardowy rozmiar: 512×512 px → zaprojektuj ikonę (litera, symbol, uproszczone logo) → pobierz jako PNG.
- Figma (figma.com) → Nowy frame 512×512 → zaprojektuj → Export as PNG.
Następnie wgraj PNG do realfavicongenerator.net, żeby wygenerować wszystkie rozmiary.
Metoda 3. Konwersja logo na favicon
Jeżeli masz logo firmy — uprość je do wersji, która jest czytelna w 16×16 px. Pełne logo z nazwą firmy będzie nieczytelne w tak małym rozmiarze. Zwykle favicon to: pierwsza litera nazwy (np. „G” dla Google, „F” dla Facebook) lub uproszczony symbol z logo (np. ptaszek Twittera bez napisu).
Jak dodać favicon w WordPress
Metoda 1. Customizer (najprostsze, zero kodu)
- W wp-admin przejdź do Wygląd → Dostosuj (Customize).
- Kliknij „Tożsamość witryny” (Site Identity).
- Sekcja „Ikona witryny” (Site Icon) → kliknij „Wybierz ikonę witryny”.
- Wgraj obrazek min. 512×512 px (WordPress sam wygeneruje wszystkie rozmiary).
- Kliknij „Opublikuj”.
Gotowe. WordPress automatycznie generuje favicon.ico, apple-touch-icon i wszystkie warianty. To najłatwiejsza metoda — zero kodowania, zero FTP, zero plików do wgrywania ręcznie.
Metoda 2. Ręcznie (pełna kontrola)
Jeżeli chcesz mieć pełną kontrolę (np. osobne ikony per platforma, niestandardowe kolory tła, SVG):
- Wygeneruj paczka favicona przez realfavicongenerator.net.
- Wgraj pliki do katalogu głównego strony (obok
wp-config.php) przez FTP/FileZilla. - Wklej wygenerowany kod HTML do
<head>strony — w WordPress: przez child themeheader.phplub wtyczkę „Insert Headers and Footers”.
Jak dodać favicon w czystym HTML
W sekcji <head> strony HTML dodaj:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Plus: umieść plik favicon.ico w katalogu głównym strony (root). Przeglądarki automatycznie szukają /favicon.ico — nawet bez tagu <link>.
Favicon a SEO — czy Google go indeksuje?
Tak — Google wyświetla favicon w wynikach wyszukiwania (SERP) od 2019 (mobile) i 2023 (desktop). Wymagania Google:
- Favicon musi być dostępny pod adresem, który Googlebot może crawlować (nie zablokowany w robots.txt).
- Minimum 48×48 px (Google przeskaluje na 16×16 w SERP). Zalecane: 512×512 px.
- Format: ICO, PNG, SVG, GIF (bez animacji), BMP.
- Favicon powinien wizualnie reprezentować markę — Google odrzuca favicony, które są generyczne, obraźliwe lub wprowadzające w błąd.
- Jeden favicon na domenę (Google używa tego samego dla wszystkich podstron).
Brak favicona = Google wyświetla generyczną ikonkę (szara kula ziemska). To zmniejsza CTR — strony z rozpoznawalnym favicon wyglądają bardziej profesjonalnie i przyciągają więcej kliknięć.
Najczęstsze problemy
Favicon się nie wyświetla po dodaniu
- Cache przeglądarki — wyczyść cache i twarde odświeżenie (Ctrl+F5). Favicon jest agresywnie cache’owany — zmiana może nie być widoczna przez godziny.
- Zły ścieżka — sprawdź, czy plik jest w katalogu głównym i czy URL w tagu
<link>jest poprawny. - Zły format — niektóre starsze przeglądarki obsługują tylko .ico. Używaj multi-format (ICO + PNG).
Favicon wygląda rozmyto
Źródłowy obraz był za mały. Favicon powinien być stworzony z obrazu min. 512×512 px. Jeżeli wgrałeś 32×32 px i WordPress go nie powiększył — ikona na Retina/HiDPI będzie rozmyta.
Google pokazuje stary favicon w SERP
Google cache’uje favicona i aktualizuje go powoli (dni–tygodnie). Po zmianie: poczekaj. Możesz przyspieszyć, wymuszając recrawl w Google Search Console → Inspekcja URL → Poproś o indeksowanie na stronie głównej.
Najczęściej zadawane pytania
Czy favicon wpływa na ranking w Google?
Bezpośrednio: nie — Google nie używa favicona jako sygnału rankingowego. Pośrednio: tak — profesjonalny favicon zwiększa CTR w SERP (więcej kliknięć) i buduje rozpoznawalność marki. A wyższy CTR pośrednio wpływa na ranking.
Jak zmienić favicon w WordPress?
Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny → „Zmień ikonę” → wgraj nową → Opublikuj. Stary favicon zostanie zastąpiony. Cache’owanie: użytkownicy mogą widzieć stary favicon przez kilka godzin (cache przeglądarki).
Jaki format favicona jest najlepszy?
PNG 512×512 px jako źródło (wgrywasz do WordPress lub generatora). ICO dla kompatybilności. SVG dla nowoczesnych przeglądarek (skalowalne, ostre na każdej rozdzielczości). W praktyce: PNG + ICO pokrywają 99% przypadków.
Czy mogę użyć animowanego GIF jako favicona?
Technicznie: niektóre przeglądarki (Firefox) obsługują animowane favicony. Praktycznie: nie rób tego — animowany favicon jest rozpraszający, wygląda nieprofesjonalnie i Google go nie zaakceptuje (wymaga statycznego obrazka).
Podsumowanie
Favicon to mały detal z dużym wpływem na profesjonalny wygląd strony. Minimum: wgraj PNG 512×512 px w WordPress → Customizer → Tożsamość witryny → Ikona witryny. Zajmuje 2 minuty, a efekt widzisz na kartach przeglądarki, w zakładkach i — najważniejsze — w wynikach Google. Bez favicona Twoja strona wygląda jak wizytówka bez logo — technicznie działa, ale traci na wiarygodności.
