ICO in WebP umwandeln

Eine ICO-Datei beantwortet eine Frage, die das Betriebssystem stellt: gib mir dieses Zeichen in der Größe, die ich gerade brauche. Dafür liegen mehrere Zeichnungen in einer einzigen Datei mit einem Verzeichnis davor. Ein WebP stellt diese Frage nicht — es ist ein Bild, in einer Größe, gedacht dafür, von einem Stylesheet platziert zu werden.

Die Umwandlung ist deshalb eher ein Rollenwechsel als ein Formatwechsel. Herauskommt ein Bild, das sich wie jedes andere Bild auf der Seite verhält: mit fester Breite, in einem srcset, mit einem eindeutigen Dateinamen zwischengespeichert. Verloren geht die Fähigkeit des Betriebssystems, selbst eine passende Größe auszuwählen — auf einer Webseite hat es das ohnehin nie getan.

Shopware, die in Schöppingen entwickelte deutsche Shop-Software, liefert ihr Standard-Theme mit WebP als bevorzugtem Bildformat aus und wandelt hochgeladene Produktbilder beim Build automatisch um. Ein Icon, das aus einem alten Windows-Projekt oder einer Marken-Guideline nur als ICO vorliegt — ein Zahlungssymbol, ein Gütesiegel, ein Partner-Logo in der Fußzeile — passt in diesem Workflow schlicht nicht zu den restlichen Assets.

Wer sein Theme konsequent auf ein Format hält, spart sich eine zweite Pipeline nur für ein paar Icons. Das ist der eigentliche Grund, WebP hier zu wählen, nicht die Dateigröße — dazu gleich mehr.

WebP trägt einen vollen Achtbit-Alphakanal, sodass ein freigestelltes Zeichen, eine abgerundete Kachel oder ein weicher Schatten unbeschädigt ankommt und sich auf jeden Hintergrund der Seite legt. Am eigenen Testicon liest der Eckpixel des Ergebnisses 0,0,0,0 — vollständig transparent. Geschrieben wird die erweiterte VP8X-Form, die genau dafür Platz macht.

Diese eine Eigenschaft schließt JPEG für diese Aufgabe komplett aus, und es lohnt sich, das zu sagen, weil beide Formate sich in der Art der Kompression sonst nahestehen. Hat das Icon keinerlei transparente Pixel — eine quadratische Kachel mit durchgehendem Hintergrund —, ist das Argument deutlich schwächer und beide Formate würden funktionieren.

Die Qualitätseinstellung startet bei 82, ein sinnvoller Mittelwert für ein Foto und etwas niedrig für Artwork aus flachen Flächen und harten Kanten. Verlustbehaftete Kompression wirft Details weg, die das Auge kaum vermisst — bei einem Foto ist das Textur, bei einem Icon ist das die Kante einer Buchstabenform.

Bei 256 Pixeln ist die gesamte Datei ohnehin nur wenige Kilobyte groß, es gibt also kaum etwas zu verteidigen, wenn die Qualität niedrig bleibt. Auf 95 oder höher gestellt bleiben Umrisse scharf, für einen Preis im einstelligen Kilobyte-Bereich.

Der übliche Vorteil von WebP liegt bei einem Viertel bis einem Drittel weniger Bytes gegenüber der Alternative bei gleicher Qualität — gebaut auf Fotos. Bei kleiner, flacher Artwork trägt dieser Vorteil nicht, weil PNGs Kombination aus Filterung und Lauflängenkompression dort kaum zu schlagen ist.

Am selben 256-Pixel-Testicon gemessen: 3.054 Byte als WebP gegen 1.737 Byte als PNG — das WebP ist rund drei Viertel größer, obwohl es das verlustbehaftete Format ist. Ging es beim Umwandeln um Bandbreite, bringt es nichts. Muss das Icon nur zur restlichen WebP-Pipeline passen, ist das ein guter Grund, und die paar Kilobyte spielen keine Rolle.

Der Browser entpackt das Icon und liefert dessen größten Eintrag, und genau der wird kodiert. Geprüft wurde das mit einer Datei aus 16, 32, 48 und 256 Pixel großen Zeichnungen in vier unterschiedlichen Farben und in drei verschiedenen Reihenfolgen im Verzeichnis — jedes Mal kam die 256-Pixel-Zeichnung heraus.

Die Obergrenze liegt bei 256 Pixeln und gehört zum ICO-Format: Ein Eintrag speichert seine Breite in einem einzigen Byte, wobei null für 256 steht. WebP selbst kommt bis 16.383 Pixel, die Grenze liegt also nicht auf der Zielseite. Wird ein größeres Bild gebraucht, liefert die Icon-Datei es nicht.

Die häufigste Enttäuschung bei dieser Umwandlung ist ein Zeichen, das als Browser-Tab passt und in einem 200 Pixel breiten Header-Slot unscharf wirkt. Das liegt nicht am Kodierer — das Icon wurde für Tabs gezeichnet. Kleine Icon-Einträge werden häufig neu gezeichnet statt skaliert, mit auf Pixel ausgerichteten Strichen und weggelassenem Detail, und das Vergrößern zeigt genau diese vereinfachte Zeichnung in niedriger Auflösung.

Vor dem Einbau also die Pixelmaße des Ergebnisses prüfen. Sind es 32 Pixel, bleiben nur die ehrliche Anzeige bei 32 Pixeln oder die Suche nach der Originalgrafik — die Maximalbreite hier verkleinert nur, und kein Konverter fügt Detail hinzu, das nie gespeichert wurde.

Konsistenz ist ein echter technischer Vorteil, auch wenn die Bytezahl dagegenspricht. Ein Shop, der ein einziges Format für alle Rasterbilder ausliefert, hat eine Caching-Regel, einen Build-Schritt und ein Set an Content-Negotiation-Regeln — und muss nur eines davon pflegen. Eine PNG-Ausnahme für sechs Icons kostet an Komplexität mehr, als sie an Kilobyte spart.

Der andere echte Fall ist ein großer Icon-Bestand. Sechzig Zahlungs- und Gütesiegel-Kacheln zu je drei Kilobyte sind 180 Kilobyte, und wenn sie gemeinsam laden, macht sich der Unterschied zur PNG-Variante bemerkbar — wobei in diesem Vergleich PNG vorn liegt, der Grund zum Vereinheitlichen also die Pipeline ist, nicht die Rechnung.

Umwandeln heißt nicht löschen. Browser fragen weiterhin /favicon.ico an der Wurzel jeder Seite an, unabhängig davon, was das HTML deklariert — also die Originaldatei dort belassen und das WebP als eigenständiges Asset mit anderer Aufgabe behandeln. Es sind keine zwei Versionen derselben Datei, sondern zwei Dateien, die zufällig dasselbe Zeichen zeigen.

Im Markup gehört das WebP in ein img- oder picture-Element wie jedes andere Bild, das Icon bleibt im link-Element im Kopfbereich. Beides zu mischen — ein Favicon-Link auf ein WebP zeigen zu lassen — funktioniert in aktuellen Browsern und scheitert in genug anderer Software, dass sich die Ersparnis nicht lohnt.

Wird ein ganzer Ordner abgelegt, wird jede Datei einzeln entpackt und kodiert, das Ergebnis kommt als ZIP zurück. Die Qualitätseinstellung gilt für alle gleich — genau richtig für eine Kachelreihe von Gütesiegeln, bei der ein einzelner weicherer Eintrag stärker auffiele als jedes einzelne leicht unscharfe Ergebnis.

Die Maße bleiben ungleich, sofern der Ausgangsbestand es schon war. Über Jahre gewachsene Icon-Sammlungen mischen Dateien mit einem 256-Pixel-Eintrag und Dateien, die bei 32 aufhören, und die WebPs übernehmen diese Streuung ohne Warnung — vor dem Einbau in ein Layout mit fester Größe lohnt sich ein Blick ins ZIP.

Ein häufiger konkreter Fall in deutschen Onlineshops sind Zahlungssymbole, die noch aus einem Icon-Paket von vor einigen Jahren stammen — als viele Payment-Anbieter ihre Logos nur als ICO- oder als Sprite-Sammlung auslieferten. Solche Symbole liegen oft in einem alten Theme-Ordner und werden bei einer Migration auf ein neues, WebP-basiertes Theme einfach mitgenommen, ohne dass jemand das Format hinterfragt.

Für ein einzelnes Zahlungssymbol lohnt sich meistens ohnehin die Suche nach der aktuellen Markenrichtlinie des jeweiligen Anbieters, weil sich Logos über die Jahre ändern. Ist das alte Symbol aber weiterhin gültig und nur das Format überholt, ist diese Umwandlung der schnellere Weg als eine erneute Suche nach der Originaldatei.

Ein naheliegender Gedanke ist, gleich das Favicon selbst durch die neue WebP-Datei zu ersetzen, um eine Konvertierung ganz zu sparen. Davon ist abzuraten: Die Unterstützung für WebP als Favicon-Format ist über Browser und Betriebssysteme hinweg uneinheitlich, während ICO und PNG in einem link-Element im Kopfbereich überall zuverlässig funktionieren.

Die saubere Lösung bleibt deshalb, beide Dateien parallel zu pflegen: die ICO-Datei für den Favicon-Link, die WebP-Datei für jede Stelle, an der das Zeichen als gewöhnliches Bild im Fließtext oder in einer Produktkachel erscheint.

Entpacken und Kodieren laufen beide im Browser, die Icon-Datei verlässt den eigenen Rechner also nicht. Bei einem Shop-Logo oder einem internen Werkzeug-Icon ist das vor allem praktisch: Kein Warten auf einen Server, kein Konto, kein Tageslimit — und bei einem hundertteiligen Icon-Bestand aus dem Theme-Ordner spielt das durchaus eine Rolle.

Die praktische Grenze ist damit nicht mehr die Kapazität eines fremden Dienstes, sondern der Arbeitsspeicher des eigenen Geräts, und der reicht für ICO-Dateien in jeder üblichen Größenordnung locker aus.