Favicon und Open Graph: kompletter SEO-Leitfaden

So fügen Sie ein Favicon und ein Open-Graph-Bild hinzu und korrigieren beides – für besseres SEO

Ihre Website ist in den Suchmaschinen gut platziert, zeigt in Browsern aber ein generisches Icon an – oder ein falsches Bild, sobald eine Seite auf Facebook, LinkedIn, WhatsApp oder anderen Plattformen geteilt wird?

Diese beiden Elemente werden beim Erstellen einer Website oft vernachlässigt: das Favicon und das Open-Graph-Bild. Dabei prägen sie direkt, wie Ihre Marke wirkt und wie Ihre Website erkannt wird, wenn Nutzende ihr in unterschiedlichen Umgebungen begegnen.

In diesem Leitfaden sehen wir, wie Sie ein Favicon hinzufügen, wie Sie ein Favicon ersetzen, das nicht funktioniert, wie Sie aus einem Bild automatisch mehrere Größen erzeugen und wie Sie anschließend og:image richtig einrichten, damit Ihre Seiten beim Teilen in sozialen Netzwerken und Messengern korrekt dargestellt werden.

Inhaltsverzeichnis

Was ist ein Favicon?
Warum ist das Favicon für SEO wichtig?
Wie erstellen Sie ein Favicon aus einem Bild?
Alle Größen mit favicon.io erstellen
So binden Sie ein Favicon in eine HTML-Website ein
Favicon in WordPress hinzufügen
Favicon in Shopify hinzufügen
Warum wird mein Favicon nicht angezeigt?
Was ist ein Open-Graph-Bild?
Wie fügen Sie ein og:image hinzu?
Welche Größe eignet sich für ein Open-Graph-Bild?
Vollständiges Beispiel für Open-Graph-Tags
Warum erscheint das Bild in sozialen Netzwerken nicht richtig?
Abschließende SEO-Checkliste
FAQ

Was ist ein Favicon?

Das Favicon ist das kleine Icon, das zu einer Website gehört. Es kann im Browser-Tab, in den Lesezeichen, im Verlauf, in Verknüpfungen und in manchen Fällen neben dem Ergebnis einer Website in der Google Search erscheinen.

Meist handelt es sich um eine vereinfachte Version des Logos oder um ein Symbol, an dem sich Ihre Marke schnell erkennen lässt.

Ein Favicon wirkt wie ein grafisches Detail, trägt aber zur Markenwiedererkennung und zu einer stimmigen Nutzererfahrung bei.

Wichtig zu wissen: Google kann das Favicon einer Website in den Suchergebnissen anzeigen, doch diese Anzeige ist nie garantiert – auch dann nicht, wenn alle technischen Empfehlungen eingehalten werden.

Warum ist das Favicon für SEO wichtig?

Hier ist Genauigkeit gefragt: Das Favicon ist kein SEO-Rankingfaktor, der sich mit Inhalten, Links oder technischer Performance vergleichen ließe. Installieren Sie es also nicht in der Erwartung, dass eine Seite dadurch automatisch in Google aufsteigt.

Dafür trägt das Favicon zur Darstellung Ihrer Website in den Suchergebnissen und zur visuellen Wiedererkennung Ihrer Marke bei. Ein stimmiger Markenauftritt kann außerdem dazu beitragen, dass Nutzende Ihrer Website vertrauen und sie wiedererkennen.

Google gibt an, dass ein Favicon, das in den Suchergebnissen verwendet werden soll, quadratisch sein muss, mit einem Seitenverhältnis von 1:1. Die aktuelle Dokumentation empfiehlt außerdem ein Bild von mehr als 48 × 48 Pixeln, damit es auf verschiedenen Darstellungsflächen passend aussieht.

Format Quadratisch, Seitenverhältnis 1:1 Mindestgröße laut Google 8 × 8 px Empfohlene Größe Mehr als 48 × 48 px URL Stabil und erreichbar Crawling Die Datei muss für Crawler zugänglich sein Design Wiedererkennbar und typisch für die Marke

Wie erstellen Sie ein Favicon aus einem Bild?

Wenn Sie bereits ein Logo besitzen, müssen Sie Ihren Markenauftritt in der Regel nicht neu erfinden. Sie können von Ihrem PNG-Logo, einem JPG oder einem anderen geeigneten Bild ausgehen und daraus die nötigen Icons erzeugen.

Am wichtigsten ist, mit einem ausreichend großen und möglichst quadratischen Bild zu beginnen.

Muss Ihr Bild quadratisch sein?

Ja, das wird dringend empfohlen. Ein Favicon wird auf extrem kleiner Fläche angezeigt. Ein breites Logo mit viel Text kann daher unlesbar werden, wenn es auf wenige Dutzend Pixel verkleinert wird.

Beispiel

Breites Logo: in 16 × 16 px schwer zu erkennen.

Vereinfachtes Symbol: für ein kleines Icon deutlich wirksamer.

Enthält Ihr Logo Ihren vollständigen Namen, ist es unter Umständen besser, eine vereinfachte Version zu erstellen, die nur Ihr Symbol, Ihren Anfangsbuchstaben oder ein leicht erkennbares Grafikelement verwendet.

Alle Favicon-Größen mit favicon.io erstellen

Eine einfache Lösung, um mehrere Formate zu erzeugen, ist favicon.io .

Der Dienst erzeugt aus einem Bild automatisch eine Reihe von Dateien für die verschiedenen Einsatzzwecke einer Website.

Sie erhalten unter anderem eine Datei favicon.ico, PNG-Dateien, ein Apple Touch Icon, Android-Icons und eine Manifest-Datei.

Schritt 1: Logo vorbereiten

Bereiten Sie Ihr Logo oder Ihr Symbol vor.
Bevorzugen Sie ein quadratisches Bild.
Verwenden Sie ein ausreichend großes Bild.
Vermeiden Sie kleine Texte, die schwer lesbar sind.
Lassen Sie genügend Platz um das Symbol.

Schritt 2: Generator öffnen

Öffnen Sie den Bildkonverter von favicon.io .

Laden Sie anschließend Ihr Bild hoch. Das Tool wandelt Ihre Datei automatisch in mehrere Icons um.

Schritt 3: Paket herunterladen

Laden Sie das erzeugte Paket herunter. Je nach angebotener Konfiguration finden Sie mehrere Dateien für die verschiedenen Einsatzzwecke: Browser, Mobilgeräte und Web-Apps.

favicon.ico Klassisches Favicon favicon-16x16.png Kleine Darstellungsflächen favicon-32x32.png Browser und Bildschirme mit hoher Pixeldichte apple-touch-icon.png Verknüpfungen auf iPhone und iPad android-chrome-192x192.png Android-/PWA-Icon android-chrome-512x512.png Großformat für Android / PWA site.webmanifest Metadaten einer Web-App

Welche Größen genau nötig sind, hängt allerdings von Ihrem Einsatz ab. Für eine einfache Präsentationswebsite müssen Sie nicht zwingend alle PWA-Funktionen einrichten.

Wie binden Sie ein Favicon in eine HTML-Website ein?

Bei einer klassischen HTML-Website gehören die Favicon-Tags in den Abschnitt <head> des HTML-Dokuments.

<head> <meta charset="UTF-8"> <title>Meine Website</title> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> </head>

Sie können auch eine klassische ICO-Datei verwenden:

Google dokumentiert ausdrücklich die Verwendung eines Tags <link rel="icon"> im Header der Startseite.

Wie fügen Sie ein Favicon in WordPress hinzu?

Bei WordPress müssen Sie in der Regel nicht direkt die HTML-Datei des Themes bearbeiten.

In vielen aktuellen WordPress-Installationen können Sie über die Optionen zur Anpassung oder zur Website-Identität das Icon der Website festlegen.

Je nach Theme, Page-Builder oder Konfiguration kann die Stelle anders aussehen.

Achtung: Vermeiden Sie es, mehrere Systeme zu kombinieren, die jeweils ihr eigenes Favicon einfügen. Das kann widersprüchliche oder überflüssige Verweise erzeugen.

Wie fügen Sie ein Favicon in Shopify hinzu?

Bei Shopify wird das Favicon in der Regel über die Theme-Einstellungen festgelegt.

Suchen Sie im Theme-Editor nach den Einstellungen zum Website-Icon, zum Favicon oder zur Markenidentität.

Wenn Sie den Code des Themes direkt ändern, prüfen Sie immer, dass Ihre Änderung bei einem Theme-Wechsel oder -Update nicht überschrieben wird.

Warum wird mein Favicon nicht angezeigt?

Ein korrekt erstelltes Favicon erscheint unter Umständen trotzdem nicht sofort. Die Ursache kann im Browser, im Cache, im Dateipfad, in der Konfiguration der Website oder im Crawling der Suchmaschinen liegen.

1. Es wird der falsche Pfad verwendet

Prüfen Sie, ob die URL im Tag tatsächlich zur Datei passt.

Liegt die Datei tatsächlich unter /favicon.ico, funktioniert diese Angabe nicht.

2. Die Datei ist nicht erreichbar

Rufen Sie die URL des Favicons direkt in Ihrem Browser auf.

Zum Beispiel:

https://www.exemple.com/favicon.ico

Liefert der Server einen 404-Fehler, eine problematische Weiterleitung oder einen anderen Fehler, beheben Sie zuerst dieses Problem.

3. Der Browser nutzt noch das alte Favicon

Favicons werden stark zwischengespeichert. Probieren Sie nach einer Änderung ein privates Fenster aus oder leeren Sie den Browser-Cache.

4. Google hat das Favicon noch nicht aktualisiert

Unterscheiden Sie die Anzeige in Ihrem Browser von der Anzeige in Google Search.

Auch nach einer korrekten Änderung muss Google Ihre Seite erneut crawlen und die neue Information verarbeiten. Das kann mehrere Tage dauern, mitunter länger.

5. Das Favicon ist durch Crawling-Regeln blockiert

Google gibt an, dass die Startseite und die Favicon-Datei von seinen Crawlern abgerufen werden können müssen.

6. Mehrere Favicons widersprechen sich

Prüfen Sie den Quellcode Ihrer Seite und suchen Sie nach:

rel="icon"

Enthält Ihre Website viele verschiedene Angaben, finden Sie heraus, welche tatsächlich verwendet wird, und entfernen Sie die alten, überflüssigen Verweise.

Was ist ein Open-Graph-Bild?

Open Graph ist ein System von Metadaten, mit dem sich steuern lässt, wie eine Webseite dargestellt wird, wenn sie auf verschiedenen Plattformen geteilt wird.

Es kommt insbesondere bei Tags wie og:title, og:description, og:url und og:image zum Einsatz.

Das Ziel ist einfach: Wenn jemand Ihre Seite teilt, soll eine Plattform nicht automatisch ein beliebiges Bild aus Ihrem Inhalt auswählen.

Ohne Open Graph: Die Plattform wählt unter Umständen ein Bild aus, das Sie nicht hervorheben möchten.

Mit Open Graph: Sie legen genau fest, welches Bild, welcher Titel und welche Beschreibung die Seite darstellen sollen.

Wie fügen Sie Ihrer Website ein og:image hinzu?

Die Open-Graph-Tags gehören in den <head> der Seite.

Hier das Minimalbeispiel:

Wichtig ist, dass og:image in der Regel eine öffentlich erreichbare absolute URL verwendet.

Besser ist also:

https://www.exemple.com/images/og-image.jpg

statt eines relativen Verweises:

/images/og-image.jpg

Welche Größe eignet sich für ein Open-Graph-Bild?

Eine häufig verwendete Größe für Open-Graph-Bilder ist 1200 × 630 Pixel.

Das entspricht einem Seitenverhältnis von etwa 1,91:1, das sich besonders gut für Linkvorschauen auf vielen Plattformen eignet.

Empfohlenes Format 1200 × 630 px Seitenverhältnis Etwa 1,91:1 Dateiformat JPG oder PNG, je nach Inhalt URL HTTPS und öffentlich erreichbar Text Auch auf dem Smartphone lesbar

Die Open-Graph-Empfehlungen sind jedoch nicht mit einer allgemeinen Vorgabe des Protokolls zu verwechseln. Das Open-Graph-Protokoll sieht unter anderem ergänzende Angaben wie Breite, Höhe, Typ und Alternativtext des Bildes vor.

Vollständiges Beispiel für eine Open-Graph-Konfiguration

Hier eine vollständigere Konfiguration, die Sie für eine Seite anpassen können.

Das Open-Graph-Protokoll definiert unter anderem og:image und seine strukturierten Eigenschaften wie og:image:width, og:image:height und og:image:alt.

Open Graph und SEO: Wo liegt der Unterschied?

Ein häufiger Fehler besteht darin, Open Graph für einen Google-Rankingfaktor zu halten.

Das ist nicht seine Hauptaufgabe. Open-Graph-Tags dienen vor allem dazu, die Darstellung Ihrer URL zu steuern, wenn sie auf kompatiblen Plattformen geteilt wird.

Dennoch bleiben sie in einer umfassenden SEO-Strategie wichtig, denn eine Seite, die gut präsentiert wird, lässt sich leichter erkennen, teilen und über verschiedene Kanäle zur Kundengewinnung nutzen.

Ihre Strategie sollte daher unterscheiden:

Title Verständnis und Darstellung der Seite in Suchmaschinen Meta description Darstellung des Inhalts in den Suchergebnissen Canonical Kanonische URL einer Seite angeben Favicon Visuelle Erkennung der Website og:title Titel beim Teilen og:description Beschreibung beim Teilen og:image Bild in der Vorschau in sozialen Netzwerken

Warum erscheint mein Bild in sozialen Netzwerken nicht richtig?

Sie haben ein Open-Graph-Bild hinzugefügt, aber Facebook, LinkedIn oder ein Messenger zeigt weiterhin ein altes Bild an?

Dafür gibt es mehrere mögliche Gründe.

Der Cache der Plattform

Soziale Plattformen können eine alte Version der Metadaten Ihrer Seite speichern. Wenn Sie Ihr Bild ändern, ändert sich die Vorschau also nicht zwingend sofort.

Das Bild ist nicht öffentlich erreichbar

Das Bild muss ohne Anmeldung abrufbar sein. Ein Bild hinter einer Authentifizierung, einer Servereinschränkung oder einem überzogenen Schutz kann verhindern, dass die Plattform es abruft.

Die URL des Bildes ist falsch

Prüfen Sie die URL in:

Kopieren Sie diese URL in Ihren Browser und prüfen Sie, ob das Bild tatsächlich erreichbar ist.

Das Bild entspricht nicht dem erwarteten Seitenverhältnis

Selbst ein technisch gültiges Bild kann von einer Plattform zugeschnitten werden. Platzieren Sie wichtige Elemente daher nicht direkt am Bildrand.

Tipp: Lassen Sie rund um Logo, Titel und wichtige Elemente etwas Abstand, damit Ihre Gestaltung auch bei einem Zuschnitt lesbar bleibt.

Favicon und Open-Graph-Bild: Verwechseln Sie sie nicht

Diese beiden Bilder haben völlig unterschiedliche Aufgaben.

Sehr kleines Icon Großes Vorschaubild Identifiziert die Website Stellt eine Seite vor Browser-Tab Teilen in sozialen Netzwerken Lesezeichen Linkvorschau Google kann es in der Suche anzeigen Wird von Plattformen genutzt, die Open Graph unterstützen

SEO-Checkliste: Favicon und Open Graph

Prüfen Sie vor dem Abschluss Ihrer Optimierung die folgenden Punkte:

✓ Das Favicon ist quadratisch.
✓ Das Favicon steht klar für Ihre Marke.
✓ Die Favicon-Datei ist öffentlich erreichbar.
✓ Die URL des Favicons ist stabil.
✓ Die Datei ist nicht durch Crawling-Regeln blockiert.
✓ Der Tag rel="icon" ist vorhanden.
✓ Alte, überflüssige Verweise wurden entfernt.
✓ Bei Bedarf ist eine Apple-Touch-Icon-Version vorgesehen.
✓ Das Open-Graph-Bild ist vorhanden.
✓ og:title ist korrekt ausgefüllt.
✓ og:description ist korrekt ausgefüllt.
✓ og:url entspricht der kanonischen URL der Seite.
✓ og:image verwendet eine öffentliche URL.
✓ Das Open-Graph-Bild ist ausreichend groß und gut lesbar.
✓ og:image:alt beschreibt das Bild korrekt.
✓ Die Vorschauen wurden nach der Änderung getestet.

FAQ: Favicon, Open Graph und SEO

Welche Größe ist für ein Favicon am besten?

Google verlangt derzeit ein quadratisches Favicon von mindestens 8 × 8 Pixeln und empfiehlt eine Größe von mehr als 48 × 48 Pixeln, damit es auf verschiedenen Darstellungsflächen passend aussieht. Für eine moderne Umsetzung können mehrere Größen für die verschiedenen Einsatzzwecke erzeugt werden.

Wie groß ist ein Open-Graph-Bild?

1200 × 630 Pixel ist eine praktische und sehr häufig verwendete Größe für Vorschauen in sozialen Netzwerken. Berücksichtigen Sie jedoch die Vorgaben der jeweiligen Plattform.

Verbessert das Favicon direkt das Google-Ranking?

Nein. Das Favicon ist kein Hebel für das Ranking, der sich mit Inhaltsqualität, Relevanz oder technischer Performance vergleichen ließe. Es verbessert aber die visuelle Identität der Website und kann in den Google-Ergebnissen angezeigt werden, wenn die Voraussetzungen erfüllt sind.

Warum funktioniert mein Favicon in Chrome, aber nicht in Google?

Browser und Google gehen nicht genau gleich vor. Google muss Ihre Seite und Ihr Favicon crawlen können und die Information anschließend verarbeiten. Die Anzeige in Google Search kann daher dauern und ist nicht garantiert.

Soll ich für Favicon und og:image dieselbe Datei verwenden?

Nein. Das Favicon ist ein kleines Erkennungs-Icon, das Open-Graph-Bild dagegen ein viel größeres Bild, das eine Seite beim Teilen darstellen soll.

Kann eine Website mehrere Favicons haben?

In Google Search ist das Favicon dem Hostnamen der Website zugeordnet. Eine Domain und eine Subdomain können daher unterschiedliche Favicons haben, ein Unterverzeichnis gilt für diese Regel dagegen nicht als eigene Website.

Fazit: Kleine Dateien, die einen großen Unterschied machen können

SEO für eine Website besteht nicht nur aus Keywords, H1-Tags oder redaktionellen Inhalten. Auch technische und visuelle Details tragen zur Gesamtqualität einer Website bei.

Ein korrekt eingerichtetes Favicon stärkt die Wiedererkennung Ihrer Marke, und ein gut konfiguriertes Open-Graph-Bild gibt Ihnen mehr Kontrolle darüber, wie Ihre Seiten beim Teilen dargestellt werden.

Nehmen Sie sich also ein paar Minuten, um diese beiden Elemente auf Ihrer Website zu prüfen. Eine kleine Korrektur im <head> kann genügen, um ein Problem zu beheben, das seit Monaten besteht.