Sprawdzanie Favicon

Twórz i sprawdzaj favicony dla swojej strony w sekundy.

Sprawdzanie Favicon

Analizuj implementację favicon swojej strony i uzyskaj rekomendacje.

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:

  1. Analiza HTML: Skanujemy <head> w poszukiwaniu wszystkich zadeklarowanych linków do ikon.
  2. Walidacja Manifestu: Sprawdzamy, czy wymiary zadeklarowane w Web Manifest zgadzają się z rzeczywistymi plikami.
  3. Dostępność: Próbujemy pobrać każdą ikonę, aby potwierdzić, że zwraca status 200 OK.
  4. Format i Wymiary: Sprawdzamy dane binarne, aby upewnić się, że plik jest prawidłowym obrazem.
  5. 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

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

FAQ

Dlaczego narzędzie mówi “Brak”, skoro ja to widzę?

Twoja przeglądarka prawdopodobnie zapisała starą wersję w pamięci podręcznej.

Czy naprawdę potrzebuję tych wszystkich plików?

favicon.ico to minimum. Ale dla profesjonalnego wyglądu pełny zestaw jest standardem.

Czy mogę używać CDN?

Tak. Upewnij się tylko, że tagi <link> wskazują na bezwzględny URL w CDN.

Frequently Asked Questions

How do I check if my favicon is set up correctly?
Enter your website URL and Favico fetches the page's HTML head, lists every declared icon — favicon.ico, apple-touch-icon, and web manifest icons — and flags anything that is missing or misconfigured.
Why is my favicon not showing up?
The usual causes are having only a favicon.ico with no apple-touch-icon or web manifest, an incorrect file path, aggressive browser caching, or a missing 32×32 PNG. The checker pinpoints which one applies to your site.
Do I need more than a favicon.ico?
Yes. Modern setups also need an apple-touch-icon.png for iOS and a site.webmanifest referencing 192×192 and 512×512 PNGs for Android and PWAs, in addition to favicon.ico.
Is the favicon checker free?
Yes, it is free to use and requires no sign-up.
enesvizharptrujadefrkoittrplnlidthhi