Welche Größe sollte ein Favicon haben?

Für den Browser-Tab eine favicon.ico mit 32 × 32 Pixeln (optional zusätzlich 16 und 48) oder eine SVG-Datei. Dazu ein Apple Touch Icon mit 180 × 180 und für das Web-Manifest 192 × 192 und 512 × 512 Pixel.

Welche Anforderungen stellt Google an das Favicon?

Es muss quadratisch und mindestens 8 × 8 Pixel groß sein; Google empfiehlt größer als 48 × 48 Pixel. Die Datei muss für den Googlebot abrufbar sein und auf der Startseite per link rel=icon eingebunden werden.

Warum wird mein neues Favicon nicht angezeigt?

Browser speichern Favicons sehr lange im Cache. Laden Sie die Seite mit geleertem Cache neu oder hängen Sie eine Versionsnummer an die Datei an. In der Google-Suche kann die Aktualisierung Tage bis Wochen dauern.

Brauche ich noch eine favicon.ico?

Sie ist weiterhin sinnvoll, weil manche Programme, Feedreader und ältere Browser automatisch /favicon.ico abfragen. Moderne Browser nutzen zusätzlich SVG- oder PNG-Icons.

Favicon-Größen 2026: ICO, SVG, Apple Touch und Manifest

Das Favicon ist das kleine Symbol im Browser-Tab, in Lesezeichen und im Verlauf. Inzwischen taucht es an viel mehr Stellen auf: auf dem Homescreen von Smartphones, wenn jemand Ihre Seite dort ablegt, in der Taskleiste installierter Web-Apps und neben Ihren Ergebnissen in der Google-Suche. Ein fehlendes oder unscharfes Favicon wirkt unprofessionell und kostet Wiedererkennung. Die gute Nachricht: Die vielen Größenlisten aus alten Tutorials (teils über 20 Dateien) sind überholt. Ein schlanker, moderner Satz reicht.

Die empfohlenen Dateien

Datei	Größe	Wofür
`favicon.ico`	32 × 32 (optional 16 und 48 im selben ICO)	Browser-Tabs, Fallback, Programme, die `/favicon.ico` abfragen
`icon.svg`	skalierbar	moderne Browser, scharf auf jeder Auflösung, Dark Mode möglich
`apple-touch-icon.png`	180 × 180	iPhone/iPad-Homescreen
`icon-192.png`	192 × 192	Android, Web-App-Manifest
`icon-512.png`	512 × 512	Splash-Screen, App-Installation, Stores

Optional: ein maskierbares Icon (purpose: "maskable") für Android, bei dem das Motiv innerhalb einer sicheren Zone liegt, damit es in Kreis- oder Tropfenform nicht abgeschnitten wird.

Der Favicon-Generator erzeugt alle Größen aus einem Bild oder Text und liefert den HTML-Code gleich mit.

Der HTML-Code

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

Browser, die SVG unterstützen, wählen die SVG-Datei; ältere greifen auf die ICO zurück. Das sizes="32x32" bei der ICO verhindert, dass manche Browser die ICO bevorzugen, obwohl eine SVG verfügbar ist.

Das Web-App-Manifest (manifest.webmanifest):

{
  "name": "Beispiel GmbH",
  "short_name": "Beispiel",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ],
  "theme_color": "#0066cc",
  "background_color": "#ffffff",
  "display": "standalone"
}

Prüfen Sie die Datei auf gültige Syntax, etwa mit dem JSON-Formatter – ein vergessenes Komma deaktiviert das gesamte Manifest.

Favicon in der Google-Suche

Google zeigt das Favicon neben dem Seitennamen in den Suchergebnissen. Laut der aktuellen Dokumentation von Google Search Central gilt:

Das Favicon muss quadratisch sein (Seitenverhältnis 1:1) und mindestens 8 × 8 Pixel groß; Google empfiehlt größer als 48 × 48 Pixel, damit es auf allen Oberflächen scharf aussieht. Die frühere Vorgabe „Vielfaches von 48 Pixeln“ ist nicht mehr verpflichtend, aber weiterhin eine gute Wahl.
Alle gültigen Favicon-Formate sind erlaubt, auch SVG.
Eingebunden wird es per <link rel="icon"> auf der Startseite; für jeden Hostnamen (z. B. shop.example.de) kann ein eigenes Favicon gelten.
Sowohl die Startseite als auch die Favicon-Datei müssen für den Googlebot abrufbar sein, also nicht per robots.txt gesperrt. Ein häufiger Fehler: Disallow: /assets/ blockiert unbemerkt das Icon. Mehr dazu im Ratgeber robots.txt erstellen.
Das Motiv sollte die Marke repräsentieren; unangemessene Bilder ersetzt Google durch ein Standardsymbol.
Änderungen werden erst nach dem nächsten Crawl übernommen, was einige Zeit dauern kann.

Gestaltungstipps für kleine Größen

Vereinfachen: Bei 16 oder 32 Pixeln ist kein Platz für Schriftzüge. Ein Buchstabe, ein Symbol oder die Bildmarke des Logos funktionieren besser.
Kräftige Formen und Kontraste: Dünne Linien verschwimmen. Prüfen Sie, ob das Icon auf hellem und dunklem Browser-Tab erkennbar bleibt.
Dark Mode in SVG: Eine SVG-Datei kann per CSS auf das Farbschema reagieren:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #0066cc; }
    @media (prefers-color-scheme: dark) { path { fill: #7fb3ff; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

Hintergrund beim Apple Touch Icon: iOS füllt transparente Bereiche schwarz auf. Verwenden Sie einen deckenden Hintergrund; die Ecken rundet iOS selbst ab.
Ränder einplanen: Für maskierbare Icons sollte das Motiv in der inneren Fläche (etwa 80 % des Durchmessers) liegen.

Ausreichenden Farbkontrast prüfen Sie wie bei Text; Hintergründe erklärt der Ratgeber Farbkontrast prüfen.

Häufige Fehler

Nur favicon.ico im Unterordner ohne <link>-Tag: Browser suchen automatisch nur im Stammverzeichnis.
Falscher MIME-Typ: Der Server liefert die ICO als text/html aus, weil die Datei fehlt und eine 404-Seite kommt. Prüfen Sie die URL direkt im Browser.
Riesige Dateien: Ein 512-Pixel-PNG als Tab-Icon für alle Seiten verschwendet Bandbreite; komprimieren Sie PNGs, z. B. mit Bild komprimieren.
Cache: Nach einem Wechsel sehen Sie oft noch das alte Icon. Mit ?v=2 hinter dem Dateinamen erzwingen Sie das Neuladen.
Nicht quadratisch: Rechteckige Logos werden verzerrt oder von Google ignoriert.

Favicon im CMS und mit Frameworks

Viele Systeme nehmen Ihnen einen Teil der Arbeit ab, setzen aber eigene Regeln:

WordPress: Unter „Design → Customizer → Website-Informationen“ laden Sie ein „Website-Icon“ hoch, mindestens 512 × 512 Pixel. WordPress erzeugt daraus mehrere Größen und setzt die Tags automatisch. Ein zusätzlich von Hand eingefügtes Favicon im Theme kann damit kollidieren – entscheiden Sie sich für einen Weg.
Shopify, Wix, Jimdo: In den Einstellungen gibt es ein Feld für das Favicon; meist genügt ein quadratisches PNG mit 32 × 32 oder mehr. Für Homescreen-Icons sind die Möglichkeiten oft eingeschränkt.
Statische Seiten und Frameworks (Astro, Next.js, Hugo): Legen Sie die Dateien in den öffentlichen Ordner (public/ bzw. static/), damit sie im Stammverzeichnis landen, und binden Sie die Tags im gemeinsamen Layout ein.
Mehrsprachige Websites und Subdomains: Das Favicon muss auf jeder Startseite eines Hostnamens erreichbar sein, also auch auf shop.example.de oder blog.example.de.

Testen Sie nach dem Livegang die Darstellung in Chrome, Firefox und Safari sowie auf einem iPhone und einem Android-Gerät, indem Sie die Seite zum Homescreen hinzufügen.

Checkliste

favicon.ico (32 px) im Stammverzeichnis.
icon.svg für moderne Browser, optional mit Dark-Mode-Farben.
apple-touch-icon.png mit 180 × 180 und deckendem Hintergrund.
Manifest mit 192- und 512-px-Icons, optional maskierbar.
Quadratisch, größer als 48 px, nicht per robots.txt blockiert.
Nach Änderungen Cache leeren und Seite neu crawlen lassen.

Favicon-Größen und Formate: Was Ihre Website wirklich braucht