Ein Favicon ist kein einzelnes Bild mehr. Browser, Handys und Betriebssysteme greifen jeweils eine andere Größe für einen anderen Platz – den Browser-Tab, ein Lesezeichen, einen iOS-Startbildschirm, einen Android-App-Umschalter. Liefern Sie ein 32×32-PNG, funktioniert es im Tab, sieht aber unscharf aus, wenn jemand Ihre Seite auf dem Handy speichert. Liefern Sie den vollen Satz, und jede Oberfläche bekommt ein scharfes Icon.
Hier ist genau, welche Größen Sie brauchen, was jede tut und warum die Liste so aussieht, wie sie aussieht.
Die Größen, die zählen
Die meisten Seiten sind mit sechs PNG-Größen plus einer alten .ico abgedeckt. Hier die Referenz:
| Größe | Format | Wo sie genutzt wird |
|---|---|---|
| 16×16 | PNG (in .ico) | Browser-Tab, Adressleiste, Lesezeichen |
| 32×32 | PNG (in .ico) | Retina-Tabs, Windows-Taskleisten-Verknüpfungen |
| 48×48 | PNG | Windows-Seitenicons, einige Android-Oberflächen |
| 180×180 | PNG | iOS-Startbildschirm (apple-touch-icon) |
| 192×192 | PNG | Android-Startbildschirm, PWA-Installation |
| 512×512 | PNG | PWA-Splashscreen, App-Stores, High-DPI |
Die favicon.ico-Datei ist ein Container, der die kleinen Größen bündelt (meist 16 und 32, manchmal 48). Ältere Browser und Windows suchen sie namentlich in Ihrem Seiten-Root, sie zu liefern lohnt sich also weiterhin, auch wenn moderne Browser bereitwillig PNGs nutzen.
Warum so viele? Ein kurzer Rundgang
Die Liste ist lang, weil das Icon in völlig unterschiedlichen physischen Größen auftaucht.
16 und 32 sind die alltäglichen Tab-Icons. 16 ist die klassische Größe; 32 deckt High-DPI-Bildschirme („Retina") ab, wo 16 weich aussähe. Browser wählen, was zur Pixeldichte passt.
48 ist eine Windows-Sache – es wird für Seitenverknüpfungen genutzt und erscheint schärfer an ein paar Stellen, die 32 nicht gut abdeckt.
180 ist Apples apple-touch-icon. Tippt jemand „Zum Home-Bildschirm hinzufügen" auf einem iPhone oder iPad, nutzt iOS dieses. Machen Sie es falsch, greift iOS entweder einen verkleinerten Screenshot oder zeigt eine schlichte Buchstabenkachel – keines sieht nach Ihrer Marke aus.
192 und 512 sind die Progressive-Web-App-Größen, deklariert in einer manifest.webmanifest-Datei. 192 ist das Android-Startbildschirm-Icon; 512 speist den Splashscreen und wird für alles andere, was das OS braucht, herunterskaliert. Ist Ihre Seite installierbar, sind diese zwei unverzichtbar.
Brauchen Sie größer als 512?
Nein. 512×512 ist die praktische Obergrenze für Web-Favicons – die webmanifest-Spezifikation und jede große Plattform enden dort. Ist Ihre Quellgrafik 1024 oder größer, ist das als Ausgangs-Bild in Ordnung (mehr Detail zum Herunterskalieren), aber Sie liefern kein 1024-Favicon. Alles über 512 fügt nur Bytes hinzu, die niemand nutzt.
Die eine Regel, die nach oben zählt: Starten Sie von einer großen, quadratischen Quelle. Ein 512×512- oder 1024×1024-Original skaliert sauber auf jede Größe darunter herunter. Starten Sie von einem winzigen Bild, sehen die kleinen Größen matschig aus, weil es nie genug Detail zum Behalten gab.
So gestalten, dass es 16×16 übersteht
Die schwerste Größe ist die kleinste. Bei 16×16 wird ein detailliertes Logo zu einem unlesbaren Fleck. Ein paar Tipps, die über Seiten hinweg gelten:
- Vereinfachen. Eine volle Wortmarke liest sich bei 16 px nicht. Nutzen Sie einen einzelnen Buchstaben, ein Monogramm oder den erkennbarsten Teil Ihrer Marke.
- Kontrast hoch halten, damit die Form auf hellen und dunklen Tab-Hintergründen leserlich bleibt.
- Etwas Abstand lassen – ein Icon, das alle vier Kanten berührt, wirkt im Tab beengt.
- Klein testen. Zoomen Sie Ihren Browser heraus oder sehen Sie einfach den echten Tab an. Erkennen Sie es nicht auf einen Blick, vereinfachen Sie weiter.
Den ganzen Satz erzeugen
Sie bauen diese nicht von Hand. Ziehen Sie ein quadratisches Bild in den Favicon-Generator, und er erzeugt den vollen Satz auf einmal – favicon.ico, die 16/32/48/180/192/512-PNGs, ein einsatzbereites webmanifest und das exakte HTML-<head>-Snippet zum Einfügen. Alles läuft in Ihrem Browser: Das Bild wird nie hochgeladen, und nach Ihrem ersten Besuch funktioniert das Werkzeug offline.
Das HTML, mit dem Sie enden
Zur Referenz sieht ein vollständiges Favicon-Setup in Ihrem <head> etwa so aus:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Der Generator schreibt das für Sie, Sie können es also direkt einfügen. Decken Sie die sechs Größen plus die .ico und das Manifest ab, und jeder Browser, jedes Handy und OS bekommt das scharfe Icon, das es verlangt.