Favicon-Größen: was du 2026 wirklich brauchst
Früher lieferten Generatoren 30 und mehr Dateien – für Windows-8-Kacheln, alte Android-Versionen und jede denkbare Auflösung. Heute reichen eine Handvoll Dateien, wenn sie gut gemacht sind.
| Datei | Größe | Wofür |
|---|---|---|
favicon.ico |
16, 32, 48 px | Browser-Tab, Lesezeichen, ältere Browser, Google-Suche |
icon.svg |
skalierbar | moderne Browser, scharf in jeder Auflösung, optional mit Dunkelmodus |
apple-touch-icon.png |
180 × 180 px | iPhone und iPad (Startbildschirm) |
icon-192.png, icon-512.png |
192 und 512 px | Android und installierbare Web-Apps (über das Manifest) |
icon-maskable-512.png |
512 px | Android-Icons, die das System rund oder eckig zuschneidet |
Warum gerade diese Größen?
- 16 und 32 px sind die Größen im Browser-Tab – 32 px auf hochauflösenden Displays. Hier entscheidet sich, ob dein Favicon scharf oder matschig aussieht.
- 48 px nutzt unter anderem die Google-Suche: Google verlangt ein Favicon, dessen Kantenlänge ein Vielfaches von 48 px ist.
- 180 px ist die Größe, die iOS für Lesezeichen auf dem Startbildschirm verwendet. Transparenz ignoriert Apple – das Icon braucht einen deckenden Hintergrund.
- 192 und 512 px verlangt das Web-App-Manifest für Android und den Startbildschirm-Splash.
Was du nicht mehr brauchst
msapplication-Kacheln (Windows 8), browserconfig.xml, Dutzende apple-touch-icon-Varianten und Favicons in 57, 72, 114 oder 144 px. Moderne Systeme skalieren aus 180 bzw. 512 px selbst.
Der wichtigste Punkt: jede Größe einzeln rendern
Ein 16-px-Favicon, das einfach aus einem großen PNG verkleinert wurde, wirkt oft verwaschen. Besser ist es, jede Größe direkt aus dem Original – idealerweise einem SVG – zu rendern und an ganzen Pixeln auszurichten. Genau das macht faviconlion automatisch.