Favicons erstellen

Warum aus einem Icon neun Dateien wurden

Jede Datei im Set existiert, weil etwas Bestimmtes sie liest – und nichts anderes. favicon.ico mit 16, 32 und 48 ist nach wie vor das, wonach ein Browser standardmäßig im Stammverzeichnis sucht und was viele ältere Programme zuerst prüfen. favicon-16x16.png und favicon-32x32.png bevorzugen aktuelle Browser für den Tab, weil ein PNG in exakter Größe jede Skalierung schlägt. apple-touch-icon.png mit 180 Pixeln legt iOS auf den Homescreen – ohne Unterstützung für Transparenz, deshalb wird es auf einen einfarbigen Hintergrund gesetzt, statt mit schwarzen Ecken anzukommen. android-chrome-192x192.png und 512x512.png verwendet eine installierte Progressive Web App für ihr Launcher-Icon und ihren Startbildschirm, deklariert in site.webmanifest.

Ein einziges großes PNG für alles auszuliefern funktioniert überall schlecht und ist die häufigste Abkürzung. Der Browser lädt ein halbes Megabyte herunter, um sechzehn Pixel zu zeichnen, iOS ignoriert die Transparenzregeln und setzt Ihr Logo auf ein schwarzes Quadrat, und das Launcher-Icon wird von der Maske beschnitten, die die Plattform gerade anwendet. Das Set ist genau deshalb so mühsam, weil jeder Abnehmer seine eigenen Ansprüche hat.

Das HTML-Snippet ist genauso wichtig wie die Bilder. Die meisten dieser Dateien finden Browser nicht von selbst – nur favicon.ico im Stammverzeichnis wird per Konvention gefunden –, deshalb stellen die Link-Tags die Verbindung her, und das Manifest braucht einen eigenen. Das Snippet verwendet root-relative Pfade, die unverändert funktionieren, solange die Dateien im Stammverzeichnis liegen; legen Sie sie in einen Unterordner, müssen die Pfade im Snippet und im Manifest angepasst werden.

Gestalten Sie zuerst für 16 Pixel. In dieser Größe ist Platz für eine Form und vielleicht zwei Farben – kein Text, kein Verlauf, keine feinen Details und schon gar kein vollständiger Schriftzug. Eine quadratische, kräftige, kontrastreiche Vorlage mit mindestens 512 Pixeln oder ein SVG ergibt das sauberste Set; die Vorschau zeigt die 16-px-Darstellung ehrlich statt geschönt, denn das ist die, die Sie später enttäuschen wird. Nicht quadratische Vorlagen werden mit Transparenz zum Quadrat aufgefüllt, statt zugeschnitten oder gestreckt zu werden.

Wenn Sie etwas anderes brauchen

Das hier erzeugte Set ist der praxistaugliche moderne Kern. Wenn Sie auch den kompletten Rest brauchen – Windows-Kachelbilder, Safaris Mask-Icon für angeheftete Tabs, Microsofts browserconfig, die älteren Apple-Größen –, deckt RealFaviconGenerator all das ab und prüft danach Ihre Live-Website, was wirklich nützlich ist und hier nicht geht.

In einer Build-Pipeline ist es schlicht die falsche Arbeitsweise, Icons von Hand zu erzeugen. favicons, pwa-asset-generator und die auf sharp aufbauenden Framework-Plugins erzeugen das ganze Set bei jedem Deployment aus einer einzigen Quelldatei, sodass die Icons nicht veralten können, wenn sich das Logo ändert – was in der Praxis immer passiert.