HEIC in ICO umwandeln

Ein Hamburger Baukasten-Anbieter, ein anderer aus Freiburg, oder das Shopsystem eines lokalen Getränkehändlers — an irgendeiner Stelle im Einrichtungsassistenten steht ein leeres Feld „Favicon hochladen", und das einzige Bildmaterial, das ein Ein-Personen-Betrieb zur Hand hat, ist ein Foto vom eigenen Ladenschild, aufgenommen mit dem iPhone. HEIC lässt sich dort meist gar nicht erst auswählen.

Diese Seite verpackt genau dieses Foto in den Behälter, den das Feld erwartet — bei den üblichen drei Größen 48, 32 und 16 Pixel in einer Datei. Was sie nicht kann, ist aus einem Ladenschild ein Symbol machen, das bei 16 Pixeln noch etwas aussagt; dafür ist der nächste Absatz da.

Das ist der Schritt, der über das Ergebnis entscheidet. Diese Umwandlung schneidet nichts zu: Das Bild behält sein Seitenverhältnis und wird mittig auf eine quadratische Fläche gesetzt, ein normales 4:3-iPhone-Foto kommt also mit leeren Streifen oben und unten an — nichts wird verzerrt, aber ein Viertel eines Symbols, das ohnehin nur 16 Pixel hoch ist, geht dabei verloren.

In der Fotos-App auf dem Handy: Bearbeiten öffnen, das Zuschneiden-Werkzeug wählen, quadratisches Verhältnis einstellen und auf das eigentliche Motiv setzen — den Schriftzug, das Emblem, den einen Gegenstand. Dreißig Sekunden Zuschneiden bringen mehr als jede Einstellung auf dieser Seite.

Ein Favicon wird bei 16 CSS-Pixeln dargestellt. Auf einem hochauflösenden Bildschirm greift der Browser womöglich zu 32 Gerätepixeln, eine Lesezeichenleiste oder ein angehefteter Tab geht etwas darüber hinaus — 16 mal 16 ist trotzdem die Größe, für die geplant werden muss. Das sind 256 Bildpunkte insgesamt, weniger als dieser Absatz Zeichen hat.

Was bei dieser Größe übrig bleibt, ist eine Form und ein oder zwei Farben. Was nicht übersteht, ist Schrift unter etwa vier Zeichen, dünne Linien, Verläufe, Schatten und alles mit einem eigenen Hintergrund. Ein Foto der ganzen Ladenfront wird zu einem braunen Fleck. Ein eng zugeschnittenes Foto eines einzelnen, fett gemalten Buchstabens an der Wand bleibt erkennbar — der Unterschied liegt allein darin, was fotografiert wurde und wie nah.

Die Datei besteht aus einem sechs Byte langen Kopf, gefolgt von einem sechzehn Byte langen Verzeichniseintrag pro Größe, dann einem PNG je Größe — mit den Voreinstellungen drei Stück, bei 48, 32 und 16 Pixeln, größte zuerst. Das Format erlaubt auch eine rohe Bitmap, doch jede Windows-Version seit Vista liest ein PNG innerhalb eines Icons, und die Datei fällt dadurch spürbar kleiner aus.

Eine Eigenheit zeigt ein Hex-Editor: Breite und Höhe im Verzeichnis sind je ein einziges Byte groß, 256 passt darin nicht, die Konvention schreibt dafür eine Null. Ein Eintrag, dessen Größe mit 0 mal 0 angegeben ist, ist die Spezifikation bei der Arbeit, keine beschädigte Datei — sichtbar wird das nur bei einer Größenauswahl, die 256 einschließt; die drei Standardgrößen passen alle in ein Byte und stehen als sie selbst da.

Unabhängig von der Eingabe überschreitet nichts in der Datei 256 Pixel — die Grenze greift beim Verarbeiten, keine Einstellung hebt sie an. Ein Foto mit zwölf Megapixeln wird dafür um den Faktor sechzehn je Richtung verkleinert, eines mit achtundvierzig Megapixeln um mehr als das Dreißigfache. Die tatsächlich geschriebenen Größen liegen darunter, mit den Standardwerten also insgesamt beim Vierundachtzigfachen.

Jede dieser Verkleinerungen läuft mit hochwertiger Glättung in einem Canvas, was hier die richtige Reihenfolge ist: Ein großes Foto zu verkleinern mittelt viele Bildpunkte in einen einzigen und versteckt Rauschen, statt es zu betonen. Das Ergebnis ist ein sauberes, kleines Bild von etwas, das nie für die Kleinheit gedacht war — das ist ein anderes Problem, und keine Verkleinerung löst es.

Ein Favicon wirkt am besten mit durchsichtigem Hintergrund, damit es ohne sichtbaren Rahmen in einer hellen oder dunklen Browserleiste sitzt. Der hier verwendete Behälter unterstützt das, weil die Nutzlast ein PNG ist und ein PNG Alpha kennt.

Ein Kamerafoto bringt keine Transparenz mit, das Ergebnis ist also ein vollständig blickdichtes Quadrat. Steht das fotografierte Motiv dunkel auf heller Wand, wird die helle Wand zum Hintergrund des Icons und erscheint als Rechteck vor einem dunklen Browser-Theme. Diesen Hintergrund zu entfernen ist eine Aufgabe für ein Bildbearbeitungsprogramm vor der Umwandlung, nicht etwas, das sich aus dem Foto ableiten lässt.

Wer dafür gezielt fotografiert, sollte so flach und so nah wie das Objektiv erlaubt aufnehmen: nur das Emblem, formatfüllend, gerade von vorn, bei gleichmäßigem Licht ohne Schlagschatten. Das ganze Ladenschild, die ganze Front, das ganze Produkt zu fotografieren führt in die falsche Richtung — ein Motiv, eine dominante Farbe, harte Kanten.

Lohnenswert ist zudem, das Motiv vor einem einfarbigen Hintergrund zu fotografieren, den man später freistellen kann — ein Blatt Papier, eine glatte Wand —, weil das die Option auf ein transparentes Icon eröffnet, ohne Kanten von Hand nachzeichnen zu müssen. Existiert bereits ein richtiges Logo als Datei, irgendwo in einer alten E-Mail einer Designerin, ist das ein besserer Ausgangspunkt als jedes Foto und zehn Minuten Suche wert.

Das Bild wird auf dem Weg in die PNG-Nutzlast dekodiert und neu kodiert, aus den Metadaten des HEIC gelangt also nichts in das Icon: kein Aufnahmedatum, kein Kameramodell, keine GPS-Koordinate. Das ist hier unzweideutig gut, denn ein Favicon wird an jeden Besucher der Seite ausgeliefert und würde sonst nebenbei den Aufnahmeort des Fotos veröffentlichen.

Das Display-P3-Profil, das ein iPhone anhängt, reist ebenfalls nicht mit, kräftige Farben wirken im Ergebnis also etwas gedämpfter als auf dem Telefon. Bei 16 Pixeln fällt das niemandem auf, und es nimmt eine Variable aus der Frage, wie das Icon in verschiedenen Browsern aussieht.

Wird eine Seite auf dem iPhone-Homescreen abgelegt, verwendet iOS dafür ein eigenes Bild, das Apple-Touch-Icon, üblicherweise ein 180 mal 180 Pixel großes PNG — nie eine ICO-Datei. Fragt der Baukasten nach beidem, ein Favicon und ein Symbol fürs Homescreen, sind das zwei getrennte Anforderungen mit zwei unterschiedlichen Dateien.

Für den Browser-Tab liefert diese Seite die richtige Datei. Für den Homescreen braucht es ein separates, quadratisches PNG in voller Auflösung — dasselbe zugeschnittene Foto, aber ohne den Umweg über den ICO-Behälter, weil iOS dort ohnehin kein ICO liest.

Zwei Dinge lohnen sich mit dem Ergebnis. Es dort hochladen, wo der Baukasten danach fragt, und zusätzlich sicherstellen, dass eine Kopie unter favicon.ico direkt im Wurzelverzeichnis der Domain liegt — Browser, Crawler und Linkvorschauen rufen diesen Pfad von sich aus ab, unabhängig davon, ob die Seite ihn nennt.

Anschließend das Ergebnis in einem echten Tab prüfen statt in der Vorschau des Baukastens, in der tatsächlichen Größe, im hellen und im dunklen Browser-Theme. Favicons werden aggressiv zwischengespeichert — ein harter Neuladen oder ein privates Fenster zeigt oft erst die neue Version, und mancher hat eine Datei dreimal neu erzeugt, obwohl an ihr nichts falsch war.

Der gesamte Vorgang läuft im Browser: libheif dekodiert das HEIC, ein Canvas verkleinert es, der PNG-Encoder läuft, und ein paar Dutzend Zeilen JavaScript schreiben den Icon-Behälter. Nichts wird dabei übertragen, nachprüfbar im Netzwerk-Tab oder schlicht mit getrennter Internetverbindung.

Das bedeutet auch keine Wartezeit. Ein Favicon zu bauen ist ein iterativer Vorgang — enger zuschneiden, das andere Foto probieren, ohne Hintergrund versuchen —, und sechs Versuche in einer Minute auf dem eigenen Rechner zu fahren, macht dieses Ausprobieren erst praktikabel.

Die ehrliche Empfehlung, wenn sich das Foto partout nicht gut verkleinern lässt, ist, kein Foto zu verwenden. Ein gezeichnetes Favicon — ein Anfangsbuchstabe in einer kräftigen Schrift, eine einfache Silhouette, eine Fläche mit ausgespartem Buchstaben — bleibt bei 16 Pixeln lesbar, wo ein Foto es nie sein wird, und lässt sich in wenigen Minuten in jedem Vektorprogramm anlegen.

Wer diesen Weg geht, erzeugt am besten eine SVG-Datei und wandelt die in ein ICO um — derselbe Behälter, dieselben Größen, aber Kanten, die aus einer Zeichnung stammen statt durch ein Objektiv gelaufen zu sein. Diese Seite bleibt trotzdem sinnvoll, wenn das Foto das Einzige ist, was existiert — sie liefert dann eine brauchbare Datei, nur eben keine, die ein Ladenschild in einem Browser-Tab lesbar macht.