GIF in ICO umwandeln

Der typische Fall ist eine Website, die seit Jahren läuft und die niemand mehr aktiv pflegt: die Homepage eines Sportvereins, ein geerbtes WordPress-Blog eines Kleinunternehmens, eine Gemeindeseite aus der Zeit vor dem Relaunch. Das Logo existiert nur noch als GIF, weil das damals das übliche Format für ein Web-Icon war, und irgendwann bemerkt jemand, dass /favicon.ico im Browser-Tab fehlt oder ein graues Standardsymbol zeigt.

Ein neues Logo zeichnen zu lassen, ist für einen solchen Fall meist unverhältnismäßig. Das vorhandene GIF reicht, um wieder ein erkennbares Icon zu bekommen — die Frage ist nur, wie man aus einer alten Weboptimierung eine funktionierende ICO-Datei macht.

Ein GIF eines Logos ist fast nie das Logo selbst. Es ist ein Export, einmal für eine bestimmte Webseite in einer bestimmten Größe erzeugt, auf 256 Farben reduziert und oft aus einer größeren Vorlage verkleinert. Irgendwo liegt meist noch ein Original — eine Vektordatei, ein hochauflösendes PNG in einem alten Werbematerial-Ordner, eine Datei bei der ursprünglichen Werbeagentur.

Fünf Minuten Suchen lohnen sich, denn ein Icon aus Vektordaten lässt sich bei 16 Pixeln mit verstärkten Linien noch lesbar zeichnen, ein Icon aus einem 120-Pixel-GIF nicht. Bleibt die Suche erfolglos — was bei einer Website ohne aktiven Betreuer häufig vorkommt —, ist diese Umwandlung der sinnvolle Ausweg.

ICO ist ein Container. Microsoft hat ihn 1985 dafür entworfen, dieselbe Grafik in mehreren Größen zu speichern, damit Windows 16 Pixel für eine Liste, 32 für den Desktop und größere Werte für eine Vorschau wählen kann, ohne selbst etwas skalieren zu müssen. Das ist bis heute der Hauptvorteil gegenüber jedem anderen Icon-Format — und der Grund, warum ein Format aus dem Jahr 1985 auch 2026 noch von Browsern verlangt wird.

Genau diesen Satz schreibt die Umwandlung. Das Verzeichnis enthält einen Eintrag pro gewählter Größe — standardmäßig drei, bei 48, 32 und 16 Pixeln, jeweils ein eigenes PNG in dieser Größe. Für ein GIF ist das ein besseres Ergebnis, als es klingt: Ein kleines altes Logo auf 256 Pixel hochzuskalieren und dann von einem Browser wieder herunterrechnen zu lassen, ist genau der Weg, der aus einer erkennbaren Marke einen grauen Fleck macht.

Ist die längste Kante des GIFs größer als 256 Pixel, wird das Bild proportional auf genau 256 Pixel verkleinert; jeder Icon-Eintrag entsteht dann daraus. Ein GIF, das kleiner ist als die gewählten Größen, wird dagegen vergrößert — der einzige Fall, in dem das Ergebnis schlechter ausfällt als die Vorlage: ein 90-Pixel-Logo mit ausschließlich „256 px" gewählt ist am Ende ein hochskaliertes 90-Pixel-Logo.

Die Obergrenze liegt am Format selbst, nicht an einer Voreinstellung: Ein ICO-Verzeichniseintrag speichert jede Abmessung in einem einzigen Byte, und 256 passt dort nicht hinein — die Spezifikation schreibt in diesem Fall eine Null, was für 256 steht. Größer geht deshalb bei keinem Werkzeug, das diesen Format-Standard einhält.

Jeder geschriebene Eintrag ist quadratisch, weil ein Icon das nun einmal ist. Ein Schriftzug-GIF von 240 mal 64 Pixeln behält seine Proportionen und wird mittig auf das größtmögliche passende Quadrat gesetzt, die Ränder darüber und darunter bleiben transparent. Nichts wird gestaucht — ein verzerrtes Logo fällt aus der Entfernung sofort als Fehler auf.

Der Preis liegt woanders. Ein 240 mal 64 Pixel großer Schriftzug, mittig in ein 16-Pixel-Quadrat gesetzt, ist am Ende nur rund vier Pixel hoch, die transparenten Ränder verbrauchen ungenutzten Icon-Platz. Sinnvoll ist es deshalb, vor der Umwandlung auf ein Quadrat zuzuschneiden — und zwar zuschneiden, nicht skalieren: die Initiale, das Symbol oder das Monogramm mittig setzen und nur einen kleinen Rand belassen.

Jeder Eintrag im Verzeichnis ist ein PNG. Das Format erlaubt auch eine rohe Bitmap-Nutzlast — das war ursprünglich gemeint —, aber jedes Windows seit Vista liest ein PNG innerhalb einer ICO-Datei problemlos, die Datei ist dadurch deutlich kleiner, und der Alphakanal ist echt statt einer groben Ein-Bit-Maske. Das ist auch der Grund, warum das Icon auf einem dunklen Tab-Balken sauber aussieht.

Deshalb gibt es auf dieser Seite auch keinen Qualitätsregler. PNG ist verlustfrei und hat nichts, was sich herunterdrehen ließe; ein Regler würde sich bewegen und nichts verändern. Der angenehme Nebeneffekt: Mehrere kleine Einträge kosten weniger als ein großer. Drei PNGs bei 48, 32 und 16 Pixeln eines flachen Logos kamen auf 1.062 Byte gegenüber 2.229 Byte für eine einzelne 256-Pixel-Datei — ein besseres Favicon und eine kleinere Datei zugleich.

Transparenz in einem GIF ist ein einzelner Paletteneintrag, der als durchsichtig markiert ist. Ein Pixel ist entweder vollständig transparent oder vollständig deckend, dazwischen gibt es nichts — die Kantenglättung um eine Rundung herum wurde gegen einen bestimmten Hintergrund berechnet, für den das GIF ursprünglich gedacht war.

Auf 32 Pixel verkleinert, zeigt sich das. Der helle Schimmer eines gegen Weiß geglätteten Logos bleibt auf einem dunklen Browser-Theme genauso hell und wirkt dann wie ein schmutziger Rand statt einer klaren Kontur. Eine Einstellung, die das behebt, gibt es nicht, weil die Information über die richtigen Randfarben mit der GIF-Erstellung verloren ging. Fällt der Rand störend auf, hilft nur ein Neuentwurf aus der Originalvorlage.

Die Farbbegrenzung, die GIF als Fotoformat ungeeignet macht, spielt hier kaum eine Rolle. Logos sind flächige Farben, wie sie gezeichnet wurden — zwei oder drei Füllungen, harte Kanten, keine Verläufe —, und 256 Farbeinträge sind weit mehr, als so etwas braucht. Das GIF hält die Marke sehr wahrscheinlich exakt so, wie sie ursprünglich gezeichnet wurde.

Die eigentliche Grenze liegt in der Pixelgröße. Ein Icon wird bei 16 und 32 Pixeln beurteilt, dort zählt, ob die Form noch unterscheidbar bleibt: Eine dünne Serifenschrift verschwindet, ein zweiwortiger Schriftzug verschwindet, ein festes geometrisches Symbol übersteht es. Das lässt sich nur an einem echten Browser-Tab beurteilen, nicht an der geöffneten Datei — der häufigste Fehler beim ersten Versuch.

Aktuelle Praxis ist ein Satz aus PNGs und einem SVG-Icon, im Kopfbereich der Seite deklariert, und dafür gibt es gute Gründe. Trotzdem wird die Datei an der Wurzeladresse weiterhin von Browsern angefragt, die keine Deklaration finden, ebenso von Feed-Readern, Linkvorschauen und einer langen Reihe von Werkzeugen, die aus der Zeit stammen, als es der einzige Mechanismus war. Eine einzige Datei genügt, um all das zu bedienen.

Deshalb ist die pragmatische Lösung beides: eine ICO-Datei an der Wurzel als universeller Rückfall, daneben die modernen Deklarationen, sofern das Template der Website sie unterstützt. Die Umwandlung des GIFs liefert die erste Hälfte in einem Schritt — und genau diese Hälfte funktioniert auch dann noch, wenn sonst nichts konfiguriert ist.

Das GIF wird vom Browser dekodiert, das Bild wird als PNG kodiert, und das Icon-Verzeichnis wird darum herum im selben Tab geschrieben. Nichts erreicht einen Server, es gibt kein Konto und keinen Anmeldeschritt zwischen der Umwandlung und dem Download.

Bei einem Vereins- oder Firmenlogo mag das nebensächlich klingen, ist es aber gelegentlich nicht: Markenzeichen unter Sperrfrist, das interne Symbol einer Firmen-App, eine Kundenvorlage, die nur unter Vertrag geteilt werden darf. Für all das muss nichts durch fremde Server laufen, um zum Icon zu werden.