Ein Favicon ist ein kleines quadratisches Icon für Browser-Tabs, Lesezeichen und Homescreen-Shortcuts. Ein Open-Graph-Bild (og:image) ist ein großes Landscape-Bild für Link-Vorschauen auf Slack, LinkedIn, Facebook und iMessage. Das sind verschiedene Dateien, verschiedene HTML-Tags und verschiedene Test-Tools. Für vollständige Markenpräsenz brauchst du beides.
Dieser Leitfaden vergleicht Favicon und OG-Bild, erklärt was passiert wenn du sie verwechselst, und zeigt wie du jedes auf opengraph-check.com prüfst.
Kurzvergleich
| Favicon | Open-Graph-Bild | |
|---|---|---|
| Primärer Tag | link rel="icon" | meta property="og:image" |
| Typische Größe | 16×16 bis 512×512 (quadratisch) | 1200×630 (Landscape) |
| Wo sichtbar | Browser-Tab, Lesezeichen, OS-Shortcut | Social/Chat-Link-Vorschau-Karte |
| Fallback-Pfad | /favicon.ico | keiner (fehlend = kein Vorschaubild) |
| Test-Tool | Favicon Check | Open Graph Check |
Gleiches Logo, andere Crops und Exports. Eine Datei nicht für beide Rollen wiederverwenden.
Was ein Favicon macht
Browser holen Favicons früh beim Seitenladen. Nutzer sehen sie in:
- Tab-Leiste (16×16 oder 32×32 gerendert)
- Lesezeichenlisten und Verlauf
- iOS-Homescreen (180×180 apple-touch-icon)
- Android-PWA-Shortcut (192×192, 512×512 aus Manifest)
- Browser-Chrome (Passwort-Manager, Leselisten)
Tags im Document Head:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Legacy-Clients holen /favicon.ico ohne HTML zu lesen.
Favicon-Setup: Favicon-Größen-Leitfaden und Favicon per HTML einbinden.
Was ein Open-Graph-Bild macht
Wenn jemand deine URL in Slack oder LinkedIn einfügt, liest der Plattform-Crawler Open-Graph-Meta-Tags. og:image ist das Hero-Bild in der Vorschau-Karte.
<meta property="og:image" content="https://example.de/og-image.png"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630">Typische Specs:
- 1200×630 px (Seitenverhältnis 1,91:1) funktioniert auf den meisten Plattformen
- JPG oder PNG unter Plattform-Limits
- Absolute HTTPS-URL (relative URLs scheitern bei vielen Crawlern)
Volle Tag-Referenz: Open Graph Tags erklärt.
OG-Bilder erscheinen nicht in Browser-Tabs. Favicons erscheinen nicht in Slack-Link-Karten. Plattformen ignorieren Tags für den jeweils anderen Zweck.
Warum Teams sie verwechseln
Beide Assets stehen für die Marke. CMS-Dashboards (WordPress Site Icon vs. Yoast Social Image) liegen nebeneinander. Design exportiert ein quadratisches Logo, Entwickler nutzen es überall.
Probleme bei Vermischung:
Quadratisches Favicon als og:image
Ein 512×512-Logo in og:image wirkt auf LinkedIn als kleines Quadrat mit leeren Rändern oder hartem Crop. Unprofessionell in Share-Previews.
OG-Landscape-Bild als Favicon
Ein 1200×630-Banner auf 16×16 wird im Tab unleserlich. Browser nehmen Center-Crop. Text verschwindet.
Nur eines gesetzt
Perfektes Tab-Icon, leere Social-Vorschau. Oder schöne Slack-Karten, Generics in Lesezeichen weil /favicon.ico fehlt.
Dieselbe URL in beiden Tags
Technisch möglich mit quadratischem 1200×1200 OG-Bild als Favicon. Tabs sehen trotzdem falsch aus durch Downsampling. Zweckgebundene Dateien nutzen.
Was du ausliefern solltest (Minimum)
Favicon-Bundle
favicon.icoan Domain-Root- PNG 16×16 und 32×32
apple-touch-icon180×180- Manifest-Icons 192×192 und 512×512 bei PWA
Scan mit Favicon Check.
Open-Graph-Bundle
og:imagebei 1200×630og:title,og:description,og:url- Twitter-Card-Tags falls X-Previews wichtig
Scan mit Open Graph Check.
Beide Scans auf derselben Produktions-URL vor Marketing-Launches. Siehe Favicons testen vor Launch und Open Graph Tags testen.
Design-Workflow: eine Marke, zwei Exports
Von Brand Guidelines starten, Outputs trennen:
- Quadratischer Master ab 512×512 für Favicon-Ableitungen
- Landscape-Template 1200×630 mit Logo, Headline-Safe-Zone und Hintergrund
Design-Tools exportieren oft beides aus einem Figma-Frame-Set. Layer-Namen klar halten (favicon-32, og-default), damit Build-Skripte nicht vertauschen.
Favicon-Lesbarkeit vs. OG-Komposition:
- Favicon: markantes simples Zeichen, kein Kleinsttext, hoher Kontrast bei 16 px
- OG-Bild: Headline lesbar in Karten-Thumbnail-Größe, Brand-Bar, optionales Foto
Framework-Hinweise
Next.js
metadata.icons für Favicons. metadata.openGraph.images für OG. Gleiches layout.tsx, andere Keys. Guide: Favicon in Next.js.
WordPress
Site Icon für Favicon. Yoast oder Rank Math für OG-Bild pro Seite. Guide: Favicon in WordPress.
React SPA
Favicon in statischem index.html. OG-Tags oft kaputt wenn nur client-seitig. Prerender oder SSR für zuverlässige Shares. Favicon: Favicon in Vite/React.
Debugging-Checkliste
Tab zeigt falsches oder fehlendes Icon:
- Favicon Check auf Production
/favicon.icound PNG-Tags bestätigen- Siehe Favicon wird nicht angezeigt
Geteilter Link zeigt falsches oder fehlendes Bild:
- Open Graph Check auf Produktions-URL
- Seitenquelltext auf
og:image(nicht JS-injiziert) - Siehe Fehlendes OG-Bild beheben
Beides kaputt nach Deploy:
Cache purgen, HTTPS prüfen, Staging-URLs in Meta-Tags checken. Verschiedene Ursachen, parallel fixen.
SEO- und Discovery-Perspektive
Google kann Favicons in Suchergebnissen zeigen (kleines Icon neben Titel). OG-Bilder beeinflussen Klickrate auf Social, nicht das klassische Blue-Link-Favicon.
Sitemap und Structured Data ersetzen keines der Assets. Sie lösen Sichtbarkeit in verschiedenen Kanälen:
- Favicon: Browser-Chrome, Lesezeichen, manche SERP-Features
- OG-Bild: Social- und Messenger-Vorschauen
Beides mit opengraph-check.com prüfen
opengraph-check.com hostet zwei fokussierte Tools:
| Tool | URL | Validiert |
|---|---|---|
| Favicon Check | /de/favicon | link-Icons, ICO, Manifest |
| Open Graph Check | /de | og:*, Twitter Cards, Vorschau |
Ein Tool für den anderen Job lässt Lücken. Bestandener OG-Scan heißt nicht, dass Favicons funktionieren. Bestandener Favicon-Scan heißt nicht, dass Slack-Previews dein Banner zeigen.
Developer-Checkliste für beides: Favicon-Audit-Checkliste.
Pro Seite vs. site-weit
Manche Sites nutzen ein globales Favicon, aber unterschiedliche og:image-Werte pro Blogpost oder Produktseite.
| Asset | Scope | Typisches Setup |
|---|---|---|
| Favicon | meist site-weit | Gleiche link-Tags auf jeder Seite |
| OG-Bild | oft pro URL | Eigenes og:image pro Artikel oder Produkt |
WordPress-SEO-Plugins handhaben OG pro Seite automatisch. Site Icon bleibt global. Next.js App Router setzt Default-OG im Layout und überschreibt in generateMetadata pro Route.
Beim Audit:
- Favicon-Scan auf Startseite reicht oft, wenn Tags site-weit identisch sind
- OG-Scan auf repräsentativen URLs (Startseite, Blogpost, Produkt)
Keine seiten-spezifische OG-Image-URL in Favicon-Tags kopieren. Dimensionen passen nicht.
Plattform-spezifisches OG-Verhalten (Favicon unverändert)
Plattformen lesen og:image unterschiedlich. Favicon-Verhalten in Chrome-Tabs bleibt unabhängig von Slack- oder LinkedIn-Einstellungen.
- LinkedIn croppt hohe Bilder aggressiv
- Slack cached OG-Bilder stark
- iMessage bevorzugt absolute HTTPS-URLs
- Discord nutzt OG-Tags, ignoriert Favicon für Embeds
Favicon-Tests ersetzen kein plattformspezifisches OG-Debugging. Zuerst Open Graph Check, dann Plattform-Debugger bei Bedarf.
Markenkonsistenz ohne Datei-Wiederverwendung
Dein quadratisches Favicon-Zeichen kann innerhalb des OG-Banners erscheinen, ohne dieselbe Datei zu nutzen:
- Favicon-Datei: 32×32 PNG nur mit Icon
- OG-Datei: 1200×630 mit Icon plus Headline plus Hintergrund
Beides aus einem Design-System exportieren, nicht eine hochskalierte Datei. Designer schätzen gemeinsame Color Tokens auch bei unterschiedlichen Outputs.
Technische Tag-Details jenseits der Bilder: Open Graph Tags erklärt. Der Guide deckt og:title, og:url und Twitter-Card-Begleittags ab, die neben dem Favicon-Bundle arbeiten, nicht stattdessen.
Checkliste: Beide Assets vor Marketing-Launch
[ ] Favicon Check - Tab-Icons und /favicon.ico
[ ] Open Graph Check - og:image und Begleittags
[ ] og:image nicht als Favicon-URL wiederverwendet
[ ] Favicon nicht als og:image gesetzt
[ ] Stakeholder wissen: Tab ≠ Slack-Vorschau
Diese fünf Zeilen verhindern die häufigste Verwechslung zwischen Browser-Icon und Share-Bild.
Typische Stakeholder-Fragen beantworten
„Warum brauchen wir zwei Bilder?“ Tab-Icons sind winzig und quadratisch. Share-Karten brauchen ein breites Bild mit Textplatz. Eine Datei kann nicht beides gut.
„Das Logo ist doch überall dasselbe.“ Marken ja, Dateiformate nein. Design liefert zwei Exports aus einem Master.
„Können wir das OG-Bild verkleinern und als Favicon nehmen?“ Technisch ja, visuell nein. Text wird unleserlich. Siehe Favicon unscharf.
Wenn Marketing beide Assets gleichzeitig aktualisiert, zwei Tickets oder ein PR mit zwei klar benannten Datei-Ordnern vermeiden Verwechslungen beim Upload.
Für neue Teammitglieder: Open Graph Tags erklärt lesen, dann diesen Artikel. Erst Tags verstehen, dann die Bild-Unterschiede einordnen.
Recap-Tabelle für Meetings
| Frage im Meeting | Kurzantwort |
|---|---|
| Reicht unser Logo als og:image? | Nur wenn als 1200×630 exportiert |
| Reicht og:image als Tab-Icon? | Nein, zu groß und falsches Format |
| Ein Tool für beides? | Nein - Favicon Check und OG Check |
| Gleiche Datei ok? | Nein, verschiedene Exporte |
Diese Tabelle kannst du in Confluence oder Notion direkt übernehmen, wenn Product nach „einem Brand-Bild“ fragt.
Beide Scans dauern zusammen unter zwei Minuten. Das ist günstiger als ein Hotfix nach dem Launch-Post, wenn Slack weiterhin das alte OG-Bild zeigt, obwohl das Tab-Icon schon stimmt.
Starte mit Favicon Check, dann Open Graph Check auf derselben URL.
FAQ
Ist Favicon dasselbe wie og:image?
Nein. Favicon nutzt link rel="icon" für kleine quadratische Browser-Icons. OG-Bild nutzt meta property="og:image" für große Social-Vorschauen.
Kann ich ein Bild für Favicon und Open Graph nutzen?
Nicht empfohlen. Quadratische Favicons und 1200×630 OG-Bilder brauchen andere Dimensionen und Komposition. Wiederverwendung ergibt unscharfe Tabs oder awkward Share-Karten.
Was zählt mehr, Favicon oder OG-Bild?
Beides in verschiedenen Kanälen. Favicon betrifft jeden Site-Besuch im Tab. OG-Bild betrifft jeden Link-Share auf Social. Beides vor öffentlichem Launch priorisieren.
Nutzt Facebook Favicon oder og:image?
Facebook-Link-Vorschauen nutzen Open-Graph-Tags, besonders og:image. Favicons nicht in Facebook-Share-Karten.
Brauche ich og:image mit Favicon?
Ja, wenn Link-Vorschauen beim Teilen wichtig sind. Favicon füllt Social-Karten nicht.
Welche Größe Favicon vs. OG-Bild?
Favicons: 16×16, 32×32, 180×180, bis 512×512 quadratisch. OG-Bild: typisch 1200×630 Landscape.
Wie teste ich Favicon vs. OG-Bild?
Favicon Check für Icons. Open Graph Check für OG-Tags. Gleiche URL, zwei Scans.
Wo lerne ich alle Open-Graph-Tags?
Open Graph Tags erklärt für die volle Tag-Liste jenseits von og:image.
Fazit
Favicon und Open-Graph-Bild bedienen verschiedene Oberflächen. Quadratische Multi-Size-Favicons für Browser und Mobile-Shortcuts. 1200×630 OG-Bild für Social-Link-Vorschauen. Jedes mit dem passenden Tool testen: Favicon Check und Open Graph Check.
Für Tag-Grundlagen jenseits der Bilder: Open Graph Tags erklärt. Für Launch-QA: Favicon-Audit-Checkliste mit deinem OG-Test-Workflow kombinieren.
