SVG in ICO umwandeln

Wer eine Website in Deutschland betreibt, kennt den Zwang zum Impressum nach dem Digitale-Dienste-Gesetz — was oft übersehen wird, ist eine ganz andere, technische Pflicht: Browser fragen /favicon.ico von der Wurzel jeder Seite ab, unabhängig davon, was im HTML steht. Fehlt die Datei, füllt sich das Zugriffsprotokoll mit 404-Fehlern, und Werkzeuge, die keine Deklaration im Kopf des Dokuments auswerten, zeigen gar kein Symbol.

Das Logo liegt bei einem Website-Relaunch heute fast immer als SVG vor, weil so Logos inzwischen geliefert werden. Diese Seite macht daraus die eine kleine Datei am Wurzelverzeichnis, die den Punkt auf der Startklar-Liste erledigt und die stille Fehlermeldung im Log beendet.

Die meisten Icon-Umwandlungen starten mit etwas, das bereits einmal gerendert wurde — ein PNG-Export, ein Screenshot, eine gefundene JPEG-Datei. Jede davon trägt die Auflösung und die Artefakte dessen mit sich, was sie erzeugt hat, und sie auf Icongröße zu verkleinern häuft diese Fehler eher an. Ein SVG trägt keine mit sich: Es sind Anweisungen, der Renderer zeichnet die Marke also frisch in genau der Größe, die das Icon braucht.

Das bedeutet, die Kanten werden einmal geglättet statt zweimal, Kurven werden berechnet statt neu abgetastet, und es gibt keinen weichen Rand von einem früheren Export. Ist der Vektor vorhanden, ist er hier der richtige Startpunkt — eine der wenigen Umwandlungen, bei denen sich die Wahl der Quelle im Ergebnis deutlich zeigt.

Eine ICO-Datei ist ein Container, gebaut dafür, dieselbe Marke in mehreren Größen zu halten, damit Windows eine scharfe 16-Pixel-Version in der Taskleiste und eine scharfe 256-Pixel-Version auf dem Desktop zeigen kann, ohne eine davon zu skalieren. Die Auswahl der Größen entscheidet der Regler auf dieser Seite; voreingestellt sind 16, 32 und 48 Pixel, jede ein eigenes PNG mit intaktem Alphakanal.

Zweihundertsechsundfünfzig ist die Obergrenze des Formats selbst, keine hier getroffene Wahl: Ein Eintrag speichert seine Breite in einem einzigen Byte, das bei 255 endet, die Spezifikation reserviert deshalb den Wert null für 256 — und genau dieses Byte wird für ein volles Icon geschrieben. Die Einträge stehen größte zuerst, weil ein Decoder, der die Verzeichnisstruktur ignoriert, meist einfach den ersten nimmt, und der größte ist dabei die geringste Verschlechterung.

Bei der Standardauswahl skaliert er gar nichts: Er liest das Verzeichnis, findet einen bereits 16 Pixel großen Eintrag und zeichnet genau diesen. Das ist der Unterschied, für den der Container erfunden wurde, und er ist sichtbar — ein 256-Pixel-Bild, das ein allgemeiner Skalierungsfilter des Browsers spontan verkleinert, verliert jede Ausrichtung, die die Marke scharf machte, während ein 16-Pixel-Eintrag einmal, in einem gefilterten Durchgang, verkleinert wurde, bevor die Datei geschrieben wurde.

Was keine der beiden Varianten tut, ist die Marke neu zu zeichnen. Der 16-Pixel-Eintrag hier ist das verkleinerte 256-Pixel-Rendering, nicht das SVG neu gerendert bei 16 mit auf das Raster einrastenden Konturen — eine ein Pixel breite Linie wird also trotzdem weicher, und eine Fläche in einem Buchstaben füllt sich zu. Für eine solide Form oder einen kräftigen Umriss ist das unproblematisch, für feine Details nicht.

Die Beschränkung ist hart, und man plant besser dafür, als gegen sie anzukämpfen. Sechzehn mal sechzehn sind 256 Pixel insgesamt — weniger als die Zeichen in diesem Satz. Alles, was mehr als etwa drei erkennbare Formen braucht, wird bei dieser Größe nicht mehr lesbar.

Die üblichen Schritte: den Schriftzug ganz weglassen und nur das Symbol behalten, Konturen verstärken, damit sie auf ganze Pixel fallen, den Kontrast gegen helle wie dunkle Hintergründe erhöhen, und jedes Detail entfernen, das kleiner ist als ein Zehntel der Breite. Weil der Ausgangspunkt ein Vektor ist, bedeutet eine vereinfachte Variante nur, ein paar Ebenen auszublenden und ein zweites SVG zu exportieren.

Das Bild im Icon ist ein PNG, der Alphakanal kommt also durch die ganze Kette: resvg rendert die Zeichnung auf nichts, die Pixel behalten ihre Transparenz, und das PNG speichert sie. Eine abgerundete Marke behält ihre abgerundeten Ecken, statt ein weißes Quadrat dazuzugewinnen.

Das zählt mehr als früher. Browser rendern Tableisten inzwischen im hellen oder dunklen Farbschema des Betriebssystems, und ein Favicon mit fest eingebrannt weißem Hintergrund verrät sich sofort auf einem dunklen. Den Hintergrund aus der Zeichnung heraushalten und den Alphakanal die Arbeit machen lassen.

Aktuelle Browser akzeptieren ein SVG-Favicon direkt, und dort ist es die eindeutig bessere Wahl: eine kleine Datei, in jeder Größe scharf, und sie kann über eine Media Query in der Zeichnung selbst auf ein dunkles Farbschema reagieren. Üblich ist heute eine Kombination: ein im Markup deklariertes SVG und ein ICO an der Wurzel für alles andere.

Das ist kein Grund, das Icon auszulassen. Die Abfrage nach /favicon.ico stellen Browser unabhängig vom HTML, dazu ein langer Rattenschwanz an Feed-Readern, Link-Vorschauen und Crawlern, die kein HTML auswerten. Beide Dateien zusammen sind ein paar Kilobyte, und die Frage kommt danach nicht wieder auf.

Die Datei kommt als favicon.ico an die Wurzel. Diese eine Platzierung erledigt die automatische Abfrage und braucht kein Markup — der Grund, warum sie dreißig Jahre Wandel des Webs überstanden hat.

Danach den Rest ausdrücklich deklarieren: ein link-Element mit rel="icon" und type="image/svg+xml" für das SVG, dazu ein apple-touch-icon-PNG mit 180 Pixeln für iOS, das beide anderen ignoriert. Drei Dateien decken jeden heutigen Client ab, und das Icon ist die einzige, die keine Deklaration braucht.

Favicons werden ungewöhnlich hartnäckig zwischengespeichert, in einem eigenen Speicher getrennt vom normalen Seiten-Cache, und ein harter Reload leert ihn oft nicht. Das erzeugt zuverlässig ein paar Minuten des Eindrucks, die Umwandlung sei fehlgeschlagen, obwohl die Datei auf dem Server längst korrekt ist.

Die Datei direkt prüfen, indem ihre eigene URL in einem Tab geöffnet wird — das umgeht den Icon-Cache vollständig. Zeigt sich dort das richtige Bild, hat der Deploy funktioniert. Um den Tab zum Aktualisieren zu zwingen, die Seite in einem privaten Fenster öffnen oder für einen Deploy einen Query-String an das link-Element hängen.

Nichts an dieser Umwandlung schneidet zu. Die Zeichnung wird in ihren eigenen Proportionen gerendert, und jeder Icon-Eintrag entsteht danach, indem sie im größtmöglichen Maßstab auf eine quadratische Fläche zentriert wird — eine breite viewBox bekommt oben und unten transparenten Rand, statt gestreckt zu werden. Verzerrt wird nie, aber eine Marke, die dreimal breiter als hoch ist, füllt am Ende nur ein Drittel des Quadrats und wirkt wie ein kleines Logo in einem großen Tab.

Die Lösung liegt im SVG selbst: die viewBox quadratisch setzen und die Marke mit dem passenden Rand darin platzieren, in dem Wissen, dass Icons meist randlos angezeigt werden. Ein Symbol, das etwa neunzig Prozent des Quadrats füllt, liest sich in jeder Größe gut — bei 16 Pixeln ist der Unterschied zwischen gefülltem Rahmen und einem Drittel gefülltem Rahmen der Unterschied zwischen vier erkennbaren Pixeln Kontur und einem einzigen.

Den ganzen Ordner ablegen. Jede Zeichnung wird einzeln gerendert und verpackt, die Ergebnisse kommen als ZIP zurück — die übliche Form dieser Aufgabe für jemanden, der mehrere Websites oder Produkte aus einem Markensystem betreut und alle am selben Nachmittag brauchen.

Jede Datei erhält dieselbe Behandlung und dieselbe Größenauswahl, der Stapel kommt also einheitlich zurück. Uneinheitlich bleibt, wie viel Fläche jede Marke im Quadrat einnimmt: Eine Zeichnung mit breiter viewBox wird mit transparentem Rand zentriert und wirkt neben einer sauber quadrierten Nachbarin eine Größe kleiner. Die viewBoxes einmal in der Quelle zu quadrieren lohnt sich mehr, als es später über ein Dutzend Websites hinweg zu bemerken.