Favicon-Generator – favicon.ico und PWA-Icons erstellen

Was dieser Favicon-Generator erzeugt

Ein Favicon ist schon lange keine einzelne Datei mehr. Ein Browser-Tab möchte 16 Pixel, ein Retina-Tab 32, eine Windows-Desktopverknüpfung 48, ein iPhone-Startbildschirm ein 180-Pixel-PNG und eine installierbare Web-App die in einem Manifest deklarierten 192- und 512-Pixel-Icons. Dieses Tool nimmt ein einzelnes Ausgangsbild und erzeugt all das auf einmal: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png und eine site.webmanifest, verpackt in einem ZIP zusammen mit den vier HTML-Zeilen, die sie einbinden. Das .ico wird von Hand gebaut, statt es einem Konverter zu überlassen. ICO ist ein Containerformat, kein Codec: Ein sechs Byte großer Verzeichnis-Header zeichnet auf, wie viele Bilder enthalten sind, dann folgt pro Bild ein sechzehn Byte großer Eintrag, der Breite, Höhe, Byte-Länge und absoluten Offset vermerkt, gefolgt von den Bilddaten. Jeder aktuell genutzte Browser akzeptiert PNG-Daten in diesen Nutzdaten, daher schreibt dieser Generator PNGs statt der veralteten BMP/DIB-Codierung mit ihrer umgekehrten Zeilenanordnung und separaten Ein-Bit-Transparenzmaske. Drei Bilder werden eingebettet – 16, 32 und 48 Pixel –, sodass Windows und ältere Browser die benötigte Größe wählen können, statt eine einzelne schlecht zu skalieren. Eine Eigenart des Formats sollte man kennen, falls man die Bytes einmal prüft: Breite und Höhe belegen jeweils ein einzelnes Byte, daher wird 256 als Null geschrieben und alles, was größer ist, kann überhaupt nicht ausgedrückt werden. Der Skalierungsqualität gilt die gleiche Aufmerksamkeit. Ein 1024-Pixel-Logo in einem drawImage-Aufruf direkt auf 16 Pixel herunterzurechnen, zwingt den bilinearen Filter des Browsers dazu, einen 64x64-Block aus einer 2x2-Abtastung zusammenzufassen, wobei fast jedes Quellpixel verworfen wird und der gesprenkelte Brei entsteht, für den handgestrickte Favicons bekannt sind. Stattdessen halbiert dieses Tool das Bild wiederholt, wobei es die Größe niemals in einem einzigen Schritt um mehr als die Hälfte reduziert. So mittelt jeder Durchgang eine vollständige Nachbarschaft und feine Details bleiben bis hinunter zu 16 Pixel erhalten. Eckenradius und Innenabstand werden dabei als Teil des Rendervorgangs angewandt, nicht danach, was die abgerundete Kante in jeder Größe sauber antialiasst.