Favicon und OG-Image sind Marken-Assets im Web: Das Favicon ist das kleine Icon in Browser-Tabs und Bookmarks, das OG-Image ist das Vorschaubild beim Teilen einer URL auf Social Media.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Einsteiger Synonyme / Auch bekannt als: Browser Icon, Bookmark-Icon, Open Graph Image, Link Preview, Social Card
Was sind Favicon und OG-Image?
Es sind die übersehenen Stars im Web-Design-Briefing. Das Favicon taucht in Browser-Tabs, Bookmarks, der Browser-Chronik und auf Mobilgeräten als App-Icon auf. Das OG-Image erscheint, wenn eine URL auf Facebook, LinkedIn, Twitter/X, WhatsApp oder iMessage geteilt wird.
Beide Assets sind klein in der Größe, aber groß in der Wirkung: Sie transportieren Markenidentität in Kontexten, wo der eigentliche Website-Inhalt nicht sichtbar ist. Ein professionell gestaltetes Favicon und ein konsistentes OG-Image signalisieren Sorgfalt und Markenbewusstsein.
Erklärung
Favicon
Was ist ein Favicon? Das Favicon (Favorite Icon) ist das kleine Bild, das in Browser-Tabs links neben dem Seitentitel erscheint. Es erscheint auch:
- In Browser-Bookmarks und -Verlauf
- In Suchmaschinen-Ergebnissen (als Site Icon bei Google)
- Als App-Icon auf iOS/Android, wenn die Seite zum Homescreen hinzugefügt wird
- In Progressive Web Apps (PWA)
Formate und Größen
Das klassische Format ist .ico – eine alte Datei, die mehrere Bildgrößen in einer Datei vereint. Modern ist die Einbindung mehrerer PNG-Versionen für verschiedene Kontexte:
| Format | Größe | Verwendung |
|---|---|---|
| favicon.ico | 16 × 16, 32 × 32, 48 × 48 | Legacy-Browser, Windows |
| favicon-16x16.png | 16 × 16 | Kleine Tab-Darstellung |
| favicon-32x32.png | 32 × 32 | Standard-Tab-Darstellung |
| apple-touch-icon.png | 180 × 180 | iOS App-Icon |
| android-chrome-192x192.png | 192 × 192 | Android App-Icon |
| android-chrome-512x512.png | 512 × 512 | Android Splash Screen |
| safari-pinned-tab.svg | Beliebig (SVG) | Safari Pinned Tab |
SVG Favicon Moderne Browser unterstützen SVG als Favicon – das skaliert verlustfrei auf alle Größen. Besonders nützlich: SVG-Favicons können Dark-Mode-Varianten einbinden.
Design-Anforderungen Ein Favicon muss bei 16 × 16 Pixeln lesbar sein. Das macht ein normales Logo oft ungeeignet – es ist zu komplex. Favicon-Design bedeutet:
- Auf den ikonischen Kern des Logos reduzieren
- Oft ein einzelner Buchstabe, ein Symbol oder ein vereinfachtes Markenzeichen
- Hoher Kontrast für Erkennbarkeit auf hellen und dunklen Browser-Themes
Tools zur Favicon-Generierung
- RealFaviconGenerator (realfavicongenerator.net): Upload des Logos, automatische Generierung aller Formate und HTML-Snippet
- Favicon.io: Einfaches Tool für PNG, ICO, SVG
Open Graph (OG) Image
Was ist ein OG-Image? Das Open Graph Protocol (entwickelt von Facebook, 2010) ermöglicht es Websites, zu definieren, wie ein Link-Preview aussieht, wenn die URL geteilt wird. Das OG-Image ist das zentrale visuelle Element dieser Preview.
Wenn jemand einen Link auf LinkedIn, Facebook, Twitter/X, WhatsApp, Telegram oder iMessage teilt, crawlt der jeweilige Dienst die verlinkte Seite und liest die Open-Graph-Meta-Tags aus dem HTML-Head:
``html <meta property="og:title" content="Seitentitel"> <meta property="og:description" content="Kurzbeschreibung"> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:url" content="https://example.com/artikel"> ``
Formate und Größen
Die empfohlene Größe für OG-Images ist 1200 × 630 Pixel (1,91:1 Seitenverhältnis). Das funktioniert auf den meisten Plattformen korrekt.
Twitter/X Cards haben teils eigene Formate – aber og:image wird als Fallback akzeptiert. LinkedIn empfiehlt ebenfalls 1200 × 628 px.
| Plattform | Empfohlene Größe | Format |
|---|---|---|
| 1200 × 630 px | JPG/PNG | |
| 1200 × 628 px | JPG/PNG | |
| Twitter/X | 1200 × 600 px (Wide) oder 800 × 418 px | JPG/PNG |
| 1200 × 630 px | JPG/PNG | |
| Allgemein | 1200 × 630 px | JPG |
Design-Prinzipien für OG-Images
- Klarer Titel/Überschrift: Der Seitenname oder Artikeltitel prominent sichtbar
- Logo/Markenzeichen: Erkennbarkeit des Absenders
- Kurze Aussage: Worum geht es? Was wird geteilt?
- Visuell auffällig: Im Social-Feed konkurriert das Bild mit anderen Posts
- Schriftgröße mind. 28–32 pt: Text muss auf kleiner Preview lesbar sein
- Sicherheitsabstand: Wichtige Inhalte 50 px vom Rand – manche Plattformen croppen minimal
Statisches vs. dynamisches OG-Image
- Statisch: Ein einheitliches OG-Image für alle Seiten oder einen Bildtyp. Einfach umzusetzen.
- Dynamisch: Für jede Seite (jeden Artikel, jedes Produkt) wird ein individuelles OG-Image generiert, das Titel, Autor und Datum enthält. Komplexer, aber viel effektiver.
Tools für dynamische OG-Images: Vercel OG (satori), Cloudinary Automations, Bannerbear.
Twitter Cards
Twitter/X hat ein eigenes Meta-Tag-Format, das über og:image hinausgeht:
``html <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Titel"> <meta name="twitter:image" content="https://example.com/twitter-image.jpg"> ``
summary_large_image erzeugt einen großen Bildvorschau-Card. summary zeigt ein kleines Bild neben dem Text.
Beispiele
Lazi Akademie Favicon: Das Akademie-Logo hat ein ikonisches "L" als Favicon – vereinfacht, hoher Kontrast, lesbar bei 16 px.
Artikel-OG-Image: Ein Blog-Artikel über "KI in der Medienbranche" hat ein dynamisch generiertes OG-Image: dunkler Hintergrund, Artikeltitel in weißer Schrift, Autorenname, Erscheinungsdatum, kleines Akademie-Logo.
Produkt-Landing-Page: Das OG-Image zeigt das Produkt auf neutralem Hintergrund mit dem Produktnamen und einem kurzen Claim – optimiert für Social Sharing der Landing Page Design: Conversion-optimierte Layouts.
In der Praxis
Favicon-Workflow
- Logo-Designer erstellt vereinfachte Favicon-Variante (meist 512 × 512 als Masterfile)
- Upload zu RealFaviconGenerator
- Generierte Dateien in das Projekt einbinden
- Korrekte HTML-Meta-Tags im
<head>einfügen
OG-Image-Workflow
- Template erstellen: In Figma ein 1200 × 630 Template mit Brand-Elementen
- Varianten erzeugen: Für jede Seite/Artikel eine Variante befüllen
- Exportieren: JPG, max. 300 KB (große Dateien werden von manchen Plattformen ignoriert)
- Testing: Mit Debuggern testen vor dem Launch
Testing-Tools
Vor dem Live-Gang sollten OG-Images getestet werden, da jede Plattform den Cache unterschiedlich handhabt:
- Facebook Debugger: https://developers.facebook.com/tools/debug/
- LinkedIn Post Inspector: https://www.linkedin.com/post-inspector/
- Twitter Card Validator: https://cards-dev.twitter.com/validator (begrenzt verfügbar)
- OpenGraph.xyz: Einfacher Test für alle Plattformen
Vergleich & Abgrenzung
| Asset | Sichtbar wo | Größe | Format |
|---|---|---|---|
| Favicon | Browser-Tab, Bookmarks | 16–512 px | ICO, PNG, SVG |
| Apple Touch Icon | iOS Homescreen | 180 × 180 px | PNG |
| OG Image | Social Media Link Previews | 1200 × 630 px | JPG, PNG |
| Twitter Card Image | Twitter/X Link Preview | 1200 × 600 px | JPG, PNG |
Häufige Fragen (FAQ)
Warum sieht mein OG-Image noch falsch aus, obwohl ich es geändert habe? Social-Media-Plattformen cachen OG-Images. Der Facebook Debugger mit "Scrape Again" erneuert den Cache. Bei anderen Plattformen dauert es bis zu 24 Stunden oder eine neue URL wird gebraucht.
Brauche ich wirklich alle Favicon-Größen? Für moderne Projekte: Mindestens favicon.ico (für IE/ältere), favicon-32x32.png, apple-touch-icon.png (180 px) und eine SVG-Variante. Die vollständige Suite via RealFaviconGenerator ist Best Practice.
Darf ich Text auf dem OG-Image haben? Ja, und es empfiehlt sich sogar. Text auf OG-Images ist nicht dasselbe wie Alt-Text. Facebook hat die alte "20% Text"-Regel für Anzeigen 2021 abgeschafft; organische OG-Images waren nie eingeschränkt.
Verwandte Einträge
- SVG für Designer: Skalierbare Vektorgrafiken im Web – SVG-Favicons
- Dark Mode Design: Farben und Kontraste – Dark Mode Favicons
- Landing Page Design: Conversion-optimierte Layouts – OG-Images für Landing Pages
- Bildoptimierung für Web: WebP, AVIF, Lazy Loading – OG-Image-Dateigröße optimieren
- Design Systems: Von Figma zu Code – Favicon und OG-Image als Teil der Brand-Assets
Weiterführend
- The Open Graph Protocol (2024).
- RealFaviconGenerator (2024).
- Eichorn, M. (2022). The Essential Meta Tags for Social Media. CSS-Tricks.
- Vercel (2024). OG Image Generation.
- Apple (2023). Configuring Web Applications.
