TIFF in ICO umwandeln

Viele kleinere Handwerksbetriebe und GmbHs in Deutschland besitzen ihr Logo nur als das, was ihnen vor Jahren eine Werbeagentur im Corporate-Design-Handbuch mitgegeben hat: eine hochauflösende, oft CMYK-farbige TIFF-Datei, gedacht für Briefbogen und Fahrzeugbeschriftung. Beim Website-Relaunch in Eigenregie fehlt dann genau das, was ein Content-Management-System als Favicon verlangt.

Wer selbst an der Website arbeitet und nicht extra eine Designerin beauftragen will, landet hier — nicht als Profi, sondern mit dem, was der Ordner „Corporate Design" hergibt und einem Punkt auf der Checkliste, der noch offen ist.

Ein für den Druck gelieferter Entwurf ist typischerweise 300 dpi und mehrere tausend Pixel breit, mit großzügigem Rand und oft mit einem Slogan unter dem Zeichen. Ein Icon ist höchstens 256 Pixel groß und wird meist bei 16 oder 32 Pixeln betrachtet — in der Browser-Registerkarte, als Verknüpfung auf dem Desktop, in der Taskleiste.

Das Verkleinern erledigt die Pixelzahl, nicht die Gestaltung. Ein Zeichen, das auf dem Briefbogen überzeugt, wird bei 32 Pixeln zu einem grauen Fleck, wenn es einen Slogan, eine dünne Linie oder eine Outline-Schrift enthält. Das TIFF vor der Umwandlung auf das Symbol allein zuschneiden — Slogan weg, Rand weg, alles unter etwa einem Vierzigstel der Breite weg — bringt am Ende ein erkennbares Icon statt einer treuen, aber unlesbaren Miniatur. Dieser wenige Minuten kostende Zuschnitt bringt mehr als jede Einstellung auf dieser Seite.

Was auch ankommt, es wird so skaliert, dass die längste Kante höchstens 256 Pixel misst, bevor überhaupt geschrieben wird. Das ist eine Grenze des Formats selbst: Das ICO-Verzeichnis speichert Breite und Höhe je Bild in einem einzigen Byte, und 256 wird darin als Null geführt, weil 256 selbst nicht hineinpasst. Jedes Windows seit Vista liest diese Konvention richtig.

Jede Größe in der Datei entsteht danach aus diesem 256-Pixel-Bild in einem gefilterten Durchgang auf einer quadratischen Fläche, sodass eine dreitausend Pixel breite Druckdatei nicht mit Treppenstufen ankommt und ein nicht quadratisches Zeichen zentriert wird statt verzerrt zu werden. Feinheiten schmaler als etwa ein Hundertstel der Bildbreite mitteln sich dabei einfach heraus. Muss das Icon speziell bei 32 Pixeln scharf sein, bleibt eine bewusst dafür gezeichnete Version die bessere Wahl.

TIFF trägt mehrere Bilder pro Datei, ICO ebenfalls — genau dafür ist das Format gedacht, denn eine vollständige Icon-Datei enthält 16-, 32-, 48- und 256-Pixel-Varianten desselben Motivs, sodass jeder Ort im Betriebssystem sich die passende aussuchen kann. Diese Umwandlung nutzt genau eine der beiden Eigenschaften aus.

Der TIFF-Leser nimmt Seite eins und hört auf, ein mehrseitiges Handover-Dokument mit einer Schwarz-Weiß- und einer invertierten Variante des Logos verliert also alles danach — vor einer Umwandlung eines ganzen Markenpakets lohnt sich der Blick, auf welcher Seite das eigentliche Logo liegt. Der ICO-Schreiber gibt dagegen den ganzen Satz aus: einen Verzeichniseintrag je Größe, standardmäßig drei bei 48, 32 und 16 Pixeln, jeder als eigenes PNG. Die Asymmetrie läuft also in die richtige Richtung — aus einer Datei, die nur ein einziges Bild hergibt, wird ein Behälter, der jede Größe trägt, die ein Browser oder eine Taskleiste verlangt.

Ein ICO kann rohe Bitmaps oder PNGs enthalten, dieses hier enthält je Größe ein PNG — die heute übliche Konvention, deutlich kleiner als die Bitmap-Alternative, und mit echtem Alphakanal. Ein aus dem Hintergrund freigestelltes Logo bleibt also freigestellt, mit weicher, kantengeglätteter Kante statt einer harten Ein-Bit-Maske.

Das ist der beste Grund, für dieses Icon ein Logo statt eines Fotos zu verwenden. Ein Favicon liegt auf der Farbe der Browser-Registerkarte, die zwischen hellem und dunklem Modus wechselt; ein Zeichen auf einem sichtbaren weißen Quadrat wirkt im dunklen Modus wie ein Fehler. Hat das TIFF keinen transparenten Hintergrund, obwohl die Vorlage auf reinem Weiß liegt, lohnt sich das Freistellen vor der Umwandlung.

Eine Druckvorlage ist häufig CMYK mit einem angehängten ICC-Profil, und genau diese Kombination macht sie druckfähig. Der Leser hier rechnet CMYK nach einer festen Formel statt über das Profil in Bildschirmfarbe um, das Icon ist also erkennbar die Marke, aber nicht exakt — meist etwas flach in den tiefen Tönen und leicht abweichend bei kräftigen Firmenrot- oder Firmenblautönen.

Bei einem 32-Pixel-Tab-Icon fällt das niemandem auf. Wenn die Farbe selbst das Kapital der Marke ist, lohnt sich der saubere Weg: das TIFF in Photoshop, Affinity oder GIMP mit dem richtigen Profil nach sRGB umwandeln, eine RGB-Kopie exportieren und die hierherbringen — vor allem, wenn dasselbe Zeichen an anderer Stelle der Website ohnehin schon in RGB auftaucht und ein abweichendes Favicon sofort auffällt.

Sechzehn Bit je Kanal werden auf acht reduziert, indem das höherwertige Byte behalten wird — bei Icon-Größe unsichtbar. Ebenen werden zusammengeführt. EXIF, XMP, IPTC und ein eventuelles ICC-Profil entfallen — jede Bildumwandlung hier dekodiert zu rohen Pixeln und kodiert neu, das geschieht also von selbst, ohne dass eine Einstellung es verhindern könnte.

Die Dateigröße sinkt entsprechend deutlich. Die 480 mal 320 Pixel großen Beispieldateien dieser Seite sind 615.400 Byte als TIFF, ein aus Druckvorlage abgeleitetes Icon landet im einstelligen Kilobyte-Bereich, weil es ein paar hundert Pixel PNG hinter einem wenige Dutzend Byte großen Verzeichnis sind. Der übliche Dreiergrößen-Satz ist dabei meist auch die kleinere Datei als ein einzelnes 256-Pixel-Bild — gemessen an einem flachen Zeichen 1.062 Byte gegenüber 2.229 Byte.

Auf einer Website gehört es an die Wurzel als /favicon.ico. Browser fragen diesen Pfad an, unabhängig davon, ob im Markup ein Verweis darauf steht, und eine fehlende Datei dort ist eine der häufigsten Zeilen in einem Serverprotokoll. Ein zusätzliches link-Element im Head schadet nicht und macht die Absicht explizit.

Für eine Windows-Verknüpfung reicht Rechtsklick, Eigenschaften, dann Symbol ändern und die Datei auswählen. Für eine Anwendung verlangt das Build-Werkzeug meist ein mehrgrößiges ICO — dafür „Alle gängigen Größen" wählen, dann liegen 256 bis 16 Pixel in einer Datei vor, direkt von dieser Seite statt aus einem separaten Icon-Werkzeug. Moderne Browser akzeptieren über ein link-Element auch ein PNG oder SVG als Favicon; nur die bloße Anfrage nach /favicon.ico und Windows selbst verlangen zwingend ein ICO.

Ein Favicon ist heute mehr als eine einzelne ICO-Datei: Apple-Touch-Icons, Android-Homescreen-Symbole und Windows-Kachelbilder verlangen jeweils eigene Größen und teils eigene Formate. Diese Seite liefert die klassische ICO-Datei mit mehreren Größen darin — das reicht für /favicon.ico und für die meisten Browser-Tabs vollständig aus.

Soll die Website darüber hinaus auf jedem Homescreen und jeder Plattform optimal aussehen, ist ein zusätzlicher Satz PNG-Dateien in den jeweils verlangten Maßen sinnvoll, die sich aus derselben TIFF-Quelle mit TIFF zu PNG erzeugen lassen. Für die meisten Websites im deutschen Mittelstand ist das ICO allein aber der Punkt, an dem die Checkliste tatsächlich abgehakt werden kann.

utif2 dekodiert das TIFF, das Bild wird je Größe skaliert und als PNG kodiert, ein sechs Byte langer Kopf plus sechzehn Byte Verzeichnis je Eintrag werden darumgelegt — alles im eigenen Browser, ohne Upload. Das ist bei einem Logo, das häufig noch nicht öffentlich ist oder gerade erst überarbeitet wird, mehr als eine Formalie.

Die freie Grenze liegt bei 100 MB je Datei, weit über jeder Druckvorlage. Ganze Ordner funktionieren, wenn mehrere Marken oder Tochterfirmen umgewandelt werden sollen — ablegen, ZIP abholen —, auch wenn die meisten hier genau eine Datei und einen offenen Punkt auf der Checkliste mitbringen. Der PNG-Encoder ist derselbe wie auf dem Rest der Seite, das Icon wird also beim Schreiben mit oxipng verdichtet und nicht im Rohzustand belassen.