Favicon und OG-Image: kleine Details mit grosser Wirkung auf Klicks und Vertrauen

Zwei kleine Bilddateien entscheiden oft mit darueber, ob jemand auf deinen Link klickt oder weiterscrollt: das Favicon (das winzige Icon im Browser-Tab) und das OG-Image (das Vorschaubild, das erscheint, wenn dein Link in WhatsApp, LinkedIn, Slack oder Facebook geteilt wird). Beide sind technisch trivial einzurichten - und werden trotzdem erstaunlich oft vergessen oder lieblos gemacht. Dieser Artikel erklaert, warum sie wichtig sind, wann sie wirklich etwas bringen und wie du sie richtig umsetzt.

Warum diese Details ueberhaupt zaehlen

Menschen treffen Klick-Entscheidungen in Sekundenbruchteilen. Ein generisches Welt-Symbol im Browser-Tab oder eine kaputte, leere Linkvorschau signalisiert unbewusst: Hier hat sich jemand keine Muehe gegeben. Umgekehrt vermittelt ein sauberes Icon und eine ordentliche Vorschau Sorgfalt und Verlaesslichkeit - genau die Eigenschaften, die ein potenzieller Kunde von dir erwartet.

Konkret wirken die beiden so:

Favicon: Macht deinen Tab unter vielen offenen Tabs wiedererkennbar, taucht in Lesezeichen und im Browser-Verlauf auf und erscheint teils in den Google-Suchergebnissen neben deiner URL.
OG-Image: Bestimmt, wie professionell dein Link aussieht, sobald ihn jemand teilt. Eine attraktive Vorschau wird messbar haeufiger geklickt als ein nackter Link ohne Bild.

Ehrlich gesagt: Diese Elemente machen aus einer schlechten Seite keine gute. Aber sie verschenken bei einer guten Seite unnoetig Klicks und Vertrauen, wenn sie fehlen. Sie gehoeren zur Grundhygiene jeder professionellen Webseite.

Das Favicon richtig umsetzen

Ein Favicon ist heute mehr als die alte favicon.ico. Verschiedene Geraete und Kontexte erwarten unterschiedliche Groessen. Sinnvoll ist ein kleines Set:

Eine SVG-Version als skalierbares Master-Icon fuer moderne Browser.
PNG-Dateien in 32x32 und 16x16 Pixel fuer den Tab.
Ein Apple-Touch-Icon mit 180x180 Pixel fuer den Homescreen auf iPhones.
Optional ein site.webmanifest fuer Android-Geraete.

Wichtig ist, dass das Motiv auch bei 16 Pixeln noch erkennbar ist. Ein komplettes Logo mit Schriftzug funktioniert in dieser Groesse nie - nimm stattdessen ein klares Symbol, einen Buchstaben oder ein vereinfachtes Bildzeichen mit gutem Kontrast. Teste es auf hellem und dunklem Tab-Hintergrund.

Das OG-Image, das geteilt wird

Das OG-Image steckt im Quelltext deiner Seite als Meta-Tag (og:image) und wird von sozialen Netzwerken ausgelesen. Bewaehrt hat sich:

Format 1200x630 Pixel (Seitenverhaeltnis rund 1,91:1) - das ist der gemeinsame Nenner fast aller Plattformen.
Eine absolute URL zur Bilddatei, nicht nur ein relativer Pfad, sonst zeigen manche Dienste nichts an.
Lesbarer Text und Logo mit genug Rand, weil einige Plattformen die Raender beschneiden.
Ergaenzend die Tags og:title und og:description, damit Titel und Beschreibung der Vorschau stimmen.

Ein haeufiger Stolperstein: Plattformen cachen die Vorschau. Wenn du das Bild aenderst, siehst du oft noch die alte Version. Mit Tools wie dem Facebook Sharing Debugger oder dem LinkedIn Post Inspector kannst du den Cache gezielt erneuern und gleichzeitig pruefen, ob alle Tags korrekt erkannt werden.

Ein kurzer Praxis-Check

So pruefst du in wenigen Minuten, ob deine Seite sauber aufgestellt ist:

Oeffne deine Seite in einem Browser-Tab - erscheint dein eigenes Icon oder ein graues Standard-Symbol?
Teile deine Startseite testweise in einem Messenger an dich selbst - kommt eine vollstaendige Vorschau mit Bild, Titel und Text?
Schau dir Unterseiten an - idealerweise haben wichtige Seiten ein eigenes, passendes OG-Image statt ueberall desselben.
Pruefe die Vorschau auf dem Smartphone, nicht nur am Desktop.

Wann sich der Aufwand lohnt - und wann nicht

Fuer jede oeffentliche Webseite, die Kunden gewinnen soll, lohnt sich der Aufwand fast immer, denn er ist gering und einmalig. Anders sieht es bei einer reinen internen Anwendung oder einem Tool hinter dem Login aus, das niemals geteilt wird - dort ist ein aufwendiges OG-Image schlicht ueberfluessig. Ein simples Favicon schadet trotzdem nie.

Bei uns gehoeren beide Elemente zur Standard-Auslieferung jedes Projekts. Wir betreiben sieben eigene Marken in Produktion - von einem Barrierefreiheits-Scanner ueber ein Produktportal mit ueber 177.000 Eintraegen bis zu einer Marine-SaaS. Aus diesem laufenden Betrieb wissen wir, wie unterschiedlich Plattformen Vorschauen rendern und wo die typischen Cache- und Format-Fallen liegen. Genau diese kleinen Details machen am Ende den Unterschied zwischen einer Seite, die professionell wirkt, und einer, die fast professionell wirkt.

Technische Umsetzung: Schritt für Schritt ins HTML

Das Favicon ist heute mehr als ein einfacher .ico-File. Moderne Browser erwarten mehrere Formate und Größen: favicon.ico (16x16, 32x32) – Fallback für ältere Browser, apple-touch-icon.png (180x180) – Für iOS, wenn deine Seite als App zum Home-Screen hinzugefügt wird, und Manifest.json mit icon-Array – Für Android und Progressive Web Apps.

Im HTML-Head brauchst du nur diese zwei Zeilen (der Rest ist optional). Das OG-Image ist ein Meta-Tag, das vor der öffnenden Body-Tag ins Head gehört. Das Format 1200x630 Pixel ist der Standard. Zu kleine oder zu große Bilder werden von Plattformen verzerrt oder ignoriert. Test deine OG-Tags mit dem Facebook Sharing Debugger oder LinkedIn Post Inspector – beide sind kostenlos und zeigen dir, ob die Plattformen dein Bild richtig sehen.

Design-Tipps für hohe Erkennbarkeit

Das Favicon muss auch bei 16 Pixeln noch erkennbar sein. Das heißt: Kein komplexes Logo mit Schriftzug. Stattdessen ein klares Symbol – ein Buchstabe, ein Icon, ein einfaches Bildzeichen. Guter Kontrast ist entscheidend; teste auf hellem und dunklem Untergrund.

Beim OG-Image brauchst du Text und Bild zusammen. Der Text sollte gut lesbar sein (mindestens 24pt für den Titel), und das Bild sollte sich von anderen Social-Media-Kacheln abheben. Helles Vorschaubild gegen dunklen Text oder umgekehrt – High Contrast. Wenn du 100 solcher Kacheln nebeneinander siehst, sollte deins immer noch auffallen.

Profis nutzen Tools wie Figma oder Canva, um OG-Images zu erstellen. Es braucht keine Designausbildung – oft reicht eine einfache Vorlage mit Farben, Icon und Textzug. Ein fertig designtes Bild (.png oder .jpg) kannst du dann einfach übers CMS hochladen und im Meta-Tag verlinken.