Warum zeigt Google mein Favicon nicht an?

Die häufigsten Gründe: Das Icon ist nicht quadratisch, seine Kantenlänge ist kein Vielfaches von 48 Pixeln, die Datei ist per robots.txt gesperrt, oder Google hat die Startseite seit der Einführung noch nicht neu erfasst. Nach einer Änderung dauert es regelmäßig mehrere Wochen.

Reicht eine einzige Datei?

Für den Browser-Tab ja. Sobald jemand die Seite auf dem Startbildschirm eines Handys ablegt oder als Web-App installiert, braucht es größere Fassungen. Fünf Dateien decken alle üblichen Fälle ab und sind in einem Durchgang erzeugt.

Muss die favicon.ico im Wurzelverzeichnis liegen?

Nicht zwingend, wenn Sie alle Icons per link-Element angeben. Trotzdem sinnvoll: Manche Feedleser, ältere Browser und Vorschaudienste fragen genau diese Adresse ab, ohne ins HTML zu schauen.

Wie erzwinge ich, dass der Browser ein geändertes Favicon lädt?

Favicons werden hartnäckig zwischengespeichert. Ein Anhängsel an der Adresse hilft, etwa /favicon-32.png?v=2. Ändern Sie dabei aber nicht die eigentliche Adresse der Datei, sonst beginnt bei Google die Wartezeit von vorn.

Favicon richtig einbinden: Größen, HTML und Googles Anforderungen

Das Favicon ist das kleinste Element einer Website und eines der sichtbarsten. Es steht im Browser-Tab, im Lesezeichenmenü, im Verlauf, auf dem Startbildschirm eines Handys und in den mobilen Suchergebnissen von Google. Wer keins hinterlegt, bekommt dort einen grauen Platzhalter – neben Wettbewerbern, die einen haben.

Die Dateien, die Sie brauchen

Es kursieren Listen mit zwanzig Favicon-Größen. Die stammen aus einer Zeit, in der jedes Gerät sein eigenes Format wollte. Heute reichen fünf Dateien:

Datei	Größe	Wofür
`favicon.ico`	32 × 32	Direkte Abfrage durch Browser und Programme
`favicon-32.png`	32 × 32	Browser-Tab auf dem Desktop
`apple-touch-icon.png`	180 × 180	Startbildschirm auf iPhone und iPad
`icon-192.png`	192 × 192	Android, Web-App-Manifest, Google-Suche
`icon-512.png`	512 × 512	Installierte Web-App, Startbild

Alle fünf erzeugt der Favicon-Generator in einem Durchgang aus einem einzigen Bild.

Das HTML

Diese fünf Zeilen gehören in den <head> jeder Seite:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/icon-512.png">

Wer ein SVG-Logo hat, kann zusätzlich eine Vektorfassung anbieten. Moderne Browser bevorzugen sie dann automatisch:

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

Was Google verlangt

Google stellt an das Favicon in den Suchergebnissen eigene Bedingungen, die über das hinausgehen, was ein Browser akzeptiert:

Quadratisch, und die Kantenlänge muss ein Vielfaches von 48 Pixeln sein. Deshalb die 192er-Datei: 192 geteilt durch 48 ergibt 4.
Die Datei muss für den Googlebot erreichbar sein. Ein Disallow in der robots.txt, das versehentlich das Bildverzeichnis trifft, macht das Icon unsichtbar.
Die Adresse muss stabil bleiben. Google merkt sich, wo das Icon liegt. Wandert es bei jedem Relaunch woandershin, verschwindet es aus den Ergebnissen, bis die Startseite neu erfasst wurde.
Das Icon muss zur Startseite der Domain gehören. Google zeigt in den Ergebnissen ein Icon pro Website, nicht pro Unterseite.

Rechnen Sie nach einer Änderung mit mehreren Wochen, bis das neue Icon in der Suche auftaucht. Das lässt sich nicht beschleunigen.

Gestaltung: die Regel für 32 Pixel

Ein Favicon ist ungefähr so groß wie ein Textcursor. Auf dieser Fläche funktioniert kein Schriftzug, kein Slogan und keine Feinzeichnung. Was funktioniert:

Ein einzelnes Zeichen aus dem Firmennamen, kräftig gesetzt
Die Bildmarke des Logos ohne den Schriftteil
Eine reduzierte Form – ein Kreis, ein Dreieck, ein Symbol mit zwei Farben

Ein guter Test: Verkleinern Sie Ihren Entwurf auf 32 Pixel und schauen Sie ihn aus einem Meter Entfernung an. Was Sie dann nicht mehr unterscheiden können, gehört nicht ins Favicon.

Der dunkle Modus

Ein schwarzes Logo mit transparentem Hintergrund verschwindet in einem dunklen Browser-Fenster. Zwei Auswege: eine Füllfarbe hinterlegen, oder eine Form wählen, die auf hellem und dunklem Grund gleichermaßen erkennbar ist. Der Favicon-Generator bietet die Füllfarbe direkt an.

Wer prüfen will, ob die gewählten Farben überhaupt genug Unterschied haben, nimmt Farbpalette und Kontrastprüfer.

Das Web-App-Manifest

Wenn die Seite auf einem Handy zum Startbildschirm hinzugefügt werden soll, gehört zusätzlich eine Manifestdatei dazu:

{
  "name": "Name der Website",
  "short_name": "Kurzname",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#08093f",
  "background_color": "#ffffff",
  "display": "standalone"
}

Verlinkt wird sie mit <link rel="manifest" href="/site.webmanifest">. Der short_name erscheint unter dem Symbol auf dem Startbildschirm und sollte höchstens zwölf Zeichen haben, sonst kürzt das System ihn ab.

Häufige Fehler

Das Icon ist rechteckig. Der Browser quetscht es, Google ignoriert es.
Zu viel Detail. Auf 32 Pixel wird aus einem feinen Logo ein grauer Fleck.
Die Adresse wechselt bei jedem Relaunch. Jedes Mal beginnt die Wartezeit bei Google von vorn.
Nur eine Größe. Auf dem iPhone-Startbildschirm erscheint dann ein hochskaliertes, unscharfes Bild.

Wie das Icon in den größeren Zusammenhang der Startseiten-Einrichtung passt, steht unter Website bei Google anmelden. Und wenn das Ausgangsbild erst noch quadratisch werden muss, hilft Bilder zuschneiden.

Favicon richtig einbinden