Favicons: Welche Größen du 2026 wirklich brauchst

Beginne bei den Abnehmern, nicht bei der Dateiliste

Ein Symbol für deine Seite landet an genau fünf Orten, und jeder liest genau eine Sache. Tab und Lesezeichenleiste lesen, was der head als rel="icon" deklariert, und bevorzugen einen Vektor, falls du einen anbietest. Alles, was rät — alte Browser, Feedreader, Link-Vorschauen, erstaunlich viel interne Werkzeugkette — fragt ganz ohne Markup /favicon.ico im Wurzelverzeichnis an. Der iOS- und iPadOS-Startbildschirm liest apple-touch-icon.png. Der Android-Startbildschirm und die Chrome-Installationsaufforderung lesen das icons-Array des Web-App-Manifests. Das ist die vollständige Liste der Abnehmer, und sie ist seit Jahren nicht gewachsen.

Lies die Liste noch einmal und achte darauf, was fehlt. Kein Abnehmer will 57 Pixel, keiner 70, 114, 144 oder 310. Diese Zahlen stammen aus einer bestimmten historischen Matrix: den Kacheln angehefteter Seiten im Internet Explorer, einem Jahrzehnt iOS-Geräte aus der Zeit, bevor das System eine einzelne Datei herunterrechnen konnte, und einer Android-Launcher-Generation vor dem Manifest. Alle drei Abnehmer sind verschwunden. Übrig ist Generatorausgabe — gut zwanzig PNGs und eine browserconfig.xml —, die im Wurzelverzeichnis von Seiten liegt, deren Betreiber nicht wissen, welche dieser Dateien überhaupt noch jemand liest.

Der Mindestsatz — und was der Maximalsatz kostet

Wir haben beide aus einer einzigen 512 × 512-Marke gebaut und gewogen. Der Mindestsatz ist favicon.ico mit 1 664 Bytes, icon.svg mit 254 Bytes, apple-touch-icon.png in 180 × 180 mit 13 573 Bytes, icon-192.png mit 14 510 Bytes und icon-512.png mit 27 390 Bytes: fünf Dateien, 57 391 Bytes. Die Altlast-Matrix — dieselbe Marke exportiert in 16, 24, 32, 36, 48, 57, 60, 70, 72, 76, 96, 114, 120, 128, 144, 150, 152, 167, 180, 192, 196, 228, 256, 310, 384 und 512 — sind 26 Dateien und 272 192 Bytes, ohne ICO und die zwei Konfigurationsdateien. Das ist das 4,7-Fache an Bytes und das Fünffache an Dateien für exakt null zusätzliche Abdeckung.

Die Bytesumme ist der uninteressanteste Teil, denn ein Besucher lädt nie alles. Bei einem gewöhnlichen Seitenaufruf holt der Browser das Tab-Symbol und sonst nichts: Unsere ICO plus unser SVG sind 1 918 Bytes, und ein Browser, der das SVG nimmt, holt 254. Das apple-touch-icon und die Manifest-Symbole werden nur angefragt, wenn jemand die Seite tatsächlich installiert oder auf einen Startbildschirm legt. Was die Dateizahl wirklich kostet, ist Pflege: 26 Rasterdateien, die bei jeder Änderung der Marke konsistent neu erzeugt werden müssen und die niemand je kontrollieren wird.

SVG im Tab: inzwischen fast überall, noch nicht überall

Ein Vektor-Tabsymbol ist die beste einzelne Änderung, denn sie beseitigt die ganze Frage, welche Rastergrößen auszuliefern sind: Der Browser fragt an, was er braucht, und der Renderer erzeugt es. Chrome und Edge lesen rel="icon"-SVGs seit Version 80, Firefox seit 41. Safari war der lange Nachzügler — jahrelang unterstützte es nur sein eigenes einfarbiges Pinned-Tab-Format — und Safari 26 ist die erste Version, die ein gewöhnliches SVG-Favicon in Tabs und Lesezeichen darstellt. Supporttabellen beziffern den Gesamtwert auf rund 89 % des weltweiten Verkehrs, und er steigt, während Safari-Installationen aktualisieren.

Diese letzten 11 % sind der Grund, warum die ICO bleibt. Sie ist nicht für den Tab da, sondern weil /favicon.ico ein Pfad ist, der ganz ohne Markup angefragt wird — von Browsern, die für SVG zu alt sind, und von jedem Nicht-Browser-Werkzeug, das ein Seitensymbol will und kein HTML parst. Ein 32 × 32-Eintrag genügt. Lass sie im Wurzelverzeichnis, nicht in einem Asset-Ordner: Die Clients, die sie per Konvention anfragen, lesen dein link-Element nicht, um zu erfahren, wohin du sie verschoben hast.

Was sizes="any" bewirkt — und warum sich dieser Rat geändert hat

Im HTML-Standard ist das sizes-Attribut ein Hinweis: eine durch Leerzeichen getrennte Liste von Breite-mal-Höhe-Werten, die dem Browser sagt, was die Ressource enthält, plus das einzelne Schlüsselwort any, das die Ressource als skalierbar — also als Vektor — deklariert. Der Browser darf es nutzen oder ignorieren. Es ist keine Darstellungsanweisung, und ein sizes an einem Bild skaliert nichts.

Der Rat, den man überall findet — das Attribut sizes mit dem Wert any an die ICO — hatte mit dieser Definition nie zu tun. Er war ein Behelf gegen ein Chrome-Verhalten: Bei einer ICO und einem SVG lud Chrome beides und nahm die ICO, also deklarierte man die ICO als „any“, um Chrome zum SVG zu drängen. Das half, sagt aber etwas Unwahres über die Datei. Die aktuelle Empfehlung derselben Leute, die den Trick verbreitet haben, lautet, die ICO ehrlich mit sizes gleich 32x32 zu deklarieren: Es löst denselben Doppel-Download und lügt nicht über den Dateiinhalt. Wer ein Favicon-Snippet vor etwa 2023 kopiert hat, sollte genau diese Zeile aktualisieren.

Ein 16-Pixel-Symbol ist kein verkleinertes 512-Pixel-Symbol

Hier hilft die Dateiliste nicht. Eine 512 × 512-Fläche fasst 262 144 Pixel. Eine 16 × 16-Fläche fasst 256 — ein Tausendvierundzwanzigstel davon. Jedes Merkmal deiner Marke muss es überstehen, in dieses Budget hineingemittelt zu werden, und genau das tut Antialiasing: Eine Linie, die dünner als ein Ausgabepixel ist, wird keine dünne Linie, sondern ein blasser Farbton, verteilt über die Pixel, die sie teilweise bedeckt.

Wir haben es an einer Marke gemessen: ein fetter Buchstabe, ein Schriftzug in 52 Pixeln, eine Beizeile in 24 und ein 8 Pixel breiter weißer Ring, alles auf einer 512er-Fläche. Die Marke enthält bei 512 genau 407 verschiedene Farben, bei 16 noch 85. Misst man den verbliebenen Luminanzkontrast jedes Merkmals — den Abstand zwischen hellstem und dunkelstem Pixel —, geht der fette Buchstabe von 199,4 Stufen bei 512 auf 188,0 bei 16: Er überlebt mit 94 % seines Kontrasts. Der Schriftzug geht von 199,4 auf 86,4 — 57 % weg. Die Beizeile geht von 199,4 auf 29,1 — 85 % weg. Das ist dann kein kleiner Text mehr, sondern ein grauer Balken.

Der Ring ist der klarste Einzelfall, weil wir eine einzelne Abtastzeile durch ihn verfolgen können. Auf der 512er-Vorlage liest sich der Ringstrich als reines Weiß, Luminanz 255 gegen einen Hintergrund von 56 — ein Kontrast von 199. Bei 192 sind es noch 255. Bei 48, wo der 8-Pixel-Strich auf 0,75 Ausgabepixel sinkt, erreicht sein hellster Punkt nur noch 159. Bei 32 erreicht er 121. Bei 16, wo der Strich ein Viertelpixel breit ist, liegt der hellste Punkt des ganzen Rings bei 99 gegen einen Hintergrund von 52: ein Kontrast von 47 statt 199. Drei Viertel der Präsenz des Rings sind weg, und kein Schärfen im Exportdialog holt sie zurück — die Information liegt unterhalb des Abtastrasters.

Die praktische Folge ist eine Gestaltungsregel, keine Dateiregel: Bei 16 Pixeln trägt eine Marke genau eine kräftige Form und sonst nichts. Ist dein Logo ein Schriftzug, ist das Favicon sein erster Buchstabe oder sein Symbol, nicht der Schriftzug. Hat es eine Haarlinie, mach sie dicker oder lass sie weg. Zeichne für die kleinen Größen eine eigene vereinfachte Fassung, wenn dir der Tab wichtig ist — und dann ist das der einzige Fall, in dem ein handgezeichnetes 16- und 32-Pixel-Raster besser ist, als einen Skalierer entscheiden zu lassen.

Die zwei Dateien, die gar keine Favicons sind

Das apple-touch-icon und die Manifest-Symbole landen in Favicon-Checklisten, sind aber App-Symbole und verhalten sich auch so. Das apple-touch-icon misst 180 × 180 — das 60-Punkt-iOS-Symbol bei dreifacher Dichte —, und iOS rechnet diese eine Datei für alle anderen Geräte herunter; die alte Leiter aus 57, 72, 76, 114, 120, 144 und 152 ist überflüssig. Zwei Dinge zählen: iOS legt seine eigene abgerundete Rechteckmaske an, weshalb eine randabfallende Marke ihre Ecken verliert; und iOS bewahrt hier keine Transparenz, ein transparenter Hintergrund wird also für dich gefüllt — nicht unbedingt mit der Farbe, die du gewählt hättest.

Die Manifest-Symbole sind das, was Chrome prüft, bevor es eine Installation anbietet: Es will einen 192- und einen 512-Pixel-Eintrag, und ohne beide erscheint die Installationsaufforderung schlicht nie — ohne Fehlermeldung irgendwo. Ergänze einen dritten 512 × 512-Eintrag mit purpose maskable, wenn Android-Launcher das Symbol in einen Kreis oder ein Squircle umformen sollen, ohne dein Motiv zu beschneiden: Die sichere Zone ist dann ein mittiger Kreis von 409 Pixeln auf der 512er-Fläche, also rund 80 % der Breite, und alles außerhalb darf weggemaskt werden.

Häufige Fragen

Brauche ich noch eine favicon.ico, wenn ich ein SVG ausliefere?

Ja, und sie kostet fast nichts — 1 664 Bytes für einen einzigen 32 × 32-Eintrag in unserem Test. Deine Aufgabe ist nicht der Tab. Deine Aufgabe sind Anfragen ohne Markup: Browser älter als Chrome 80 oder Safari 26, Feedreader, Vorschaugeneratoren und interne Werkzeuge, die /favicon.ico per Konvention holen. Leg sie ins Wurzelverzeichnis, denn diese Clients lesen dein link-Element nicht, um sie woanders zu finden.

Sollte meine ICO Fassungen mit 16, 32 und 48 Pixeln enthalten?

Nicht sinnvoll. Wir haben beides gebaut: Ein einzelner 32 × 32-Eintrag ergab 1 664 Bytes, 16, 32 und 48 in einer Datei ergaben 5 188 — mehr als das Dreifache. Die Clients, die die ICO überhaupt noch lesen, sind am wenigsten wählerisch, welchen Eintrag sie bekommen, und modernes Herunterrechnen von 32 auf 16 ist gut. Steck den Aufwand lieber in die Gestaltung bei 16 Pixeln — die sieht man wirklich.

Kann ein SVG-Favicon im Dunkelmodus die Farbe wechseln?

Ja, und das ist einer der echten Vorteile der Vektordatei. Ein SVG-Favicon darf einen style-Block enthalten, und eine prefers-color-scheme-Medienabfrage darin wird von Browsern beachtet, die das SVG darstellen — ein Tab im Dunkelmodus bekommt so ohne zweite Datei eine hellere Marke. Baue darauf aber nichts Wesentliches: Der ICO-Rückfall kann das nicht, das apple-touch-icon und die Manifest-Symbole ebenso wenig.

Warum bietet Chrome nie an, meine Seite zu installieren?

Die häufigste Ursache ist ein Manifest ohne ein 192- und ein 512-Pixel-Symbol. Chrome prüft diese beiden Größen als Teil seiner Installierbarkeitskriterien, und fehlt eine, warnt es nicht — der Installationsknopf erscheint einfach nie. Sieh im Anwendungsbereich der Entwicklerwerkzeuge nach: Dort steht das Manifest so, wie es geparst wurde, samt der Angabe, welche Anforderung fehlschlug.

Kann ich die 512er-Datei einfach in allen kleineren Größen exportieren und fertig?

Kannst du, und für die Dateien mit 180, 192 und 512 Pixeln ist genau das richtig — sie sind groß genug für alles. Erst am 16- und 32-Pixel-Ende reicht automatisches Herunterrechnen nicht mehr. An unserer Testmarke verlor die kleine Beizeile bei 16 Pixeln 85 % ihres Kontrasts und der feine Ring 76 %, das Symbol im Tab ist also eine Unschärfe der gemeinten Formen. Entweder vereinfachst du das Motiv für diese Größen oder du akzeptierst, dass der Tab eine kräftige Form zeigt.