Favicon: welche Grössen eine Website braucht und warum Google es zeigt

Ein Favicon ist das kleine Symbol einer Website, das im Browser-Tab, in Lesezeichen, auf dem Home-Bildschirm des Handys und neben jedem Google-Suchergebnis erscheint. Eine moderne Website braucht dafür nicht eine Datei, sondern einen kleinen Satz: eine favicon.ico als Fallback, eine SVG- oder grosse PNG-Datei, ein Apple Touch Icon mit 180 × 180 Pixeln und zwei Manifest-Icons mit 192 und 512 Pixeln. Google selbst verlangt ein quadratisches Bild von mindestens 8 × 8 Pixeln und empfiehlt, deutlich grösser zu gehen.

Das klingt nach einem Detail, und für die meisten Websites ist es das auch. Trotzdem fällt ein fehlendes oder unscharfes Favicon auf, gerade in der mobilen Google-Suche, wo es direkt neben dem Namen der Website steht. Ein graues Standardsymbol statt des Logos wirkt unfertig, und zwar genau in dem Moment, in dem jemand entscheidet, auf welches Ergebnis er klickt.

Wo das Favicon überall erscheint

Weil diese Orte so verschieden sind, reicht eine einzelne kleine Datei nicht mehr. Ein 16-Pixel-Icon wird auf dem Home-Bildschirm unscharf hochgerechnet, ein grosses Logo mit feiner Schrift ist im Tab nicht lesbar.

Der vollständige Satz: Formate und Grössen

Ein praxistauglicher Satz für eine heutige Website sieht so aus:

Im HTML-Kopf der Seite sieht das vereinfacht so aus:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/icon.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Wer mit Next.js arbeitet, muss diese Tags nicht von Hand schreiben. Dateien wie favicon.ico, icon.png oder apple-icon.png im App-Verzeichnis oder ein icons-Eintrag in den Metadaten erzeugen die Tags automatisch. Auf dlm-digital.ch liegen im Kopf eine SVG-Datei, eine PNG-Datei mit 512 × 512 Pixeln und ein Apple Touch Icon mit 180 × 180 Pixeln; das Web-App-Manifest verweist für 192 und 512 Pixel auf dieselbe PNG-Datei.

Was Google für die Suchergebnisse verlangt

Google hat eigene Richtlinien dafür, welches Favicon in den Suchergebnissen erscheint. Die folgenden Punkte stammen aus der Dokumentation «Favicon in den Google-Suchergebnissen definieren» auf developers.google.com (deutsche Fassung, laut Seite zuletzt aktualisiert am 9. September 2026, abgerufen am 10. Oktober 2026):

• Ein Favicon pro Hostname. www.beispiel.ch und shop.beispiel.ch können verschiedene Favicons haben, beispiel.ch/blog dagegen nicht.
• Der link-Tag steht auf der Startseite. Unterstützt werden rel="icon", rel="shortcut icon", rel="apple-touch-icon" und rel="apple-touch-icon-precomposed".
• Abrufbar für Google. Googlebot muss die Startseite crawlen dürfen, Googlebot-Image die Favicon-Datei. Eine robots.txt, die das Bildverzeichnis sperrt, verhindert die Anzeige.
• Quadratisch, mindestens 8 × 8 Pixel. Google empfiehlt, grösser als 48 × 48 Pixel zu gehen, damit das Symbol auf allen Oberflächen gut aussieht.
• Unterstützte Formate. Die Dokumentation nennt BMP, GIF, ICO, PNG, JPEG, PPM und TIFF. Wer eine SVG-Datei verwendet, gibt deshalb zusätzlich eine PNG-Datei an.
• Markenbezug und stabile Adresse. Das Favicon soll die Marke darstellen, und die URL der Datei sollte sich nicht häufig ändern. Unangemessene Inhalte ersetzt Google durch ein Standardsymbol.
• Keine Garantie. Auch wenn alle Regeln erfüllt sind, entscheidet Google, ob das Favicon angezeigt wird.

Gestaltung: Was in 16 Pixeln funktioniert

Ein Favicon ist kein verkleinertes Logo. In 16 oder 32 Pixeln verschwinden feine Linien, Schrift und Verläufe. Bewährt haben sich:

• Ein Zeichen statt der Wortmarke. Ein Buchstabe, ein Monogramm oder ein Bildzeichen aus dem Logo.
• Kräftiger Kontrast. Das Symbol muss auf hellem und dunklem Hintergrund erkennbar sein, denn Browser und Suchergebnisse haben beide Modi.
• Ein eigener Hintergrund. Ein farbiges Quadrat oder ein Kreis hinter dem Zeichen sorgt dafür, dass das Favicon auch im Dunkelmodus nicht verschwindet.
• Etwas Rand für Maskable Icons. Android schneidet Symbole in verschiedene Formen zu. Das Logo sollte deshalb nicht bis an die Kante reichen.

Eine SVG-Datei kann mit einer CSS-Media-Query für den Dunkelmodus eine zweite Farbvariante enthalten. Das ist elegant, sollte aber in mehreren Browsern geprüft werden. Wer das Favicon im Rahmen eines Designs angeht, macht das am besten zusammen mit dem übrigen Erscheinungsbild der Website, wie bei unserem UI- und UX-Design.

Häufige Fehler

Der link-Tag fehlt auf der Startseite. Manche Systeme setzen das Favicon nur auf Unterseiten oder laden es per JavaScript nach. Google schaut auf die Startseite.

Die Datei ist blockiert. Eine robots.txt-Regel wie Disallow: /images/ oder ein Schutz gegen Bot-Zugriffe beim Hoster kann verhindern, dass Googlebot-Image die Datei abruft.

Nicht quadratisch. Ein Logo im Querformat wird verzerrt oder gar nicht verwendet.

Nur eine winzige Datei. Ein 16-Pixel-Icon als einzige Datei sieht im Tab gut aus, auf dem Home-Bildschirm und in der Suche aber unscharf.

Ständig neue Dateinamen. Wer bei jedem Build einen neuen Dateinamen erzeugt, zwingt Google immer wieder zum Neuladen. Eine stabile URL ist besser.

Alte Dateien vom Baukasten. Nach einem Wechsel von Wix, Jimdo oder WordPress bleibt manchmal das Symbol des alten Systems in den Suchergebnissen hängen, weil eine alte favicon.ico im Hauptverzeichnis liegt oder ein Plugin einen eigenen Tag setzt.

Favicon und Web-App

Ein Favicon wird wichtiger, sobald eine Website als Web-App auf dem Home-Bildschirm landet. Dann ist das Icon nicht mehr ein kleines Detail im Tab, sondern das Symbol, auf das jemand täglich tippt. Für installierbare Web-Apps, sogenannte Progressive Web Apps, gehören deshalb ein Apple Touch Icon, Manifest-Icons in 192 und 512 Pixeln und idealerweise ein Maskable Icon zur Grundausstattung.

Ein Beispiel aus unserer Arbeit: Für das Restaurant Han Kitchen haben wir neben der Website eine Admin-Web-App gebaut, die sich wie eine App auf den Home-Bildschirm legen lässt. Neue Reservationen kommen dort als Push-Benachrichtigung an. Damit das funktioniert und auf dem Handy wie eine richtige App aussieht, braucht es genau diese Icons und ein sauberes Web-App-Manifest.

Was das Favicon für SEO bedeutet und was nicht

Ein Favicon verbessert keine Rankings. Es ist kein Rankingfaktor, und eine Website rutscht nicht nach oben, weil ihr Symbol schöner ist. Der Effekt liegt woanders: In der mobilen Suche steht das Favicon direkt neben dem Websitenamen, und ein klares, wiedererkennbares Symbol hilft, dass Besucher die Marke wiedererkennen. Ob sich das in der Klickrate messbar niederschlägt, lässt sich für die eigene Website in der Search Console beobachten, eine allgemeingültige Zahl gibt es dafür nicht.

Wichtiger für die Darstellung in der Suche sind der Websitename, der Title und die Description. Wer seine Darstellung in Google und in KI-Antworten insgesamt verbessern will, setzt bei strukturierten Daten für Dienstleister und bei der Ladezeit an, beschrieben in Core Web Vitals und INP.

Kurz-Checkliste

1. Quadratisches Zeichen aus dem Logo, gut lesbar in 16 Pixeln.
2. favicon.ico (32 × 32) im Hauptverzeichnis.
3. SVG-Datei plus PNG-Datei ab 96 × 96 Pixeln als link-Tags auf der Startseite.
4. apple-touch-icon.png mit 180 × 180 Pixeln.
5. Web-App-Manifest mit Icons in 192 und 512 Pixeln, optional ein Maskable Icon.
6. robots.txt prüfen: Googlebot und Googlebot-Image dürfen Startseite und Icon abrufen.
7. Stabile Dateinamen, keine alten Icons vom vorherigen System.
8. Nach einer Änderung die Startseite in der Search Console zur Indexierung einreichen.

Fazit

Ein Favicon ist schnell gemacht, wenn man weiss, was es braucht: ein klares, quadratisches Zeichen, ein kleiner Satz von Dateien für Tab, Home-Bildschirm und Web-App, und ein link-Tag auf der Startseite, den Google abrufen darf. Wer eine neue Website baut, sollte das von Anfang an einplanen. Bei unseren Projekten unter Website erstellen lassen gehören Favicon, Apple Touch Icon und Web-App-Manifest zur technischen Grundausstattung.