Sprawdź favicon strony online

Jak sprawdzić favicon strony online i odczytać wynik

Aby sprawdzić favicon, wpisz w formularzu powyżej adres strony głównej (np. example.com), a nie podstrony: wyszukiwarki pobierają ikonę właśnie ze strony głównej. Narzędzie pobiera HTML, znajduje wszystkie tagi <link>, których rel zawiera słowo icon (icon, shortcut icon, apple-touch-icon, apple-touch-icon-precomposed), odczytuje ikony z pliku web manifest, a jeśli w kodzie nie zadeklarowano pliku .ico, osobno sprawdza, czy /favicon.ico w katalogu głównym zwraca kod 200.

Każda znaleziona ikona to osobna karta. Jak ją czytać:

• Niebieska etykieta — wartość rel. manifest icon oznacza ikonę z pliku manifestu; shortcut icon z adresem /favicon.ico bez tagu w HTML — że plik znaleziono tylko pod domyślną ścieżką.
• Szara etykieta — atrybut sizes w postaci zadeklarowanej w kodzie. To rozmiar deklarowany, nie zmierzony: jeśli w tagu jest 32x32, a plik ma faktycznie 16×16, przeglądarka i Google zobaczą 16×16. Otwórz plik przyciskiem „Pobierz” i sprawdź rzeczywiste piksele.
• Typ pod etykietami — atrybut type (image/png, image/svg+xml, image/x-icon).
• Znak „?” zamiast obrazka — przeglądarka nie wczytała pliku spod podanego adresu: 404, przekierowanie na stronę HTML, błędna ścieżka albo blokada hotlinkowania. Sprawdź ten URL w teście kodu odpowiedzi HTTP.

Jeśli narzędzie zgłasza brak favicony, w HTML nie ma żadnego tagu z ikoną, a /favicon.ico nie zwraca kodu 200. Częsta przyczyna: ikonę dodaje JavaScript po załadowaniu strony — takiego tagu nie widzi ani nasz tester favicon, ani część robotów. Ikona musi być w źródłowym HTML.

Dlaczego Google nie wyświetla favicony w wynikach wyszukiwania

Jeśli obok Twojego wyniku zamiast ikony widać szarą kulę ziemską, porównaj konfigurację z wytycznymi Google dotyczącymi favicon. Najważniejsze punkty:

1. Tag na stronie głównej. Strona główna hosta musi mieć <link rel="icon"> (albo shortcut icon, apple-touch-icon). Google pokazuje jedną ikonę na host: sklep.example.com może mieć własną, katalog example.com/blog/ — nie.
2. Kwadrat o boku będącym wielokrotnością 48 px. 48×48, 96×96, 144×144, 192×192. Ikona 16×16 lub 32×32 wystarczy na kartę przeglądarki, ale nie do wyników Google. SVG nie ma ograniczeń rozmiaru.
3. Plik dostępny dla robotów. Googlebot-Image musi mieć dostęp do pliku ikony, a Googlebot — do strony głównej. Reguły typu Disallow: /*.ico lub zablokowany katalog z ikoną (/wp-content/uploads/, /assets/) psują wyświetlanie. Sprawdź plik w analizatorze robots.txt.
4. Stały adres URL. Nie zmieniaj adresu ikony przy każdym wdrożeniu (hash w nazwie pliku) — Google za nim nie nadąża.
5. Ikona reprezentuje markę i nie zawiera nieodpowiednich treści — w przeciwnym razie Google zastąpi ją domyślną.

Ile trzeba czekać i jak przyspieszyć

Favicon nie odświeża się przy każdym skanowaniu — zwykle trwa to od kilku dni do kilku tygodni. Aby przyspieszyć: popraw tagi, upewnij się, że ikona zwraca 200 i nie jest zablokowana w robots.txt, a potem w Search Console użyj „Sprawdzenia adresu URL” dla strony głównej i kliknij „Poproś o zindeksowanie”. Ponawianie prośby nic nie daje. Wygląd wyniku możesz podejrzeć w podglądzie wyniku wyszukiwania.

Kompletny zestaw tagów favicon w 2026 roku

Dwadzieścia wariantów ikony nie jest już potrzebnych. Wystarczy taki zestaw w <head> strony głównej (i wszystkich szablonów):

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">

Plik site.webmanifest:

{
  "name": "Example",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#0f172a",
  "background_color": "#ffffff",
  "display": "standalone"
}

ICO obsługuje starsze przeglądarki i programy, które pobierają /favicon.ico bezpośrednio. SVG jest ostry na każdym ekranie (wewnątrz pliku można dodać @media (prefers-color-scheme: dark) dla trybu ciemnego). PNG 96×96 spełnia wymóg Google dotyczący wielokrotności 48. Apple Touch Icon 180×180 bez przezroczystości to ikona na ekranie głównym iPhone’a. Manifest z ikonami 192 i 512 wykorzystują Android i aplikacje PWA. Jeśli ikony z manifestu nie pojawiły się w wyniku testu, sprawdź, czy manifest to poprawny JSON i czy w tagu <link> atrybut rel="manifest" stoi przed href.

Rozmiary favicon — tabela

Jak dodać favicon w WordPressie, Shopify i Shoperze

WordPress

Użyj wbudowanej „Ikony witryny” (Site Icon): „Wygląd → Dostosuj → Tożsamość witryny”, a w motywach blokowych „Ustawienia → Ogólne”. Wgraj kwadratowy PNG o boku co najmniej 512 px — WordPress sam wygeneruje wersje 32×32, 180×180, 192×192 i 270×270 i doda tagi do <head>. Nie dubluj ikony wtyczką SEO ani wpisem w header.php: dwa zestawy tagów z różnymi plikami to częsta przyczyna „nie tej” ikony.

Shopify

„Sklep online → Motywy → Dostosuj → Ustawienia motywu → Logo/Favicon”. Wiele motywów wyświetla ikonę pomniejszoną do 32×32, co jest za mało dla Google — dodaj w theme.liquid dodatkowy tag z PNG 96×96 lub 192×192.

Shoper, Wix i inne kreatory

Szukaj pola „Favicon” lub „Ikona strony” w ustawieniach sklepu lub witryny. Wgraj duży kwadratowy obraz, opublikuj zmiany i sprawdź stronę główną tutaj — ikona musi pojawić się w wynikach, a jej adres musi się otwierać.

Własny serwis

Umieść favicon.ico i pliki PNG w katalogu głównym, a tagi z przykładu — we wspólnym szablonie nagłówka. W nginx warto wyciszyć logi i ustawić cache:

location = /favicon.ico {
    access_log off;
    log_not_found off;
    expires 7d;
}

Dlaczego przeglądarka pokazuje starą faviconę

Przeglądarki przechowują favicony w osobnej pamięci podręcznej, więc zwykłe twarde odświeżenie (Ctrl+F5) często nie pomaga. Co działa:

• Otwórz plik ikony bezpośrednio (example.com/favicon.ico) i odśwież go — nadpiszesz cache tego konkretnego pliku.
• Dodaj wersję do adresu: /favicon.ico?v=2 albo zmień nazwę pliku. Rób to tylko przy zmianie projektu, nie przy każdym wdrożeniu.
• Sprawdź wynik w oknie prywatnym albo tutaj: narzędzie pobiera stronę z serwera i nie zależy od cache Twojej przeglądarki.
• Jeśli stary plik serwuje CDN, wyczyść cache CDN dla pliku ikony.

Cache Google to osobna sprawa: nowa ikona pojawi się w wynikach po ponownym zindeksowaniu strony głównej, niezależnie od tego, co widzisz lokalnie. Obraz pobierany przez media społecznościowe i komunikatory przy udostępnianiu linku to og:image, a nie favicon — sprawdzisz go w debuggerze Open Graph. Więcej o działaniu narzędzia znajdziesz w dokumentacji.