Favicon-Größen: Jede Dimension, die du wirklich brauchst
Die Favicon-Größen, die du brauchst, sind 16x16 und 32x32 PNG für Browser-Tabs und Lesezeichen, 180x180 für das iOS-apple-touch-icon sowie 192x192 und 512x512 PNG für Android-Startbildschirme und die PWA-Installation. Eine favicon.ico mit 16-, 32- und 48-Pixel-Einträgen deckt alles ab, was /favicon.ico direkt anfragt. Jede weitere Größe ist optional, und die meisten Websites liefern keine davon aus.
Warum mehr als eine Größe
Ein Browser-Tab fragt ein Icon von etwa 16 bis 32 Pixeln Breite an. Ein Android-Startbildschirm fragt 192 an. Ein PWA-Splashscreen fragt 512 an. Das sind nicht dasselbe Bild in unterschiedlicher Skalierung. Bei 16 Pixeln hat eine Bildmarke rund 256 Pixel zur Verfügung, und was dort besteht, muss weit einfacher sein als das, was bei 512 richtig aussieht.
Wenn du mehrere Größen deklarierst, wählt der Browser die nächstliegende und skaliert von dort. Nur ein großes Icon zu deklarieren bedeutet, dass jede kleine Oberfläche es herunterrechnet – daher der graue Fleck im Tab. Nur ein kleines zu deklarieren bedeutet, dass jede große Oberfläche es hochrechnet – daher das unscharfe Startbildschirm-Icon.
Zentrale Favicon-Größen
| Größe | Verwendet für | Priorität |
|---|---|---|
| 16x16 | Adressleiste, ältere Browser, Lesezeichen | Unverzichtbar |
| 32x32 | Browser-Tabs, moderne Browser | Unverzichtbar |
| 96x96 | Desktop-Verknüpfungen, Windows-Kacheln | Optional |
| 192x192 | Android-Startbildschirm, PWA-Icons | Unverzichtbar |
| 512x512 | Splashscreens, hochauflösende Icons | Unverzichtbar |
Wie diese Zahlen aussehen
apple-touch-icon-Größen
| Größe | Gerät |
|---|---|
| 57x57 | iPhone (ohne Retina) |
| 60x60 | iPhone (Retina) |
| 72x72 | iPad (ohne Retina) |
| 76x76 | iPad (Retina) |
| 114x114 | iPhone (Retina) |
| 120x120 | iPhone (Retina HD) |
| 144x144 | iPad (Retina) |
| 152x152 | iPad (Retina HD) |
| 180x180 | iPhone (Retina HD), primär |
Wohin die Dateien gehören
- public/
- favicon.ico16, 32 and 48 in one file
- favicon-16x16.pngAddress bar
- favicon-32x32.pngBrowser tabs
- favicon-96x96.pngDesktop shortcuts
- apple-touch-icon.png180x180, iOS home screen
- icon-192.pngAndroid home screen
- icon-512.pngPWA splash screen
- manifest.jsonLists the PWA icons
Flach im public-Root ist die Konvention, weil mehrere dieser Dateien auch per Pfad angefragt werden, ganz ohne Link-Tag.
FAQ zu Favicon-Größen
Was ist der minimale Satz an Favicon-Größen?
Eine favicon.ico mit 16 und 32, ein 180x180 apple-touch-icon.png sowie 192x192- und 512x512-PNGs, die im Web-App-Manifest gelistet sind. Damit sind Desktop-Browser, iOS-Startbildschirme, Android und die PWA-Installation mit fünf Dateien abgedeckt.
Brauche ich für iOS noch 57x57 und 72x72?
Nur, wenn du sehr alte iPhones und iPads unterstützt. Aktuelles iOS verwendet das 180x180 apple-touch-icon und skaliert es herunter, wo es etwas Kleineres braucht, sodass ein einzelnes 180 für fast jede Website genügt.
Verlangsamt ein größeres Favicon die Seite?
Nicht nennenswert. Icons sind kleine PNGs im einstelligen Kilobyte-Bereich, und Browser fragen nur die Größe an, die sie brauchen, außerdem werden sie aggressiv gecacht. Ein 512 auszuliefern, das du nie nutzt, kostet weniger als ein unscharfes Startbildschirm-Icon.