Sprawdzanie Favicon

Streszczenie (TL;DR)

Weryfikacja ma znaczenie: Uszkodzony favicon to nie tylko brakująca ikona; powoduje błędy 404 w logach serwera i psuje wizerunek marki.
Kompleksowa analiza: To narzędzie skanuje Twoją witrynę jak przeglądarka, aby zweryfikować favicon.ico, ikony PNG, Apple Touch Icons i Web Manifests.
Praktyczne informacje: Uzyskaj konkretne raporty o dostępności plików, niezgodności wymiarów i poprawności formatu.

Dlaczego weryfikować favicony?

Wdrożenie favicona wydaje się proste, ale w praktyce jest podatne na ukryte błędy. Nowoczesne ekosystemy (Desktop, Android, iOS) mają różne wymagania.

Pamięć podręczna przeglądarki: Lokalne przeglądarki agresywnie buforują ikony, często ukrywając problemy.
Pofragmentowane standardy: Potrzebujesz więcej niż favicon.ico. Urządzenia Apple szukają apple-touch-icon. Android szuka site.webmanifest.
Konfiguracja serwera: Poprawne ścieżki w HTML są bezużyteczne, jeśli serwer zwraca błąd 403 lub niewłaściwy typ MIME.

Co jest sprawdzane

Nasz analizator przeprowadza wieloetapowy audyt:

Analiza HTML: Skanujemy <head> w poszukiwaniu wszystkich zadeklarowanych linków do ikon.
Walidacja Manifestu: Sprawdzamy, czy wymiary zadeklarowane w Web Manifest zgadzają się z rzeczywistymi plikami.
Dostępność: Próbujemy pobrać każdą ikonę, aby potwierdzić, że zwraca status 200 OK.
Format i Wymiary: Sprawdzamy dane binarne, aby upewnić się, że plik jest prawidłowym obrazem.
Niejawne wykrywanie: Sprawdzamy standardowe ścieżki, takie jak /favicon.ico.

Częste błędy wdrożenia

1. Ikona “Widmo”

Masz tag <link>, ale plik zwraca 404. Naprawa: Sprawdź ścieżkę pliku względem katalogu głównego domeny.

2. Niezgodność formatu

Deklarujesz type="image/png", ale serwujesz JPEG lub ICO. Naprawa: Upewnij się, że nagłówek Content-Type serwera pasuje do formatu.

3. Kłamstwo o wymiarach

HTML mówi sizes="32x32", ale rzeczywisty obraz to 16x16. Naprawa: Użyj Generatora Favicon, aby uzyskać dokładne rozmiary.

4. Brak Apple Touch Icon

Bez apple-touch-icon użytkownicy iOS zobaczą ogólny zrzut ekranu po dodaniu do ekranu głównego. Naprawa: Zawsze dołączaj PNG 180x180 dla Apple.

Najlepsze praktyki

Fallback w Root: Zawsze miej favicon.ico w katalogu głównym (/favicon.ico).
SVG dla nowoczesnych: Używaj favicon SVG dla niezależności od rozdzielczości.
Manifest: Zdefiniuj osobne ikony w manifest.json.
Cache Busting: Używaj ciągów zapytań (np. ?v=2) przy aktualizacji.

Narzędzia Favicon