Die direkte Antwort: Es gibt nicht die eine Favicon-Größe. Der Browser-Tab will 16×16, sein High-DPI-Zwilling 32×32, Windows-Verknüpfungen 48×48, iOS-Startbildschirme 180×180, und Android will 192×192 und 512×512. Der klassische Weg, die ersten drei abzudecken, ist eine ICO-Datei; der Rest sind PNGs plus ein paar Zeilen Markup. Dieser Guide ist die komplette Landkarte: jede Größe, ihr Einsatzort und der exakte Code, um sie auszuliefern.
Die Größentabelle
| Größe | Verwendet von | Format |
|---|---|---|
| 16×16 | Browser-Tabs, Adressleiste, Verlauf | ICO |
| 32×32 | High-DPI-Tabs, Retina-Displays | ICO |
| 48×48 | Windows-Desktopverknüpfungen, Installationsicons | ICO |
| 180×180 | iOS-Startbildschirm (apple-touch-icon) | PNG |
| 192×192 | Android-Startbildschirm, Chrome-App-Übersicht | PNG |
| 512×512 | Android-Splash-Screens, PWA-Installation | PNG |
Sechs Größen decken jeden Mainstream-Kontext ab. Alles Weitere erklärt, warum jede Zeile existiert und wo die Grenzfälle liegen.
ICO: drei Größen in einer Datei
Der ICO-Container ist das ursprüngliche Favicon-Format, und seine einzige Superkraft ist, mehrere Auflösungen in einer einzigen Datei zu halten. Ein gut gebautes favicon.ico trägt 16, 32 und 48; Browser oder OS lesen das Verzeichnis am Dateianfang und wählen den passenden Eintrag. Das Byte-Level-Layout dieses Verzeichnisses erklärt unser ICO-Format-Deep-Dive.
Der Grund, die kleinen Größen von Hand zu gestalten, statt dein Logo von einem Renderer verkleinern zu lassen: Bei 16×16 gibt es insgesamt 256 Pixel. Automatisches Verkleinern verwischt feine Formen zu Matsch; eine für diese Größe gezeichnete oder zumindest nachgebesserte Version bleibt erkennbar. Zieh deine Vorlage in PNG zu ICO, und die Standardgrößen werden für dich gepackt.
Zwei Fakten machen ICO selbst 2026 unvermeidbar. Jeder je ausgelieferte Browser liest es. Und Browser fordern /favicon.ico automatisch für jede Seite an, die nichts deklariert — Feedreader, Link-Vorschauen und Crawler schauen ebenfalls dort. Ein favicon.ico im Root ist Abdeckung, die du geschenkt bekommst.
PNG-Favicons und das sizes-Attribut
Moderne Browser akzeptieren PNG-Favicons, pro Größe deklariert:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
Das sizes-Attribut lässt den Browser vor dem Download wählen — ohne es werden unter Umständen alle deklarierten Dateien geholt und erst danach der Gewinner gekürt. PNGs sind kleiner als ICOs bei gleicher Auflösung und einfacher zu erzeugen, funktionieren aber nur, wo der Browser die Deklarationen versteht. Ältere Browser ignorieren sie komplett — darum ergänzt das PNG das ICO, statt es zu ersetzen.
apple-touch-icon: 180×180
Wenn jemand deine Website auf einem iOS-Startbildschirm ablegt, sucht Safari nach apple-touch-icon.png. Die Standardgröße ist 180×180; iOS skaliert für kleinere Kontexte herunter und — das überrascht Leute — rundet die Ecken selbst und kann einen Hintergrund ergänzen. Liefere ein quadratisches Bild mit deckendem Hintergrund; transparente Bereiche werden auf älteren iOS-Versionen auf Schwarz komponiert.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Die Datei wird auch ohne Tag standardmäßig von /apple-touch-icon.png geholt — dieselbe Konvention wie bei favicon.ico.
Android und Chrome: 192 und 512 über das Manifest
Android Chrome liest Icons aus dem Web-App-Manifest. Zwei Größen zählen: 192×192 für das Startbildschirm-Icon und 512×512 für Splash-Screens und Installationsdialoge.
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Das Manifest einmal in deinen Seiten referenzieren:
<link rel="manifest" href="/site.webmanifest" />
SVG-Favicons: vielversprechend, noch nicht ausreichend
Ein SVG-Favicon skaliert aus einer Datei in jeden Kontext, und Chromium und Firefox unterstützen es seit Jahren:
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
Der Verweigerer ist Safari, der SVG-Favicons weiterhin ignoriert — sein einziger SVG-artiger Mechanismus ist mask-icon, ein monochromes SVG für angepinnte Tabs mit Theme-Farbe:
<link rel="mask-icon" href="/icon-mask.svg" color="#1a1a1a" />
SVG ist eine feine progressive Verbesserung, aufgeschichtet auf ICO und PNGs. Ein Ersatz ist es noch nicht.
Das komplette Head-Setup
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
Sechs Dateien, sechs Zeilen, jeder Kontext abgedeckt. Das sizes="any" in der ICO-Zeile sagt Browsern, dass der Container mehrere Auflösungen hält, damit sie wählen statt 16×16 anzunehmen.
Die Dateien erzeugen
Fang mit einer quadratischen Vorlage ab 512×512 an, dann: PNG zu ICO oder WebP zu ICO für den Container, skalierte PNGs für 180/192/512, und das Manifest per Hand verdrahtet. Der komplette Workflow vom rohen Logo bis zum deployten Icon steht in Favicon erstellen. Alles in den Konvertern läuft lokal in deinem Browser — der einzige Upload ist der deiner Dateien auf deinen eigenen Server.
