Welche Favicon-Größen eine Website heute braucht (und welche nicht mehr)

Eine aktuelle Website braucht fünf Favicon-Dateien, nicht die zwanzig, die Generatoren vor zehn Jahren erzeugten: eine favicon.ico für alte Browser und Suchmaschinen, eine favicon.svg, die in jeder Größe skaliert und den Dunkelmodus unterstützt, ein apple-touch-icon.png mit 180 Pixeln für iOS sowie zwei PNGs mit 192 und 512 Pixeln, die im Manifest für Android und installierbare Web-Apps deklariert sind. Damit sind Tabs, Lesezeichen, Startbildschirme und die Google-Suchergebnisse abgedeckt.

Dieser Artikel erklärt, wozu jede Datei dient, welche Tags in den <head> gehören, was Google verlangt, um das Icon in den Ergebnissen zu zeigen, und welche Größen du nicht mehr erzeugen musst.

Die fünf Dateien

Datei	Größe	Zweck
/favicon.ico	32×32 (optional auch 16×16 und 48×48 in derselben .ico)	Alte Browser, Feedreader und Suchmaschinen, die /favicon.ico per Konvention anfordern, auch wenn es nicht deklariert ist.
/favicon.svg	Vektor	Moderne Browser. Gestochen scharf bei jeder Pixeldichte, kann die Farbe per prefers-color-scheme wechseln.
/apple-touch-icon.png	180×180	Icon beim Hinzufügen zum Startbildschirm unter iOS und iPadOS. Safari sucht es per Konvention auch im Stammverzeichnis.
/icons/icon-192.png	192×192	Android und installierbare Web-Apps (im Manifest deklariert).
/icons/icon-512.png	512×512	Startbildschirm (Splash) und hochauflösendes Icon im Manifest.

Und die Tags, die alles verbinden:

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

{
  "name": "AIMRAN Blog",
  "icons": [
    { "src": "/icons/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icons/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icons/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

Die Reihenfolge der ersten beiden Tags ist wichtig: Browser, die SVG verstehen, wählen das SVG; die anderen bleiben bei der .ico. Das Attribut sizes="32x32" an der .ico hilft bei dieser Wahl.

Warum ein SVG als Favicon

Ein SVG ist klein, sieht auf hochauflösenden Bildschirmen perfekt aus und kann sich aus der Datei heraus an den Dunkelmodus anpassen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    path { fill: #1d1d1f; }
    @media (prefers-color-scheme: dark) { path { fill: #f5f5f7; } }
  </style>
  <path d="…" />
</svg>

Firefox spielt sogar CSS-Animationen im SVG-Favicon ab; Chrome animiert sie im Tab nicht (wer dort Animation will, braucht JavaScript, das das Icon laufend austauscht, so wie dieser Blog). Safari akzeptiert SVG-Favicons seit Version 12, bevorzugt für den Startbildschirm aber weiterhin das apple-touch-icon.

Zwei Vorsichtsmaßnahmen beim SVG: keine externen Schriften (in Pfade umwandeln) und die Zeichnung muss bei 16 Pixeln lesbar sein; ein Logo mit kleinem Text wird zum Fleck.

Was Google verlangt, um das Favicon in den Ergebnissen zu zeigen

Laut Google-Search-Dokumentation:

• Das Favicon muss ein Quadrat mit einem Vielfachen von 48 Pixeln sein (48×48, 96×96, 144×144 …) oder ein SVG. Eine .ico mit mehreren Größen genügt, wenn sie eine 48×48-Variante enthält.
• Es muss mit <link rel="icon"> auf der Startseite der Domain deklariert und crawlbar sein (nicht per robots.txt blockiert).
• Es muss stabil sein (gleiche URL) und die Marke der Website repräsentieren; Google zeigt Icons, die es für unangemessen hält, möglicherweise nicht.
• Das Icon ist der Startseite zugeordnet und gilt für die ganze Website; ein anderes Favicon pro Bereich erscheint in den Ergebnissen nicht.

Google crawlt das Favicon mit einem eigenen Crawler und kann nach einer Änderung Tage brauchen, um es zu aktualisieren.

Was du nicht mehr erzeugen musst

• Die PNGs mit 57, 60, 72, 76, 114, 120, 144 und 152 px für alte iOS-Versionen: Apple skaliert das 180-px-Icon.
• browserconfig.xml und die Kacheln von Windows 8/10 (msapplication-TileImage): Die Unterstützung für Live-Kacheln verschwand mit Windows 11.
• mask-icon für angeheftete Tabs in Safari: Seit Version 12 nutzt Safari auch dort das normale Favicon.
• Dutzende <link rel="icon" sizes="…">: Eine .ico, ein SVG und das Manifest reichen.

Die Dateien erzeugen

Starte mit einem Quadrat von mindestens 512 px, am besten einem SVG. Mit sharp in Node.js:

import sharp from 'sharp';
for (const size of [32, 180, 192, 512]) {
  await sharp('logo.svg').resize(size, size).png().toFile(`icon-${size}.png`);
}

Die .ico lässt sich mit der Bibliothek png-to-ico oder mit ImageMagick zusammensetzen (magick icon-32.png icon-16.png favicon.ico). Wenn du nichts installieren willst, nimmt der Favicon-Generator von AIMRAN Tools ein quadratisches Bild oder ein SVG entgegen, zeigt die Vorschau in den üblichen Größen (16 bis 180 px) und lädt den Satz als ZIP herunter, alles im Browser.

Für das maskable Icon (Android schneidet Icons kreisförmig oder abgerundet zu) lass einen Sicherheitsrand: Der wichtige Inhalt muss in die mittleren 80 % passen.

Abschließende Prüfungen

1. Öffne https://deinedomain/favicon.ico und https://deinedomain/favicon.svg: Beide müssen 200 liefern.
2. Prüfe in den Chrome DevTools unter Application → Manifest, dass die Icons ohne Warnungen laden.
3. Füge die Website auf einem iPhone und einem Android-Gerät zum Startbildschirm hinzu und sieh dir das Icon an.
4. Mach den Tab-Test: Ist das Icon bei 16 Pixeln neben zwanzig anderen Tabs erkennbar?

Fazit

Eine .ico, ein SVG, ein PNG mit 180 px und zwei PNGs im Manifest: Fünf Dateien und vier Tags decken Browser, Smartphones, installierbare Apps und die Google-Ergebnisse ab. Investiere die Zeit, die du beim Erzeugen von Größen sparst, in das, was wirklich auffällt: eine Zeichnung, die bei 16 Pixeln lesbar ist und in Hell wie Dunkel funktioniert.