Kostenloser Favicon-Checker und -Analyzer
Favicon-Deklarationen im HTML-Head analysieren. Fehlende Größen und bewährte Verfahren prüfen. Kostenlos, schnell und vollständig im Browser ohne Anmeldung.
Aktualisiert am
Favicon Checker & Analyzer
Analyze favicon declarations in your HTML head. Find missing sizes and get best-practice recommendations.
Paste HTML Head Section
Copy the <head> section from your webpage source (Ctrl/Cmd+U to view page source), paste it below, and click Analyze.
Favicon Best Practices
A complete favicon setup typically includes:
/favicon.ico— 16×16 + 32×32 combined, for legacy browsersfavicon-16x16.png+favicon-32x32.png— modern browsersapple-touch-icon.pngat 180×180 — iOS home screenandroid-chrome-192x192.png+512x512.png— Android + PWAsite.webmanifest— PWA manifest with icon declarationsmeta name="theme-color"— browser UI color on mobile
Tools like RealFaviconGenerator.net can generate all sizes from a single source image.
Related Tools
Häufig gestellte Fragen
Was ist der Favicon Checker & Analyzer?
Der Favicon Checker & Analyzer ist ein kostenloses Online-Tool, das favicon-Deklarationen im head des HTML analysiert und auf fehlende Größen sowie bewährte Verfahren prüft. Es läuft vollständig in deinem Browser, ohne Installation oder Anmeldung.
Welche Favicon-Größen sollte ich haben?
Empfohlen: 16x16, 32x32, 180x180 (Apple Touch Icon) und ein Web-Manifest mit 192x192 und 512x512.
Wie verwende ich es?
Füge den <head>-Bereich deines HTML ein, und das Tool extrahiert und analysiert alle favicon-Deklarationen.
Ist es kostenlos?
Ja, völlig kostenlos.
Sind meine Daten mit diesem Tool sicher?
Absolut. Der Favicon Checker & Analyzer verarbeitet alles clientseitig in deinem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Deine Inhalte bleiben jederzeit privat auf deinem Gerät.
Funktioniert der Favicon Checker & Analyzer auf Mobilgeräten?
Ja, der Favicon Checker & Analyzer ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Du kannst ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ohne eine App herunterzuladen.
Muss ich ein Konto erstellen, um dieses Tool zu nutzen?
Es ist kein Konto und keine Registrierung erforderlich. Öffne einfach den Favicon Checker & Analyzer in deinem Browser und beginne sofort mit der Nutzung. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.
Welche Browser werden unterstützt?
Der Favicon Checker & Analyzer funktioniert in allen modernen Browsern, darunter Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwende die neueste Version deines bevorzugten Browsers.
Warum braucht ein Favicon so viele verschiedene Dateien und nicht einfach nur eine?
Weil keine einzelne Datei alle Plattformen abdeckt. Desktop-Browser lesen kleine PNGs oder eine .ico-Datei für Tab und Lesezeichenleiste, iOS nutzt ein separates 180×180 apple-touch-icon, wenn jemand Ihre Seite zum Homescreen hinzufügt, und Android sowie PWAs beziehen ihre Launcher-Icons (192×192 und 512×512) aus einem Web-Manifest statt aus einem Link-Tag. Ein theme-color-Meta-Tag färbt zusätzlich die mobile Browser-Oberfläche ein. Jede Oberfläche liest also eine andere Deklaration, weshalb ein robustes Setup einen klassischen /favicon.ico-Fallback, moderne 16×16- und 32×32-PNGs, ein Apple Touch Icon, ein Manifest und theme-color kombiniert. Fehlt eines davon, fällt die jeweilige Oberfläche stillschweigend auf ein leeres oder zugeschnittenes Bild zurück. Fügen Sie Ihren Head-Bereich in den Analyzer ein, um zu sehen, welche dieser sechs Deklarationen tatsächlich vorhanden sind und welche fehlen.
Was ist der Unterschied zwischen rel="icon" und rel="apple-touch-icon"?
Sie zielen auf unterschiedliche Kontexte ab. Ein Link mit rel="icon" (oder dem veralteten rel="shortcut icon") liefert das kleine Icon, das in Desktop-Browser-Tabs, Lesezeichen und im Verlauf angezeigt wird, üblicherweise deklariert in 16×16 und 32×32 plus einem .ico-Fallback. Ein Link mit rel="apple-touch-icon" wird von Safari und iOS gelesen, wenn ein Nutzer Ihre Seite zum Homescreen hinzufügt; er sollte ein einzelnes 180×180-PNG ohne Transparenz sein, da iOS selbst abgerundete Ecken hinzufügt. Wird das eine anstelle des anderen verwendet, entsteht eine Lücke: Fehlt das apple-touch-icon, zeigen Homescreen-Shortcuts einen zugeschnittenen Screenshot statt Ihres Logos. Der Analyzer listet jeden gefundenen Icon-Link mit rel, href, sizes und type auf und kennzeichnet Desktop-Icons und Apple Touch Icon getrennt, sodass Sie beide unabhängig voneinander prüfen können.
Wie findet der Analyzer Favicon-Tags, wenn ich nur einen Teil meines HTML einfüge?
Das Tool durchsucht das eingefügte Markup nach Icon-Tags, egal ob es sich um den kompletten Seitenquelltext oder nur den Head-Bereich handelt. Es erkennt jeden <link>, dessen rel icon, apple-touch-icon, manifest, shortcut oder mask-icon enthält, sowie jedes <meta> für theme-color, msapplication-TileImage oder msapplication-TileColor. Für jedes gefundene Element extrahiert es rel oder name, href oder content, sizes und type und listet alles in einer Tabelle auf. Es ruft dabei weder die referenzierten Bilddateien ab noch lädt es eine Live-URL, weshalb es problemlos Markup von Staging-Seiten, passwortgeschützten Seiten oder lokalem HTML lesen kann. Für das vollständigste Ergebnis fügen Sie am besten Ihren gesamten <head> ein, da dort die Favicon-Deklarationen stehen. Fügen Sie Ihr Markup ein, und der Analyzer meldet innerhalb von Sekunden jeden erkannten Icon-Tag.
Ist ein Web-Manifest zwingend nötig, damit ein Favicon funktioniert?
Nein, ein einfaches Favicon funktioniert auch ohne Manifest. Browser zeigen ein Tab-Icon auch von einem einfachen rel="icon"-Link oder einer /favicon.ico an, und Safari nutzt ein apple-touch-icon, ganz ohne Manifest. Das Manifest wird relevant, wenn Android Chrome und Progressive Web Apps ein richtiges Launcher-Icon anzeigen sollen, denn diese Plattformen lesen ihre 192×192- und 512×512-Icons aus der site.webmanifest statt aus Link-Tags. Ohne Manifest fällt ein Android-Homescreen-Shortcut auf ein generisches oder buchstabenbasiertes Icon zurück. Ein Manifest ist also für ein reines Tab-Favicon optional, für ein vollständiges, installationsfähiges Setup aber zu erwarten — deshalb markiert der Analyzer ein fehlendes Manifest als Lücke und nicht als harten Fehler. Lassen Sie Ihren Head-Bereich durch das Tool laufen, um zu sehen, ob Manifest und theme-color vorhanden sind.
Warum wird mein Favicon nicht angezeigt, obwohl der Link-Tag im Head steht?
Ein korrekter Tag ist nur die halbe Miete. Die häufigsten Ursachen sind ein falscher href-Pfad, sodass der Browser eine Datei anfragt, die mit 404 antwortet; aggressives Browser-Caching, wodurch das alte oder ein leeres Icon noch lange nach dem Update der Datei angezeigt wird; oder eine fehlerhafte bzw. im falschen Format vorliegende Bilddatei, die der Browser nicht rendern kann. Deklarierte sizes, die nicht zur tatsächlichen Bildgröße passen, oder ein rel="icon", das auf eine nicht mehr existierende Datei zeigt, führen zum gleichen leeren Ergebnis. Dieser Analyzer prüft die Deklarationen in Ihrem Markup, nicht die Dateien auf Ihrem Server, bestätigt also, ob Tags und Größen vorhanden und korrekt formatiert sind, und zeigt an, was fehlt. Fügen Sie Ihren Head zunächst hier ein, um Tag-Probleme auszuschließen, prüfen Sie dann, ob jeder href tatsächlich lädt, und erzwingen Sie einen harten Reload, um den Cache zu leeren.
Embed This Tool
Add a free, live version of this widget to your own website or blog post — it runs entirely in your visitors' browsers, with a credit link back to The Toolbox.
<iframe src="https://getthetoolbox.com/embed/favicon-checker" title="Free Favicon Checker & Analyzer — The Toolbox" width="100%" height="280" style="max-width:480px;border:1px solid #e2e8f0;border-radius:12px" loading="lazy"></iframe>
<p style="font-size:12px;margin:4px 0 0"><a href="https://getthetoolbox.com/website-tools/favicon-checker?utm_source=embed&utm_medium=widget" target="_blank" rel="noopener">Free Favicon Checker & Analyzer</a> by The Toolbox</p>Verwandte Tools
Kostenloser Website-Geschwindigkeitstest
Analysiere die Ladezeit deiner Seiten, Leistungskennzahlen und Optimierungspotenziale deiner Website. Kostenlos, schnell und komplett im Browser, ohne Anmeldung.
Kostenloser Mobile-Friendly-Test
Prüfe, ob deine Website für mobile Geräte optimiert ist. Kostenlos, schnell und komplett im Browser, ohne Anmeldung.
Kostenloser Meta-Tag-Extraktor
Extrahiere und prüfe alle Meta-Tags einer beliebigen Webseite für SEO- und Social-Media-Analysen. Kostenlos, schnell und komplett im Browser, ohne Anmeldung.
Kostenloses Website-Screenshot-Tool
Erstelle Ganzseiten- oder Viewport-Screenshots jeder Webseite für Design-Reviews und Tests. Kostenlos, schnell und komplett im Browser, ohne Anmeldung.
Über den Favicon-Checker & Analyzer
Der Favicon-Checker & Analyzer ist ein kostenloses Tool, mit dem sich das Favicon-Setup prüfen lässt, das im <head>-Bereich einer Seite hinterlegt ist. Fügen Sie den Head-Bereich einer beliebigen Webseite ein, und das Tool extrahiert jeden Icon-relevanten <link>- und <meta>-Tag, listet genau auf, was gefunden wurde, und bewertet das Setup anhand der Größen und Formate, die moderne Browser erwarten. Entwickelt wurde es für Frontend-Entwickler, SEO-Spezialisten und Website-Betreiber, die sicherstellen wollen, dass ihr Favicon sauber in Browser-Tabs, Lesezeichen, mobilen Homescreens und Suchergebnissen erscheint — ohne raten zu müssen, welche Tags fehlen.
Ein Favicon ist das kleine Icon, das ein Browser im Tab, in der Lesezeichenleiste und im Verlauf anzeigt. Ein "vollständiges" Favicon besteht heute längst nicht mehr nur aus einer einzigen Datei: Verschiedene Plattformen lesen unterschiedliche Deklarationen, weshalb ein robustes Setup ein klassisches .ico, moderne PNG-Größen, ein Apple Touch Icon, ein Android-Web-Manifest und einen Theme-Color-Hinweis umfasst. Dieses Tool macht solche Lücken auf einen Blick sichtbar.
Worauf der Analyzer prüft
Nachdem Sie Ihr Markup eingefügt haben, durchsucht das Tool es nach Icon-Tags und bewertet es anhand von sechs Best-Practice-Kriterien, die jeweils als erfüllt, als Warnung oder als fehlend markiert werden:
- favicon.ico-Fallback — ein
rel="icon"odershortcut icon, das auf eine.ico-Datei verweist, nach wie vor die sicherste Standardlösung für ältere Browser. - 32×32-Icon — die Standardgröße für High-DPI-Tabs und Lesezeichen in Desktop-Browsern.
- 16×16-Icon — die klassische kleine Tab-Größe, deklariert mit
sizes="16x16". - Apple Touch Icon (180×180) —
rel="apple-touch-icon", wird verwendet, wenn jemand Ihre Seite zum iOS-Homescreen hinzufügt. - Web App Manifest —
rel="manifest", liefert Android- und PWA-Icons (in der Regel 192×192 und 512×512). - Theme-Color-Meta —
<meta name="theme-color">, färbt die Browser-Oberfläche auf mobilen Geräten ein.
Zusätzlich zeigt das Tool weitere Deklarationen an, die es dabei findet, etwa mask-icon-Links sowie die von älteren Windows-Kacheln genutzten Meta-Tags msapplication-TileImage und msapplication-TileColor.
So funktioniert die Nutzung
Öffnen Sie Ihre Seite im Browser und rufen Sie den Quelltext mit Strg+U (bzw. Cmd+U auf dem Mac) auf, kopieren Sie den <head>-Bereich, fügen Sie ihn in das Feld ein und klicken Sie auf Analyze. Das Tool parst das Markup und liefert drei Dinge: einen Vollständigkeits-Score, der zeigt, wie viele der Prüfungen bestanden wurden, eine Liste aller gefundenen Favicon-Deklarationen (Tag-Typ, rel, href, sizes und type) sowie konkrete Empfehlungen. Jeder fehlende Punkt kommt mit dem exakten Tag zum Nachrüsten — zum Beispiel <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> —, sodass Sie den Fix direkt in Ihr Template übernehmen können.
Da der Analyzer das eingefügte Markup liest, statt eine Live-URL abzurufen, funktioniert er auch bei Staging-Seiten, passwortgeschützten Sites und lokalen HTML-Dateien. Alles läuft in Ihrem Browser; nichts von dem, was Sie einfügen, wird hochgeladen, gespeichert oder an einen Server gesendet, und es ist keine Anmeldung nötig.
Warum ein vollständiges Favicon-Setup wichtig ist
Ein fehlendes oder fehlerhaftes Favicon ist ein kleines, aber hartnäckiges Qualitätssignal. Browser greifen dann auf ein leeres Standard-Dokumentsymbol zurück, wodurch Ihr Tab unter vielen offenen Tabs schwerer zu erkennen ist und neben den Lesezeichen der Konkurrenz unfertig wirkt. Auf mobilen Geräten führt ein fehlendes Apple Touch Icon oder Manifest dazu, dass ein Homescreen-Shortcut einen zugeschnittenen Screenshot statt Ihres Markenzeichens zeigt, und Android-Progressive-Web-Apps verlieren ihr Launcher-Icon komplett.
Ein typisches produktionsreifes Setup umfasst /favicon.ico (16×16 und 32×32 kombiniert für ältere Browser), separate Dateien favicon-16x16.png und favicon-32x32.png für moderne Browser, ein 180×180 großes apple-touch-icon.png, PNGs in 192×192 und 512×512, referenziert aus einem site.webmanifest, sowie ein theme-color-Meta-Tag. Lassen Sie Ihren Head-Bereich nach jedem Redesign oder Framework-Wechsel durch den Analyzer laufen — diese Tags gehen bei einem Rebuild leicht verloren, und diese Prüfung deckt die Lücken auf, bevor es Ihre Nutzer tun.