Bei der Suche nach „Favicon-Größe“ findet man noch immer Checklisten mit fünfzehn Dateien aus dem Jahr 2014. Tatsächlich decken heute sechs Abmessungen Browser-Tabs, Suchergebnisse, iOS, Android und PWAs ab. Hier erfährst du, welche das sind und warum.
Die Größen, die du wirklich brauchst
Jede Zeile entspricht einem dokumentierten Einsatzbereich des vorgeschlagenen Pakets. Die Tabelle beschränkt sich auf eine kleine, plattformübergreifende Auswahl statt auf zahlreiche historische Varianten.
| Datei | Abmessungen | Verwendungszweck |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Tabs, Lesezeichen, ältere Browser, Crawler |
| favicon.svg | vektorbasiert, quadratisch | Moderne Browser, in jeder Größe scharf, unterstützt den Dunkelmodus |
| favicon-96x96.png | 96×96 | Mobile Google-Suchergebnisse |
| apple-touch-icon.png | 180×180 | iOS- und iPadOS-Startbildschirm, ohne Transparenz |
| web-app-manifest-192x192.png | 192×192 | Android-Startbildschirm, im Webmanifest angegeben |
| web-app-manifest-512x512.png | 512×512 | PWA-Startbild, die „maskable“-Variante |
Warum 16, 32 und 48 in dieselbe .ico gehören
ICO ist ein Containerformat: Eine Datei kann mehrere Bilder enthalten, und der Browser wählt die passende Größe für die Anzeige aus. Genau das ist erwünscht, denn die benötigte Größe hängt vom Kontext ab.
16×16 eignet sich für einen Tab auf einem normalen Bildschirm. 32×32 bietet eine Variante für hochauflösende Displays und weitere Browser-Oberflächen. 48×48 ergänzt den Container und erfüllt zugleich die von Google dokumentierte Regel, dass Favicons in Suchergebnissen ein Vielfaches von 48 Pixeln groß sein sollen.
Der häufigste Fehler ist eine .ico, die nur 16×16 enthält. Auf einem Retina-Display wird das Symbol dann vergrößert und bleibt unscharf.
180×180 für iOS, 192 und 512 für Android
iOS liest für das Symbol auf dem Startbildschirm nicht das Webmanifest, sondern sucht nach einem apple-touch-icon-Tag. Eine Größe reicht aus: 180×180 deckt alle neueren iPhones und iPads ab. Für ältere Geräte verkleinert das System das Bild selbst.
Android verwendet dagegen das Webmanifest. Zwei Einträge genügen: 192×192 für das Startbildschirm-Symbol und 512×512 für das Startbild, wenn die Website als App installiert wird. Die 512er-Version sollte mit purpose „maskable“ angegeben werden. Sie ist so gestaltet, dass sie auch als Kreis oder abgerundetes Quadrat zugeschnitten werden kann.
Bei einem maskierbaren Symbol müssen die wichtigen Elemente innerhalb der mittleren 80 % bleiben. Alles außerhalb kann je nach Smartphone-Hersteller abgeschnitten werden.
Welches Ausgangsbild eignet sich?
Die beste Grundlage ist ein SVG: Es lässt sich verlustfrei auf alle genannten Größen skalieren. Alternativ eignet sich ein quadratisches PNG mit mindestens 512×512 Pixeln. So wird selbst das Android-Startbild durch Verkleinern statt durch Vergrößern erzeugt.
Ein breites Logo mit Text funktioniert bei 16×16 nicht: Ein Wort zerfällt in dieser Größe in wenige unlesbare Pixel. Verwende nur das Symbol oder ein bis zwei Buchstaben auf kontrastreichem Hintergrund.
Prüfe abschließend den Kontrast auf hellem und dunklem Hintergrund. Ein schwarzes Logo verschwindet in einem dunklen Tab. Genau dafür gibt es die dunkle Variante des SVG-Favicons.
Diese Größen brauchst du nicht mehr
Ältere Generatoren erzeugen noch Dateien für historische Integrationen, etwa Windows-Kacheln mit mstile-150x150.png und browserconfig.xml. Ergänze sie nur, wenn du diese Oberflächen ausdrücklich unterstützen musst.
Die lange Reihe apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 und 152x152 stammt aus einer Zeit, in der iOS Bilder nicht skalieren konnte. Ein Bild mit 180×180 ersetzt sie alle.
Ungenutzte Deklarationen zu entfernen vereinfacht Repository und HTML. Prüfe die von dir unterstützten Browser und Plattformen, bevor du eine bestehende Integration entfernst.
Primärquellen
Häufige Fragen
Braucht man noch eine favicon.ico?
Ja, aber nur im Stammverzeichnis der Website. Moderne Browser bevorzugen SVG, doch viele Crawler, Aggregatoren und E-Mail-Programme rufen /favicon.ico direkt ab, ohne das HTML zu lesen. Die Datei ist nur wenige Kilobyte groß: Behalte sie.
Welche Favicon-Größe verwendet Google in Suchergebnissen?
Google verlangt eine Seitenlänge als Vielfaches von 48 Pixeln und zeigt das Symbol meist mit 48×48 an. Ein PNG mit 96×96 oder ein SVG eignet sich problemlos. Das Symbol muss crawlbar sein und darf nicht durch robots.txt gesperrt werden.
Darf mein Favicon rechteckig sein?
Technisch ja, gestalterisch ist es ungeeignet. Jeder Anzeigekontext reserviert ein Quadrat. Ein rechteckiges Bild wird verzerrt oder mit leeren Streifen zentriert. Beginne immer mit einem Quadrat und ergänze bei Bedarf Ränder um das Symbol.