Ein Favicon einzurichten, ist einfach. Schwieriger wird es, wenn Google in den Suchergebnissen ein anderes Symbol anzeigt als vorgesehen. Genau das erleben wir auf unserer eigenen Website: Statt unseres Favicons verwendet Google offenbar das abweichende Apple-Logo. Dabei sind die Dateien korrekt eingebunden und erreichbar. Wir zeigen, wie ein sauberes Favicon-Setup für WordPress aussieht und welche Fehlerquellen Sie prüfen sollten, wenn Google nicht mitspielt.

Ein kleines Symbol, viele unterschiedliche Anforderungen: Browser, Google und Apple verwenden Favicons in verschiedenen Größen und Formaten.

Besonders anspruchsvoll wird es, wenn nicht überall dasselbe Motiv erscheinen soll. Beispielsweise ein reduziertes Favicon in den Google-Suchergebnissen und ein anders gestaltetes Icon auf dem iPhone-Homescreen.

Technisch lässt sich das einrichten. Allerdings entscheidet Google selbst, welches Favicon in den Suchergebnissen angezeigt wird. Ein korrektes HTML-Snippet ist deshalb eine wichtige Voraussetzung, aber keine Garantie.

1. Was WordPress bereits erledigt

WordPress bietet eine integrierte Funktion für Website-Icons. Sie finden diese je nach WordPress-Version und Theme unter Einstellungen → Allgemein oder in den Website-Einstellungen des Customizers.

Dort laden Sie ein quadratisches PNG mit mindestens 512 × 512 Pixeln hoch. WordPress erstellt daraus passende Größen und bindet das Website-Icon automatisch ein. Auch im Administrationsbereich und auf der Login-Seite wird es verwendet.

Für die meisten Websites reicht diese Lösung vollkommen aus.

2. Das Favicon-Snippet: Vier Zeilen für unterschiedliche Anwendungen

Wann lohnt sich ein eigenes Snippet? Wenn Sie unterschiedliche Icon-Dateien gezielt verwalten möchten – beispielsweise ein SVG für moderne Browser, ein PNG für Google und ein abweichendes Apple-Touch-Icon für den iPhone-Homescreen.

In diesem Fall sollten Sie allerdings vermeiden, dass WordPress zusätzlich widersprüchliche Favicon-Einträge ausgibt.

Für ein individuell verwaltetes Favicon-Setup empfehlen wir folgende Kombination:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

Die vier Zeilen stellen unterschiedliche Formate bereit. Browser und andere Anwendungen können daraus eine geeignete Variante auswählen.

ICO: Der klassische Favicon-Standard

<link rel="icon" href="/favicon.ico" sizes="any">

Die ICO-Datei sorgt für Kompatibilität mit älteren Browsern und Anwendungen. Sie kann mehrere Auflösungen enthalten, beispielsweise 16 × 16, 32 × 32 und 48 × 48 Pixel.

Traditionell liegt sie direkt im Stammverzeichnis der Domain unter /favicon.ico.

SVG: Scharf in modernen Browsern

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

SVG-Dateien bestehen aus Vektordaten. Dadurch bleibt das Symbol unabhängig von seiner Darstellungsgröße scharf.

Moderne Browser unterstützen SVG-Favicons. Google führt SVG allerdings nicht ausdrücklich unter den unterstützten Favicon-Formaten für die Suchergebnisse auf. Deshalb sollte zusätzlich ein PNG oder ICO vorhanden sein.

PNG: Die wichtige Variante für Google

<link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192">

PNG wird von Google unterstützt und ist deshalb eine zuverlässige Grundlage für die Favicon-Einbindung.

Google empfiehlt quadratische Favicons mit einer Auflösung von mehr als 48 × 48 Pixeln. Ein PNG mit 192 × 192 Pixeln erfüllt diese Empfehlung.

Entscheidend ist aber nicht allein die Auflösung. Google stellt Favicons sehr klein dar. Große transparente Ränder, feine Linien oder winzige Schriften können dazu führen, dass das Motiv kaum noch erkennbar ist.

Unser Tipp: Verwenden Sie ein einfaches, kontrastreiches Symbol, das die verfügbare Bildfläche möglichst gut ausnutzt.

Apple-Touch-Icon: Für den iPhone-Homescreen

<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

Dieses Icon ist für Apple-Geräte vorgesehen. Es wird unter anderem verwendet, wenn jemand eine Website zum Home-Bildschirm seines iPhones hinzufügt.

Die bewährte Größe beträgt 180 × 180 Pixel.

Das Apple-Touch-Icon darf ein anderes Motiv zeigen als das reguläre Favicon. Genau diese Unterscheidung funktioniert allerdings nicht immer so zuverlässig, wie man erwarten würde.

3. Wo wird das Snippet in WordPress eingefügt?

Die HTML-Zeilen gehören in den <head>-Bereich der Website. Dort stehen technische Informationen, die Browser und Suchmaschinen auswerten.

Je nach WordPress-Installation gibt es dafür verschiedene Möglichkeiten:

• Theme-Einstellungen: Manche Themes bieten ein Feld für zusätzlichen HTML-Code im Head-Bereich.
• Header-Code-Plugin: Ein entsprechendes Plugin kann die Einträge unabhängig vom Theme ausgeben.
• Child-Theme: Entwickler können die Einträge über den WordPress-Hook wp_head integrieren.

Die Bilddateien müssen vorher auf dem Webserver liegen. Ein Pfad wie /favicon.svg verweist auf die Adresse https://ihre-domain.de/favicon.svg.

Sie können die Dateien beispielsweise über SFTP hochladen. Liegen sie stattdessen in der WordPress-Mediathek, müssen Sie die Pfade im Snippet entsprechend anpassen.

Wichtig: Prüfen Sie vor der Einbindung den HTML-Quelltext Ihrer Website. Wenn WordPress oder ein Plugin bereits Favicons ausgibt, können zusätzliche Einträge zu widersprüchlichen Angaben führen.

4. Warum Google manchmal das falsche Favicon anzeigt

Auf unserer eigenen Website haben wir unterschiedliche Motive für das reguläre Favicon und das Apple-Touch-Icon eingerichtet.

Trotzdem zeigt Google in den Suchergebnissen das Apple-Motiv.

Wir haben deshalb die vorhandenen Einträge und Dateien überprüft. Das Ergebnis:

• Die regulären PNG- und SVG-Favicons zeigen das gewünschte Motiv.
• Das Apple-Touch-Icon enthält bewusst ein anderes Motiv.
• Die ICO-Datei ist erreichbar und zeigt das richtige Favicon.
• Google hat die vorgesehenen HTML-Einträge beim Crawling gefunden.

Damit konnten wir einige typische Fehler ausschließen. Warum Google dennoch das Apple-Motiv anzeigt, ist bislang nicht eindeutig geklärt.

Das zeigt ein grundsätzliches Problem: Eine technisch korrekte Einbindung garantiert nicht, dass Google das gewünschte Favicon auswählt.

Die folgenden Prüfungen helfen, mögliche Ursachen einzugrenzen.

5. Falsches Google-Favicon? Diese Prüfungen helfen

Schritt 1: Alle Favicon-Verweise kontrollieren

Öffnen Sie die Startseite Ihrer Website und lassen Sie sich den HTML-Quelltext anzeigen.

Suchen Sie nach rel="icon" und apple-touch-icon.

Prüfen Sie, ob die Einträge korrekt sind und ob WordPress, das Theme oder ein Plugin zusätzliche Favicons ausgibt.

Öffnen Sie anschließend jede angegebene Bilddatei direkt im Browser. Zeigen die regulären Favicons tatsächlich das gewünschte Motiv?

Prüfen Sie bei dieser Gelegenheit auch das Web-App-Manifest. Falls im HTML ein Eintrag mit rel="manifest" vorhanden ist, öffnen Sie die dort verlinkte Datei und kontrollieren Sie den Abschnitt icons.

Bei Elbnetz war dort zusätzlich das abweichende Apple-Touch-Icon als allgemeines App-Icon eingetragen. Wir haben diesen Eintrag als mögliche Fehlerquelle identifiziert und für die Bereinigung vorgesehen.

Ob das Manifest die Ursache für die Google-Darstellung ist, wissen wir allerdings nicht. Google nennt es nicht als reguläre Quelle für Favicons in den Suchergebnissen.

Schritt 2: Die Datei /favicon.ico überprüfen

Eine weitere mögliche Fehlerquelle ist die klassische Adresse /favicon.ico.

In einem unserer Kundenprojekte war das Website-Icon bereits ausgetauscht worden. Trotzdem führte diese Adresse weiterhin zu einer alten Datei.

Rufen Sie deshalb folgende URL auf:

https://ihre-domain.de/favicon.ico

Wird das richtige Symbol angezeigt?

Wenn nicht, kann eine alte Datei oder eine fehlerhafte Weiterleitung dahinterstecken.

Schritt 3: Weiterleitungen sichtbar machen

Ein Browser zeigt nicht immer, ob eine Datei über eine Weiterleitung geladen wird.

Mit einem Terminal-Befehl können Sie den technischen Ablauf kontrollieren:

curl -IL https://ihre-domain.de/favicon.ico

Die Option -I zeigt die HTTP-Antworten des Servers an. Die Option -L folgt vorhandenen Weiterleitungen.

Ein mögliches Ergebnis:

HTTP/2 301
location: /wp-content/uploads/altes-favicon.svg

HTTP/2 200
content-type: image/svg+xml

Der Statuscode 301 zeigt eine dauerhafte Weiterleitung. Die Zeile location verrät, wohin sie führt.

In diesem Beispiel wird eine alte SVG-Datei ausgeliefert, obwohl möglicherweise längst ein neues Favicon hinterlegt wurde.

Der Vorteil des Befehls: Sie erkennen nicht nur, ob die Adresse erreichbar ist, sondern auch, ob eine Weiterleitung beteiligt ist und welcher Dateityp am Ende ausgeliefert wird.

Bei Elbnetz liefert dieser Test direkt den Statuscode 200 und den Dateityp image/x-icon. Eine fehlerhafte Weiterleitung konnten wir damit ausschließen.

Der Befehl zeigt allerdings nicht das Bildmotiv selbst. Außerdem unterstützen nicht alle Server HEAD-Anfragen zuverlässig.

Schritt 4: Fehlerhafte Weiterleitungen korrigieren

Falls eine Weiterleitung auf eine veraltete Datei führt, muss zunächst geklärt werden, wo sie eingerichtet wurde.

Mögliche Ursachen sind Weiterleitungs-Plugins, Webserver-Regeln oder ein CDN.

In unserem Kundenprojekt konnten wir das Problem über Rank Math lösen.

Wichtig: Google verlangt nicht, dass ein Favicon zwingend unter /favicon.ico liegt. Eine funktionierende Datei unter dieser Adresse ist aber weiterhin eine sinnvolle Kompatibilitätsmaßnahme.

Schritt 5: Die Google Search Console nutzen

Wenn die technischen Voraussetzungen stimmen, können Sie in der Google Search Console prüfen, welchen HTML-Code Google beim letzten Crawling Ihrer Startseite erfasst hat.

Öffnen Sie dazu die URL-Prüfung, geben Sie die Startseitenadresse ein und wählen Sie unter den Informationen zur Seitenindexierung die Funktion „Gecrawlte Seite ansehen“.

Im HTML-Quelltext können Sie nach den Favicon-Verweisen suchen.

Sind die aktuellen Einträge bereits vorhanden, hat Google sie zumindest beim betreffenden Crawling erfasst.

Anschließend können Sie eine erneute Indexierung der Startseite anfordern.

Geduld ist trotzdem notwendig: Google aktualisiert Favicons nicht zwingend sofort. Auch eine erneute Indexierungsanfrage garantiert keine unmittelbare Änderung in den Suchergebnissen.

6. Unterschiedliche Favicons für Google und Apple: Unsere Empfehlung

Technisch können Sie für Browser und Apple unterschiedliche Motive verwenden.

Wenn Ihnen eine möglichst einheitliche Darstellung wichtig ist, empfehlen wir allerdings, für PNG, SVG, ICO und Apple-Touch-Icon dasselbe Grundmotiv zu verwenden.

Damit vermeiden Sie, dass unterschiedliche Varianten zu einem uneinheitlichen Markenauftritt führen.

Wenn Sie bewusst verschiedene Motive einsetzen möchten, sollten Sie alle Favicon-Verweise, Bilddateien und gegebenenfalls das Web-App-Manifest sorgfältig prüfen.

Ein individuelles HTML-Snippet ermöglicht diese Trennung. Es kann Google aber nicht zwingen, eine bestimmte Datei für die Suchergebnisse zu verwenden.

7. Fazit: Das richtige Favicon-Setup ist nur die halbe Miete

Für die meisten WordPress-Websites reicht das integrierte Website-Icon aus.

Wer unterschiedliche Formate oder Motive gezielt einsetzen möchte, kann ein individuelles Favicon-Snippet verwenden.

Unsere wichtigste Erkenntnis: Wenn Google das falsche Favicon anzeigt, sollten Sie nicht sofort neue Bilddateien erstellen. Prüfen Sie zuerst die HTML-Verweise, die tatsächlichen Bilddateien, mögliche Weiterleitungen und gegebenenfalls das Web-App-Manifest.

Und selbst wenn technisch alles korrekt ist, bleibt eine Einschränkung: Welche Favicon-Variante Google letztlich in den Suchergebnissen anzeigt, lässt sich nicht vollständig kontrollieren.

Weitere Informationen finden Sie in den offiziellen Favicon-Richtlinien von Google.

Hinweis: Dieser Beitrag wurde im Oktober 2026 technisch aktualisiert und mit Unterstützung von KI-Tools redaktionell überarbeitet.