Die Favicon-Größen, die Browser und Geräte tatsächlich wollen

Ein Favicon bedeutete früher ein einzelnes kleines 16×16-Bild. Jetzt erwarten ein Browser-Tab, eine Homescreen-Verknüpfung eines Handys, eine Lesezeichenleiste und ein Apple-Touch-Icon jeweils ihre eigene Größe, und nur eine bereitzustellen lässt einige dieser Kontexte entweder unscharf erscheinen oder zeigt ein generisches Ersatz-Icon statt des eigenen.

Warum eine Größe nicht ausreicht

Ein auf einen 180×180-Homescreen-Icon-Platz vergrößertes 16×16-Icon sieht genauso pixelig aus wie jedes kleine Bild, das groß gestreckt wird — es gibt keine Möglichkeit, Detail hinzuzufügen, das in der Quelle nicht vorhanden war. Jeder Kontext, in dem ein Favicon auftaucht, hat seine eigene erwartete Auflösung, und moderne Praxis ist es, einen Satz von Größen bereitzustellen, statt sich darauf zu verlassen, dass ein Browser eine einzelne kleine Datei schlecht hochskaliert.

Die Größen, die es abzudecken lohnt

• 16×16 und 32×32 — die klassischen Favicon-Größen, verwendet in Browser-Tabs und Lesezeichenlisten der meisten Desktop-Browser.
• 180×180 — die von Apple erwartete Größe für das Homescreen-Icon, wenn eine Seite zum Homescreen eines iPhones oder iPads hinzugefügt wird.
• 192×192 und 512×512 — verwendet von Android und von Web-App-Manifesten für Homescreen-Icons und Startbildschirme bei installierbaren Web-Apps.

Das Design bei 16px lesbar halten

Favicon-Generator nimmt ein Quellbild und erzeugt daraus auf einmal den vollständigen Satz der Standardgrößen, vollständig in deinem Browser — aber kein Generator kann ein Design reparieren, das schon bei kleinen Größen nicht funktioniert. Feine Details, dünne Linien und kleiner Text verschwinden bei 16×16 vollständig; eine einfache, kräftige Form oder Buchstabenform, die auch verkleinert erkennbar bleibt, ist das, was in einem Browser-Tab wirklich klar zu lesen ist, unabhängig davon, wie viele Größen daraus erzeugt werden.