Ein Favicon Checker ist ein URL-Scanner, der öffentliches HTML lädt, jeden link rel="icon" ausliest, /favicon.ico anfragt, dein Web-App-Manifest parst und meldet, welche Icon-Dateien existieren, welche Pfade 404 liefern und welche Größen du deklariert hast. Er beantwortet: „Was sieht die Außenwelt wirklich?“ - ohne sich auf deinen lokalen Build oder allein DevTools zu verlassen.
Favicon Check auf opengraph-check.com ist genau dafür gebaut. Production-URL einfügen, strukturiertes Audit in Sekunden, jedes Icon previewen, Dateien herunterladen und Pixel prüfen, bevor Nutzer sich über fehlende Tab-Marken beschweren.
Warum du einen Favicon Checker brauchst
Entwickler vertrauen localhost, CI-Artefakte und das Elements-Panel. Nutzer und Crawler vertrauen Live-HTTP-Antworten.
| Was du deployt glaubst | Was ein Checker beweist |
|---|---|
Icons in /public | Dateien liefern 200 auf Production |
| Tags in React-Komponente | Tags im Seitenquelltext |
| Manifest im Repo | <link rel="manifest"> da und JSON parsebar |
| Rebrand live | CDN liefert neue Bytes, nicht gecachtes ICO |
Ein Favicon Checker schließt die Lücke zwischen Intent und Realität. Schnellster Weg, Fehler aus Häufige Favicon-Fehler vor Launch zu finden.
Was Favicon Check scannt
Mit Favicon Check:
- HTML laden als anonymer Client ohne Login-Cookies.
- Icon-link-Tags extrahieren -
rel="icon",apple-touch-icon,mask-icon, Manifest-Link. /favicon.icoam Root anfragen, auch wenn HTML es weglässt.site.webmanifestparsen, wenn verlinkt, Manifest-Icons listen.- Jede Icon-URL folgen, Status, Content-Type, erkennbare Dimensionen.
- Icons inline previewen ohne jeden URL manuell zu öffnen.
- Download jedes Assets für Pixel-Review im Design-Tool.
Das deckt den Stack aus dem Favicon-Größen-Guide: Tab-PNGs, ICO, apple-touch-icon, optionales SVG, Android-Manifest-Icons.
Favicon Checker vs manuelles DevTools-Debugging
DevTools für lokale Iteration. Schwaches Abnahme-Tool für Production-Favicons.
| Aufgabe | Nur DevTools | Favicon Check |
|---|---|---|
| Server-HTML-Tags | View-source hilft | Parst und listet alle |
| Pfade auf Unterseiten | Jede URL besuchen | Jede öffentliche URL scannen |
/favicon.ico prüfen | Manuell | Automatisch |
| Manifest-Icons | JSON kopieren | Eingebautes Parsing |
| Report ans Team | Screenshots | Gleiche URL, gleiche Ergebnisse |
| Alle Icons downloaden | Einzeln | Pro Asset |
Elements zeigt DOM nach JavaScript. Favicon Check liest First Fetch wie Crawler. SPA mit spät injizierten Icons? Checker findet es. Wie in Favicon wird nicht angezeigt.
Wann du einen Favicon Check laufen lässt
Vor Launch
Staging und Production scannen, bevor Marketing live geht. Fehlende Manifest-Links und relative Pfade sind Last-Minute-Blocker.
Nach Rebrand
Neue Dateinamen, CDN gepurgt, HTML aktualisiert. Favicon Check auf jeder Origin (www, app, Docs). Stale CDN-Bytes siehst du am Download - siehe Favicon-Cache erklärt.
Nach Framework- oder CMS-Migration
Next.js-Metadata, WordPress-Customizer, Shopify-Theme - alles anderes HTML. Gerenderte Ausgabe prüfen, nicht nur Config-UI.
Quartals-Audits
Icons driften, wenn Templates fork-en.
Wenn Nutzer falsche Icons melden
Erst scannen, dann raten.
Schritt für Schritt - Site mit Favicon Check prüfen
- Favicon Check öffnen.
- Production-HTTPS-URL eingeben (Startseite oder Unterseite mit gleichem Layout).
- Scan starten.
- Tag-Liste -
rel="icon", apple-touch-icon, Manifest-Link vorhanden? - Previews - Kontrast auf hellem und dunklem Chrome mental prüfen.
- 16×16, 32×32, 180×180 downloaden, 100% Zoom. Unscharf? Favicon unscharf.
- Manifest-Icons 192×192 und 512×512? Fehlen? Web-App-Manifest-Icons.
- Fix mit Favicon-HTML-Beispiel.
- Erneut scannen bis alles grün.
Pro Subdomain mit eigenem HTML wiederholen.
Favicon Check Ergebnisse lesen
Fehlende link-Tags
Kein rel="icon" und kein gültiges /favicon.ico: generischer Tab. HTML-Block aus Favicon per HTML einbinden.
404 auf Icon-URLs
Tippfehler, falscher Deploy-Ordner, relative Pfade. Root-relative href.
Manifest verlinkt, leeres icons-Array
JSON ok aber unvollständig. 192 und 512 PNG ergänzen.
SVG ohne PNG-Fallback
ICO und PNG für Safari, iOS, Crawler. SVG-Favicon-Anleitung.
Falscher Content-Type
PNG als application/octet-stream: Server/CDN-Config fixen.
Alte Bytes nach Rebrand
CDN liefert stale Bild. Purge und Dateinamen versionieren.
Favicon Checker vs Open Graph Scanner
Gleiche Site, anderer Job.
| Tool | Prüft | Betrifft |
|---|---|---|
| Favicon Check | link rel="icon", ICO, Manifest | Tabs, Home Screen, PWA |
| Open Graph Scanner | og:image, og:title, Twitter Cards | Facebook, LinkedIn, Slack |
Beide vor großen Launches auf derselben URL. Perfektes OG-Bild fixt kein fehlendes Tab-Icon und umgekehrt.
Wer Favicon Checker nutzt
- Frontend-Entwickler für Framework-Metadata
- Designer für Export vs Live-Pixel
- SEO/Marketing für SERP-Favicon-Konsistenz
- QA in Release-Checklisten
- Agenturen für Client-Abnahme
QA-Checkliste mit dem Tool
Production-URL: _______________
[ ] Favicon Check Scan done
[ ] rel="icon" Tags erkannt
[ ] /favicon.ico 200
[ ] apple-touch-icon 180×180
[ ] Manifest 192 + 512
[ ] Keine 404 Icon-Pfade
[ ] PNGs bei 100% scharf
[ ] Unterseiten-URL gescannt
[ ] Open Graph Scanner auf gleicher URL
Ergänzt Häufige Favicon-Fehler.
Grenzen jedes Favicon Checkers
- iOS Home Screen manchmal nach Fix neu anpinnen
- Dark-Mode-Kontrast menschlich beurteilen
- Apps hinter Login brauchen öffentliche Icon-Pfade
- Google SERP-Favicon auf Google-Zeitplan, nicht sofort
Checker für HTTP-Wahrheit, dann ein Handy stichprobenartig.
Andere Testmethoden und Lücken
| Methode | Lücke |
|---|---|
| Lokale Datei-Vorschau | Kein HTML-Tag-Check |
| Lighthouse | Oberflächlich |
| Generator nach Build | Kein Production-Drift-Monitor |
| Manuelles curl | Mühsam für Manifest plus alle Größen |
Favicon Check kombiniert Fetch, Manifest-Parsing und Previews in einer UI für opengraph-check.com-Workflows.
CI und Release-Gates
Favicon-Scan in Deploy-Pipeline:
# Pseudocode- deploy production- curl -f https://example.com/favicon.ico- run favicon-check on https://example.com- fail if manifest icons 404Manuell reicht für kleine Sites. Agenturen und SaaS profitieren von wiederholbarem Favicon Check auf Production-URL nach jedem Release.
Vergleich mit manuellem curl
curl -I https://example.com/favicon.icocurl -I https://example.com/site.webmanifestZeigt Header, nicht alle link-Tags, keine Previews, kein Manifest-Parse. Checker spart Zeit bei fünf Plus Icon-URLs.
Integration mit Open Graph Workflow
Launch-Checkliste opengraph-check.com:
- Favicon Check auf Production-URL
- Open Graph Scanner auf dieselbe URL
- Manifest und OG getrennt fixen, beides grün vor Ankündigung
Favicon betrifft Tabs und Home Screen. OG betrifft Social Cards. Nutzer sehen beides.
Typische Checker-Befunde und Fixes
| Befund | Nächster Schritt |
|---|---|
| Kein rel=icon | Favicon einbinden HTML |
| Manifest 404 | Pfad in HTML und Datei abgleichen |
| 180×180 fehlt | apple-touch-icon ergänzen |
| SVG ohne PNG | SVG-Favicon-Anleitung |
| Alte Bytes | CDN purge, Favicon-Cache |
Reporting an Stakeholder
Checker-Ergebnisse sind teilbar: gleiche Production-URL, gleicher Report für Design, Dev und Marketing. Weniger „ bei mir sieht es richtig aus “ in Slack-Threads. Nach grünem Scan Screenshots der Previews für Brand-Abnahme archivieren.
Häufige Fragen an Support
„Checker zeigt neues Icon, mein Tab alt“ - lokaler Browser-Favicon-Store. Inkognito oder Dateiname versionieren.
„Nur ein Browser betroffen“ - oft Extension oder Profil-Cache, nicht Server.
„Staging ok, Production nicht“ - CDN, fehlender Purge, oder anderes HTML-Template auf Production.
Erweiterte Nutzung von Favicon Check
- Vor dem Merge in
main: Staging-URL scannen - Nach CDN-Purge: erneut scannen und Download-Bytes mit Design abgleichen
- Bei Subdomains:
www,app,docseinzeln - Bei Rebrand: alte und neue URL vergleichen bis CDN weltweit konsistent
Der Checker ersetzt keine Geräte-Tests, aber er ist der schnellste Beweis, dass dein Server die richtigen Tags und Dateien ausliefert. Kombiniere mit Favicon-Größen-Guide für Export und mit Favicon-Fehler für Interpretation der Befunde.
Warum opengraph-check.com Favicon Check
Die Site bündelt Favicon-Audit und Open Graph Scan. Gleiche Domain, gleicher Workflow: URL einfügen, Ergebnis teilen, vor Launch absichern. Kein Plugin, keine lokale CLI - ideal für Marketing und Agenturen, die Production-Wahrheit brauchen, nicht nur Repo-Stand.
Start: Favicon Check. Danach Open Graph Scanner für dieselbe URL.
Für HTML-Vorlagen nach dem Scan: Favicon-HTML-Beispiel. Bei Cache-Verdacht: Favicon-Cache erklärt.
Für Agenturen und Freelancer
Favicon Check als Abnahme-Kriterium im Statement of Work festhalten: „Production-URL zeigt im Favicon Check alle deklarierten Icons ohne 404.“ Objektiv, schnell, ohne Browser-Extension beim Kunden. Kombiniert mit Screenshot der OG-Vorschau vom Open Graph Scanner hast du Social und Browser abgedeckt.
FAQ
Was ist ein Favicon Checker?
Tool, das Live-URL auf Favicon-HTML, Root-ICO und Manifest-Icons scannt und Status plus Preview liefert.
Ist Favicon Check kostenlos?
Ja. Favicon Check öffnen, URL eingeben, scannen. Keine Extension nötig.
Localhost scannen?
Production-URLs am genauesten. Localhost nur mit Tunnel öffentlich erreichbar.
Prüft es apple-touch-icon?
Ja, inklusive deklarierter Größen.
Findet es fehlende Manifest-Icons?
Ja, wenn <link rel="manifest"> da ist und JSON gültig.
Unterschied zu Favicon-Cache-Fix?
Checker zeigt, welche Datei der Server heute liefert. Lokaler Cache kann stale bleiben bis Dateiname wechselt. Favicon-Cache erklärt.
Checker oder HTML-Guides?
Beides. Guides lehren Setup, Checker verifiziert Deploy. Favicon-HTML-Beispiel, dann scannen.
Mehrere Seiten?
Jede URL mit gleichem Layout reicht. Unterschiedliche Templates: je Template eine URL.
Fazit
Ein Favicon Checker macht aus Vermutungen Beweise. Favicon Check scannt Live-HTML, Root-ICO und Manifest-Icons, previewt Assets und markiert kaputte Pfade, bevor Nutzer einen generischen Tab sehen. Nach jedem Deploy und Rebrand laufen lassen, Fixes mit Favicon-Größen-Guide und Favicon-HTML-Beispiel, dieselbe URL mit Open Graph Scanner für komplette Launch-Abdeckung.
