Das Problem: toBlob() kennt kein ICO

Unser Favicon-Generator und das Icon Studio exportieren PNGs in allen gängigen Größen — das erledigt die Canvas-API mit einem Aufruf. Aber das klassische favicon.ico, das Browser seit 1999 an der Domain-Wurzel suchen, ist ein ICO: ein Container-Format, das Microsoft 1985 für Windows 1.0 einführte. Kein Browser bietet eine Funktion an, um es zu erzeugen. Wer es browser-lokal anbieten will, muss die Datei selbst zusammensetzen — Byte für Byte.

Anatomie einer ICO-Datei

Die gute Nachricht: ICO ist herrlich einfach, wenn man die Spezifikation einmal verstanden hat. Die Datei besteht aus drei Teilen:

  1. Der Header (6 Bytes): zwei Null-Bytes, dann der Typ (1 = Icon), dann die Anzahl der enthaltenen Bilder. Mehr nicht.
  2. Das Verzeichnis (16 Bytes pro Bild): für jedes enthaltene Bild ein Eintrag mit Breite, Höhe, Farbtiefe, Datenlänge und der Byte-Position, an der die Bilddaten beginnen. Kuriosum am Rande: Das Größen-Feld ist nur 1 Byte groß — der Wert 0 bedeutet deshalb „256 Pixel". Ein Format, das älter ist als die Vorstellung, Icons könnten je größer werden.
  3. Die Bilddaten: historisch unkomprimierte BMP-Blöcke — aber seit Windows Vista dürfen es auch komplette PNG-Dateien sein.

Die Abkürzung, die uns gerettet hat: PNG-in-ICO

Der dritte Punkt ist der entscheidende. Die BMP-Variante hätte bedeutet, Pixeldaten umzusortieren (BMP speichert Zeilen von unten nach oben), Farbkanäle zu tauschen und eine separate Transparenz-Maske zu berechnen — alles Fehlerquellen. Stattdessen nutzen wir die Vista-Regel: Die PNGs, die die Canvas-API ohnehin liefert, wandern unverändert in den Container. Unser ICO-Builder rechnet nur Header und Verzeichnis-Einträge aus, hängt die PNG-Blöcke dahinter und reicht das Ergebnis als Download weiter. Rund fünfzig Zeilen Code — und jedes Byte davon nachvollziehbar.

Der Kompromiss dabei, offen gesagt: Steinalte Software (Internet Explorer unter Windows XP) erwartet BMP-Blöcke und kann PNG-in-ICO nicht lesen. Wir haben entschieden, dass ein Format-Detail von vor zwanzig Jahren kein Blocker mehr ist — alle heute relevanten Browser und Betriebssysteme lesen PNG-Einträge problemlos.

Welche Größen in die Datei gehören

Ein gutes favicon.ico enthält mehrere Auflösungen, aus denen sich das System bedient: 16 px (Browser-Tab), 32 px (Lesezeichen, Taskleiste), 48 px (Windows-Verknüpfungen). Mehr hineinzupacken bläht die Datei auf, die bei jedem Seitenaufruf angefragt wird — für große Auflösungen sind die PNG- und Apple-Touch-Varianten zuständig, die der Generator gleich mitliefert (gebündelt als ZIP, ebenfalls lokal erzeugt).

Die eigentliche Überraschung: 16 Pixel sind eine Design-Frage

Die technische Seite war nach ein paar Abenden gelöst. Hängen geblieben ist eine andere Lektion: Kein Algorithmus rettet ein Logo bei 16 Pixeln. Beim automatischen Herunterrechnen verschwinden dünne Linien, Schriftzüge werden zu Grauschleiern, Details zu Rauschen. Die großen Marken zeigen den Weg: Ihre Favicons sind nicht das Logo, sondern ein aufs Minimum reduziertes Symbol — ein Buchstabe, eine Grundform, zwei Farben. Genau deshalb bekam das Icon Studio eine Live-Vorschau in Originalgröße: Die Entscheidung, was bei 16 Pixeln übrig bleibt, kann nur ein menschliches Auge treffen. Mehr dazu im Beitrag Favicon erstellen.

Was hängen bleibt

Drei Erkenntnisse aus diesem Bau-Abschnitt: Erstens sind alte Formate oft leichter zu implementieren als ihr Ruf — ICO ist in einem Nachmittag verstanden, während moderne Container Wochen kosten würden. Zweitens lohnt es sich, Spezifikationen im Original zu lesen statt Halbwissen aus Foren zu übernehmen; das 0-heißt-256-Detail steht in keinem der drei Tutorials, die wir zuerst fanden. Und drittens: Die härtesten Probleme der Bildverarbeitung sind selten technischer Natur — sie sitzen in den 256 Pixeln eines 16-mal-16-Rasters.

Quellen

Microsoft — Icons (Original-Dokumentation) · Wikipedia — ICO file format · MDN — rel="icon".