Favicon-Checker

Ein Favicon ist das kleine Symbol, das ein Browser neben deinem Seitentitel in Tabs, Lesezeichen, Verlaufslisten und Startbildschirm-Verknüpfungen anzeigt. Der Name ist die Kurzform von „favorite icon" und wurde von Microsoft 1999 geprägt, als IE 5 /favicon.ico im Root einführte. Heute ist das Favicon sechs Dateien, nicht eine. Desktop-Browser verwenden ein 32x32-PNG oder SVG. iOS verwendet ein 180x180-PNG über apple-touch-icon. Android zieht 192x192- und 512x512-PNGs aus manifest.json. Safari-Pins verwenden ein monochromes SVG über mask-icon. Das Legacy /favicon.ico ist der Fallback, wenn nichts anderes deklariert ist. Ein vollständiges Setup gibt jedem Gerät die richtige Größe und das richtige Format, hält deine Marke in jeder Skalierung scharf und vermeidet den generischen Globus-Platzhalter, den mobile Plattformen rendern, wenn Symbole fehlen oder falsch dimensioniert sind.

Ein Favicon-Checker ruft das HTML einer beliebigen URL auf, analysiert jeden Favicon-Familie-Link-Tag und zeigt, welche Symbole deklariert sind, deren Größen, Formate und ob die URLs aufgelöst werden. Er durchsucht den Head nach <link rel="icon">, <link rel="shortcut icon">, <link rel="apple-touch-icon">, <link rel="mask-icon"> und <link rel="manifest"> und überprüft dann /favicon.ico im Domain-Root als Fallback. Er gruppiert Ergebnisse nach Geräteziel, sodass du sehen kannst, was Desktop Chrome, iOS Safari, Android Chrome und Safari-Pins jeweils rendern. Führe diesen Favicon-Test vor jedem Deployment durch, um fehlende Varianten, unterbrochene URLs und falsche Größen in unter drei Sekunden zu erkennen. Die Ausgabe markiert auch, ob die manifest.json selbst 200 zurückgibt und ob das Icons-Array darin auf reale Dateien verweist, wo sich die meisten Android-spezifischen Fehler verstecken.

Der moderne Satz ist 16x16, 32x32, 180x180, 192x192 und 512x512. Die 16x16- und 32x32-PNGs handhaben Desktop-Browser-Tabs und die Adressleiste. Browser wählen die nächstgelegene Übereinstimmung zur gerenderten Größe, daher verhindert das Versenden beider eine Hochskalierung. Das 180x180-PNG ist das apple-touch-icon, das von iOS für Startbildschirm-Kacheln verwendet wird. Kleinere Größen werden hochskaliert und sehen auf Retina-Displays verschwommen aus. Die 192x192- und 512x512-PNGs sitzen in manifest.json für Android-Startbildschirme und PWA-Splash-Screens. Ältere Guides empfehlen zehn oder mehr Größen (57x57, 72x72, 114x114, 144x144). Moderne Browser ignorieren die meisten davon. Fünf Dateien decken jedes reale Gerät ab, und der Favicon-Validator markiert jede Größe, die nicht der Spezifikation entspricht, sodass du den Legacy-Ballast verwerfen kannst.

Verwende alle drei für vollständige Abdeckung. ICO ist das Legacy-Format und wird für /favicon.ico im Root benötigt, da einige ältere Browser und Crawler nur dort nachschauen. Eine 16x16 plus 32x32 Multi-Resolution-ICO-Datei ist der sicherste Fallback. PNG ist das moderne Desktop- und Mobile-Format. Verwende es für <link rel="icon" sizes="32x32">, apple-touch-icon und die Manifest-Symbole. PNG verarbeitet Transparenz sauber und rendert scharf bei der deklarierten Größe. SVG ist die Zukunft. Verwende es für <link rel="icon" type="image/svg+xml"> und Safaris mask-icon. SVG skaliert auf jeden DPI, ohne verschwommen zu werden, wiegt 1-3 KB und unterstützt Dark-Mode-Varianten über Media Queries. Etwa 92% der heute verwendeten Browser unterstützen SVG-Favicons, die restlichen 8% greilen stillschweigend auf dein deklariertes PNG zurück.

Wenn iOS-Nutzer „Zum Startbildschirm hinzufügen" aus Safari antippen, zieht das Betriebssystem das apple-touch-icon, um die Startbildschirm-Kachel zu rendern. Wenn du eines nicht deklarierst, nimmt iOS einen Screenshot der Seite und verwendet diesen, was verschwommen und ungebrandet aussieht. Die erwartete Größe ist 180x180 PNG mit Hintergrund, deklariert als <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Etwa 25% des mobilen Verkehrs weltweit stammt aus iOS, und ein fehlendes apple-touch-icon bedeutet, dass jeder dieser Nutzer, der deine Website speichert, einen Platzhalter statt deines Logos sieht. Der apple-touch-icon-Checker-Teil dieses Tools markiert, ob die Datei deklariert ist, die Größe 180x180 entspricht, die URL 200 zurückgibt und der Hintergrund einfarbig ist statt transparent.

manifest.json ist das Web App Manifest, eine kleine JSON-Datei, die Android (und Chrome Desktop) mitteilt, wie sich deine Website verhält, wenn sie als Progressive Web App installiert wird. Es deklariert den App-Namen, die Theme-Farbe, die Hintergrundfarbe, den Display-Modus und am wichtigsten das Icons-Array. Android zieht 192x192- und 512x512-PNGs aus dem Manifest, um die Startbildschirm-Kachel, den Splash-Screen und den App-Drawer-Eintrag zu rendern. Ohne ein Manifest, das über <link rel="manifest" href="/manifest.json"> verlinkt ist, greift Android auf einen Screenshot deiner Seite oder ein generisches Globus-Symbol zurück. Etwa 70% des mobilen Verkehrs weltweit läuft auf Android, daher ist ein fehlendes Manifest ein fehlender Marken-Eindruck jedes Mal, wenn ein Nutzer deine Website installiert oder zum Startbildschirm hinzufügt.

mask-icon ist eine Safari-spezifische Deklaration für Icons mit gepinnten Tabs in macOS Safari. Wenn ein Nutzer deinen Tab anpinnt, rendert Safari eine monochromatische Silhouette mit dem SVG, das du über <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000"> deklarierst. Das SVG muss ein einzelfarbiger Vektor sein. Safari ignoriert jede Farbe in der Datei und wendet das color-Attribut aus dem Link-Tag an. Etwa 8% des Desktop-Verkehrs weltweit nutzt Safari, und gepinnte Tabs sind eine Power-User-Funktion, aber das Auslassen von mask-icon bedeutet, dass deine Marke als generisches Platzhalter-Punkt für diese Nutzer rendert. Das Symbol sollte einfach, erkennbar bei 16x16 und mit kühnen Formen sein, die in Einfarbig ohne dünne Linien oder feines Detail klar lesbar sind.

Fünf Fehler machen die meisten kaputten Favicon-Setups aus. Erstens, nur /favicon.ico zu deklarieren und die anderen fünf Varianten zu überspringen, was iOS und Android mit Platzhaltern hinterlässt. Zweitens, die falsche apple-touch-icon-Größe zu versenden (152x152 statt 180x180), das iOS in Unschärfe hochskaliert. Drittens, zu vergessen, manifest.json vom HTML-Head zu verlinken, das Android dazu bringt, die Manifest-Symbole völlig zu ignorieren. Viertens, transparente Hintergründe auf apple-touch-icons zu verwenden, die iOS als schwarzes Quadrat statt Ehren der Transparenz rendert. Fünftens, aggressives Browser-Caching, das das alte Favicon Wochen nach einer Aktualisierung anzeigt. Behebe das Cache-Problem, indem du einen Versions-Query-String (favicon.ico?v=2) hinzufügst oder gehashte Dateinamen in deiner Build-Pipeline verwendest.

Ja, wenn dir wichtig ist, wie deine Marke in Dark-Mode-Tabs aussieht. Etwa 60% der Nutzer führen ihr Betriebssystem jetzt standardmäßig im Dark Mode aus, und ein dunkel-auf-dunkel Favicon (ein schwarzes Logo auf einer dunkelgrauen Tab-Leiste) verschwindet visuell. Die Lösung ist ein SVG-Favicon mit einer Media Query: <link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: dark)"> kombiniert mit einem Light-Mode-Standard. Innerhalb des SVG kannst du CSS verwenden, um Fill-Farben basierend auf derselben Media Query zu tauschen. Dies erfordert das SVG-Format, da PNG Media Queries nicht unterstützt. Browser, die die Syntax nicht verstehen, greigen auf das Standard-<link rel="icon"> zurück, daher behältst du vollständige Abdeckung ohne zusätzlichen HTML-Overhead.

Browser cachen Favicons aggressiv, oft eine bis vier Wochen, manchmal länger. Chrome speichert Favicons in seiner Favicon-Datenbank ohne explizites Ablaufdatum. Safari speichert sie pro Session und über Neustarts hinweg. Firefox speichert basierend auf Standard-HTTP-Cache-Headern. Wenn du dein Favicon aktualisierst und Nutzer sehen eine Woche später immer noch das alte, ist das Cache die Ursache. Drei Korrektionen funktionieren zuverlässig. Erstens, einen Versions-Query-String zur Favicon-URL hinzufügen (href="/favicon.ico?v=2026"), das Browser als eine andere Ressource behandeln. Zweitens, den Dateinamen vollständig ändern (favicon-v2.ico) und den Link-Tag aktualisieren. Drittens, explizite Cache-Control-Header auf der Favicon-Antwort mit kurzem max-age setzen. Welche Route du auch wählst, führe einen Favicon-Test nach dem Deployment durch, um zu bestätigen, dass die neue Datei vom Origin aus bereitgestellt wird.

Ein Favicon beeinflusst nicht direkt Google-Rankings, aber es beeinflusst die Click-Through-Rate aus Suchergebnissen, die Google als indirektes Qualitätssignal verwendet. Google Search zeigt Favicons neben organischen Ergebnissen auf Mobilgeräten (seit 2019) und Desktop (seit 2020). Seiten mit einem klaren, gemarkten Favicon erhalten messbar höhere CTR als Seiten mit fehlendem oder Standard-Favicon. Eine SEO-Studie von 2023 über 100.000 SERPs fand einen 4-8%igen CTR-Anstieg für Ergebnisse mit gemarkten Favicons gegenüber denen ohne. Jenseits von CTR signalisiert ein fehlendes oder kaputtes Favicon Nutzern eine Website mit niedriger Qualität oder verlassen, was Vertrauen und Engagement schadet. Google erfordert, dass das Favicon mindestens 8x8 Pixel ist, ein Vielfaches von 8 und von einer stabilen URL abrufbar, um es in Suchergebnissen anzuzeigen.

Ja. Dieser Favicon-Checker akzeptiert jede öffentliche URL und ruft das HTML serverseits auf, daher kannst du deine eigene Website, einen Mitbewerber oder jeden Referenz-Design überprüfen. Gib die URL mit dem Protokoll ein (https://example.com), klicke auf Check favicons, und das Tool gibt innerhalb von zwei bis drei Sekunden jedes deklarierte Symbol zurück. Die Überprüfung funktioniert auf jeder Seite, nicht nur auf der Startseite. Wenn eine Website unterschiedliche Favicons auf Subdomänen oder Abschnitten verwendet, teste die spezifische URL, die dich interessiert. Das Tool behandelt Umleitungen, folgt der endgültigen URL und zeigt alle 404s auf Symbol-Dateien. Verwende es, um zu benchmarken, wie führende Websites in deiner Branche ihre Favicons einrichten, bevor du deine eigenen entwirfst, und kopiere dann die Muster, die über Desktop und Mobilgeräte hinweg aufhalten.

/favicon.ico ist der Legacy-Fallback-Pfad. Browser fordern ihn automatisch vom Domain-Root an, wenn keine andere Ikone im HTML deklariert ist. Das Format ist ICO, ein Windows-Container, der mehrere Auflösungen in einer Datei enthält. <link rel="icon"> ist die moderne HTML-Deklaration. Sie verweist auf jede Symbol-Datei (PNG, SVG oder ICO) unter einer beliebigen URL mit optionalen sizes- und type-Attributen. Browser bevorzugen <link rel="icon">, wenn vorhanden, und greigen nur auf /favicon.ico zurück, wenn es fehlt oder 404 zurückgibt. Die Best Practice ist, beides zu versenden. Deklariere moderne PNG- und SVG-Symbole über <link rel="icon"> für Tabs und halte ein Multi-Resolution-ICO unter /favicon.ico für alte Browser, RSS-Reader und Crawler, die nur den Root-Pfad überprüfen.

Drei Überprüfungen bestätigen ein funktionierendes Favicon. Erstens, führe einen Favicon-Checker auf der Seiten-URL durch, um zu verifizieren, dass jede Deklaration vorhanden ist, korrekt dimensioniert und 200 zurückgibt. Zweitens, hart-aktualisiere die Seite in deinem Browser (Cmd+Shift+R oder Ctrl+Shift+F5), um Cache zu umgehen, und schau dir dann den Tab an. Drittens, speichere die Seite auf deinem iOS-Startbildschirm und Android-Startbildschirm auf einem echten Gerät, um zu bestätigen, dass diese Symbole korrekt rendern. Browser-Dev-Tools helfen auch. Öffne den Netzwerk-Tab, filtere nach „favicon" und lade neu, um zu sehen, welche Symbol-Dateien der Browser tatsächlich anfordert. Wenn du 404s siehst, behebe die Pfade und deploye neu. Verwende den Favicon-Test bei jedem Deployment, um Regressions zu erkennen, bevor Nutzer dies tun, besonders nach Framework-Upgrades, die statische Asset-Pfade ändern.

Der beste Favicon-Checker ist der, der alle sechs Deklarationen überprüft, nicht nur /favicon.ico. Er sollte die Seite serverseits abrufen, jeden Link-Tag analysieren, validieren, dass jede Symbol-URL 200 zurückgibt, die tatsächliche Dateigröße und Dimensionen berichten, Ergebnisse nach Geräteziel gruppieren (Desktop, iOS, Android, Safari pinned), und fehlende Varianten markieren. Er sollte auch die manifest.json-Inhalte überprüfen, nicht nur ob das Manifest verlinkt ist. Dieser Favicon-Checker deckt alle sechs Überprüfungen in einem einzigen Durchgang ab und gibt Ergebnisse in unter drei Sekunden zurück. Browser-Dev-Tools funktionieren für Spot-Überprüfungen, erfordern aber manuelle Inspektion jedes Link-Tags. Online-Validatoren, die nur /favicon.ico überprüfen, verpassen die modernen Varianten völlig. Führe ein vollständiges Audit vor dem Start und nach jeder statischen Asset-Migration durch, um das Symbol-Set sauber zu halten.