Favicon Tools

Erstellen und überprüfen Sie Favicons für Ihre Website in Sekunden.

Favicon Checker

Analysieren Sie die Favicon-Implementierung Ihrer Website und erhalten Sie Empfehlungen.

Zusammenfassung (TL;DR)

  • Validierung ist wichtig: Ein defektes Favicon verursacht 404-Fehler in Server-Logs und schadet dem Markenimage.
  • Umfassende Analyse: Dieses Tool crawlt Ihre Seite wie ein Browser, um favicon.ico, PNG-Icons, Apple Touch Icons und Web Manifests zu überprüfen.
  • Handlungsrelevantes Feedback: Erhalten Sie spezifische Berichte über Dateierreichbarkeit, Größenabweichungen und Formatvalidität.

Warum Favicons validieren?

Ein Favicon bereitzustellen scheint einfach, ist aber in der Praxis fehleranfällig. Moderne Browser-Ökosysteme (Desktop, Android, iOS) haben alle unterschiedliche Anforderungen.

  • Browser-Caching: Lokale Browser cachen Favicons aggressiv und verbergen oft Probleme, die neue Besucher sehen.
  • Fragmentierte Standards: Sie brauchen mehr als nur favicon.ico. Apple-Geräte suchen nach apple-touch-icon. Android und PWAs suchen nach einem site.webmanifest.
  • Server-Konfiguration: Korrekte Dateipfade im HTML bringen nichts, wenn Ihr Server 403 Forbidden oder den falschen MIME-Typ zurückgibt.

Durchgeführte Prüfungen

Unser Analyser führt ein mehrstufiges Audit durch:

  1. HTML-Parsing: Wir scannen den <head> nach allen deklarierten Icon-Links.
  2. Manifest-Validierung: Wir prüfen, ob deklarierte Größen im Web Manifest mit den tatsächlichen Dateigrößen übereinstimmen.
  3. Erreichbarkeit: Wir versuchen, jedes referenzierte Icon herunterzuladen (Status 200 OK).
  4. Format & Größe: Wir prüfen die Binärdaten, um sicherzustellen, dass es sich um gültige Bilder handelt und die Dimensionen stimmen.
  5. Implizite Erkennung: Wir prüfen Standardpfade wie /favicon.ico, auch wenn sie nicht explizit verlinkt sind.

Häufige Bereitstellungsfehler

1. Das “Geister”-Icon

Ein <link>-Tag existiert, aber die Datei liefert einen 404-Fehler. Lösung: Überprüfen Sie den Dateipfad relativ zu Ihrer Domain-Root.

2. Format-Konflikt

Sie deklarieren type="image/png", liefern aber ein JPEG oder ICO. Lösung: Stellen Sie sicher, dass der Content-Type-Header des Servers korrekt ist.

3. Falsche Größenangaben

HTML sagt sizes="32x32", das Bild ist aber 16x16. Das führt zu unscharfen Icons. Lösung: Nutzen Sie den Favicon Generator für exakte Größen.

4. Fehlendes Apple Touch Icon

Ohne apple-touch-icon sehen iOS-Nutzer beim Hinzufügen zum Home-Bildschirm nur einen Screenshot der Seite. Lösung: Fügen Sie immer ein 180x180 PNG für Apple hinzu.

Best Practices

  1. Root-Fallback: Immer ein favicon.ico im Root (/favicon.ico) haben.
  2. SVG für Modernes: Nutzen Sie SVG-Favicons für Auflösungsunabhängigkeit.
  3. Manifest: Definieren Sie separate Icons in manifest.json.
  4. Cache Busting: Nutzen Sie Query-Strings (z.B. ?v=2) bei Updates.

FAQ

Warum sagt der Checker “Fehlt”, obwohl ich es sehe?

Ihr Browser hat wahrscheinlich eine alte Version gecacht. Der Checker sieht, was ein neuer Besucher sieht.

Brauche ich wirklich alle diese Dateien?

favicon.ico ist das Minimum. Für einen professionellen Auftritt ist das komplette Set (ICO + PNG + Manifest) jedoch Standard.

Kann ich ein CDN nutzen?

Ja. Stellen Sie sicher, dass die <link>-Tags auf die absoluten URLs im CDN zeigen.

enesvizharptrujadefrkoittrplnlidthhi