WebP in ICO umwandeln

Ein häufiger Fall bei kleinen und mittleren Unternehmen: Die Website wurde vor einigen Jahren von einer Agentur gebaut, die Ausgangsdateien lagen auf deren Server, und dann ging die Agentur insolvent oder wurde übernommen und antwortet nicht mehr. Übrig bleibt die Website selbst — und das Logo darauf liegt als WebP vor, weil die Bildoptimierung beim Bau der Seite automatisch dorthin konvertiert hat.

Ausgelöst wird die Suche danach meistens von einem 404-Eintrag im Server-Log: Der Browser fragt automatisch /favicon.ico an, ganz gleich, ob im HTML-Kopf ein Verweis darauf steht, und wenn dort nichts liegt, protokolliert der Server das zuverlässig. Aus dem WebP der eigenen Website lässt sich ein brauchbares Favicon bauen, ohne dass die Originaldateien wieder auftauchen müssen.

Bevor das WebP zum Ausgangspunkt wird, lohnen sich dreißig Sekunden Suche nach etwas Besserem, denn eine bessere Quelle ergibt ein besseres Icon. Drei Stellen sind schnell geprüft: die Adresse /favicon.svg direkt auf der Domain, der Seitenquelltext nach „.svg" durchsucht, oder ein Blick, ob dasselbe Bild irgendwo auch als PNG ausgeliefert wird.

Findet sich eines davon, ist SVG in ICO oder PNG in ICO die bessere Seite dafür. Findet sich nichts, ist das WebP von der eigenen Website ein völlig legitimer Ausgangspunkt — es ist schließlich das Logo, das die Firma tatsächlich verwendet, und kein Ersatz dafür.

Die hier geschriebene ICO-Datei ist auf 256 Pixel an der längsten Kante begrenzt — das ist die Grenze des Formats selbst, weil das Verzeichnis jede Abmessung in einem einzelnen Byte ablegt und 256 dabei als Null geschrieben wird. Bei den meisten Icon-Seiten ist genau diese Grenze das eigentliche Thema, weil die Quelle dort eine Druckdatei oder ein Kamerafoto mit tausenden Pixeln ist.

Hier meist nicht. Websites liefern Logos in der Größe aus, die das Layout braucht, häufig über einen Bilddienst, und 240 bis 400 Pixel Breite ist für ein Kopfzeilen-Logo völlig normal — mehr als genug für die drei Standardgrößen 48, 32 und 16. Riskant wird es erst, wenn ausdrücklich größere Größen angefordert werden, als die Quelle hergibt: Ein 120-Pixel-Logo, das mit „Alle gängigen Größen" umgewandelt wird, wird für die 256er- und 128er-Einträge hochskaliert — das bringt mehr Bytes und kein zusätzliches Detail.

Ein WebP kann verlustfrei oder verlustbehaftet sein, und die Endung sagt nicht, welches von beidem vorliegt. Ein verlustfreies WebP eines flachen Logos ist so sauber wie ein PNG. Ein verlustbehaftetes wurde durch eine Transformation geglättet, die Flächen weichzeichnet und an harten Kanten klingelt — bei 400 Pixeln unsichtbar, nach dem Verkleinern auf 32 Pixel neben einem Seitentitel nicht mehr.

Sichtbar wird das als leichter grauer Schleier um die Kontur und eine gewisse Unschärfe in dem, was eigentlich eine klare Fläche sein sollte. Nichts auf dieser Seite entfernt das, weil die Information fehlt. Was hilft: von einer größeren Quelle starten, wenn möglich, und das Logo vorab auf das Symbol allein zuschneiden, damit das verbleibende Detail dort sitzt, wo es auch gelesen wird.

Die hier erzeugte ICO-Datei enthält je Größe ein PNG statt einer rohen Bitmap — die moderne Konvention, die jedes Windows seit Vista liest, und dabei ein Bruchteil der Größe der alten Bitmap-Variante. Wichtiger ist der echte 8-Bit-Alphakanal, den WebP ebenfalls führt: Ein freigestelltes Logo bleibt freigestellt, mit weichen, kantengeglätteten Rändern.

Ein Favicon braucht das mehr als die meisten Bilder. Es sitzt in der Browser-Tableiste, die je nach hellem oder dunklem Design und je nach Browser eine andere Farbe hat; ein Logo auf einem undurchsichtigen weißen Quadrat sieht im Dunkelmodus wie ein Darstellungsfehler aus und im Hellmodus wie ein Aufkleber. Liegt das Logo auf einem flachen weißen Hintergrund statt transparent vor, ist das Entfernen dieses Hintergrunds vor der Umwandlung die wirksamste Einzelmaßnahme.

WebP kann eine Animation enthalten, und der hier verwendete Dekoder liest ausschließlich Standbilder. Eine animierte Datei wird mit einer lesbaren Meldung abgelehnt statt still auf das erste Bild reduziert — die bessere der beiden möglichen Reaktionen, und dieselbe wie bei jedem anderen WebP-Paar auf dieser Website.

In diesem Fall ist das ohnehin kein Verlust: Browser animieren ICO-Favicons nicht, ein animiertes Ausgangsbild hätte also nie ein animiertes Icon ergeben. Wird nur ein Bild gebraucht, hilft ein Screenshot der Animation im Browser; soll die Bewegung selbst erhalten bleiben, ist WebP zu GIF die passende Seite.

Das ist eine Gestaltungsfrage, keine technische, und sie entscheidet den größten Teil des Ergebnisses. Ein Favicon wird in der Praxis bei 16 oder 32 Pixeln betrachtet, und bei dieser Größe wird ein Slogan zu einem grauen Fleck, eine ausgemalte Schrifttype läuft zu, eine dünne Linie verschwindet, und ein Zeichen mit mehr als drei Elementen wird zu einem Klecks.

Das WebP vor der Umwandlung auf das Symbol allein zuschneiden: Wortmarke weg, Rand weg, alles dünner als ein Vierzigstel der Breite weg. Besteht die Marke nur aus einer Wortmarke ohne Symbol, ist ein einzelner Buchstabe in der Hausschrift die übliche Lösung — sie ist bei 16 Pixeln lesbar, der volle Name nicht.

Der ICO-Behälter wurde ausdrücklich dafür entworfen, mehrere Größen desselben Motivs zu tragen, und genau das schreibt diese Umwandlung: ein Verzeichniseintrag je Größe, standardmäßig drei bei 48, 32 und 16 Pixeln. Ein Browser, der einen Tab zeichnet, liest die 16er-Version, statt eine 256er mit eigenem Filter zu verkleinern — der Unterschied, für den das Format existiert.

Metadaten reisen nicht mit. Jede bildbasierte Umwandlung auf dieser Website dekodiert auf reine Pixel und kodiert neu, sodass EXIF, XMP oder ein ICC-Profil im WebP verworfen werden — bei einem Favicon durchweg willkommen, weil die Datei am Ende nur wenige Kilobyte PNG hinter einem winzigen Verzeichnis ist.

Die Datei gehört an die Wurzel der Website als /favicon.ico. Browser fragen genau diesen Pfad automatisch ab, unabhängig davon, ob das HTML darauf verweist — daher der 404-Eintrag im Log selbst bei Seiten, die im Kopf bereits ein Icon deklarieren. Ein zusätzliches link-Element macht die Absicht ausdrücklich und erlaubt, auf eine andere Datei zu verweisen.

Danach hilft nur Geduld und ein erzwungenes Neuladen, bevor man ein Urteil fällt: Favicons werden von jedem Browser und vielen zwischengeschalteten Proxys aggressiv zwischengespeichert, ein neues Icon braucht routinemäßig einen Tag oder ein hartes Neuladen, bis es erscheint. Moderne Browser akzeptieren auch PNG oder SVG über ein link-Element; die reine ICO-Datei bleibt vor allem für die nackte /favicon.ico-Anfrage und für Windows-Verknüpfungen nötig.

libwebp, kompiliert zu WebAssembly, dekodiert die Datei, das Bild wird skaliert und je Größe als PNG mit oxipng kodiert, das ICO-Verzeichnis darum herum geschrieben. All das im eigenen Browser: nichts wird hochgeladen, es gibt kein Konto und keine Tagesgrenze.

Auf dieser Seite ist das der Rede wert, weil die Datei ein Logo ist, das jemandem gehört — womöglich einer Kundin, womöglich einer noch nicht veröffentlichten Marke. Die kostenlose Grenze liegt bei 100 MB je Datei, die kein Logo je erreicht. Liegen mehrere Marken in einem Projekt, funktioniert auch das im Ordner: hineinziehen, ZIP herausnehmen, der Programmcode lädt sich nur einmal für den ganzen Durchlauf.