PNG in ICO umwandeln

Fast jeder, der ein PNG in ein ICO wandelt, baut ein Favicon. Browser fragen seit fast dreißig Jahren /favicon.ico an der Wurzel jeder Seite an und tun es weiterhin, unabhängig davon, was dein HTML deklariert. Eine dort abgelegte Datei beendet also einen Strom von 404ern in deinen Logs und deckt die Werkzeuge ab, die nirgendwo sonst nachsehen.

Moderne Favicon-Auszeichnung kann ebenso auf ein PNG oder ein SVG zeigen, und die meisten Seiten liefern beides aus. Das ICO ist der Rückfall, der nie deklariert werden muss.

Ein Behälter und kein Kompressionsformat — deshalb geht bei dieser Umwandlung nichts Nennenswertes verloren. Dein Bild liegt darin als PNG, je Größe eines, samt Alphakanal; ein abgerundetes Logo oder eine Marke mit durchsichtigen Ecken behält sie also exakt.

Das erklärt auch, warum die Datei so klein bleibt: Es wird nichts neu gerechnet, sondern ein Verzeichnis davorgesetzt, das sagt, welche Größen darin stecken.

Eine Beschränkung kommt aus dem Format, und sie ist hart: Ein Symbol endet bei 256 Pixeln, alles Größere wird also herunterskaliert. Das Größenfeld eines Verzeichniseintrags im ICO ist ein einzelnes Byte, und 256 wird darin als Null geschrieben, weil es nicht hineinpasst.

Unterhalb dieser Grenze hast du die Wahl. Das Feld „Symbolgrößen“ bestimmt, was in das Verzeichnis geschrieben wird, und die Voreinstellung legt drei Einträge an — 48, 32 und 16 Pixel, größte zuerst —, jeden als eigenes PNG. Genau so war ein Favicon von Anfang an gedacht: Der Browser liest das Verzeichnis und nimmt den Eintrag, der der Größe am nächsten kommt, die er gleich zeichnet, statt ein großes Bild im Vorbeigehen mit einem Allzweckfilter zu verkleinern.

Jeder Eintrag, der hier entsteht, ist quadratisch, denn Symbole sind quadratisch. Ein nicht quadratisches Bild wird weder beschnitten noch verzerrt: Es wird mittig auf das Quadrat gesetzt, so groß wie es hineinpasst, und ringsum bleibt durchsichtiger Rand. Verzogen wird also nichts — ein längliches Logo bedeckt aber nur die halbe Fläche und wirkt in einer Reihe von Tabs kleiner als seine Nachbarn.

Bring es deshalb in dem Programm ins Quadrat, das es erzeugt hat, mit 256 Pixeln oder mehr, und lass die Marke etwa neunzig Prozent der Fläche füllen. Das ist eine einzige Änderung an der Vorlage, und sie entscheidet mehr über die Wirkung des Symbols als alles andere auf dieser Seite.

16 und 32 Pixel sind die, auf die es praktisch ankommt: 16 für den Browser-Tab und die Lesezeichenliste, 32 für die Taskleiste und die meisten Desktop-Zusammenhänge. Windows zeichnet Symbole in bestimmten Ansichten außerdem mit 48 und 256.

Genau diese drei schreibt die Voreinstellung, und deshalb ist sie die Voreinstellung. Fang trotzdem groß an: Jeder Eintrag wird aus dem Bild gerechnet, das du ablegst. Aus einer 256-Pixel-Vorlage werden ein sauberes 48, 32 und 16; eine 32-Pixel-Vorlage auf 256 vergrößert sieht genau so aus, wie das klingt.

Was Leute erwischt, ist nicht das Format, sondern die Rechnung. Bei 16 Pixeln ist ein Buchstabe etwa zehn Pixel hoch, und das reicht nicht für einen Schriftzug, einen Zusatz oder irgendeine Linie, die dünner ist als der Rest.

Was funktioniert: eine Form, hoher Kontrast, wenige Farben — die Initiale statt des Namens, das Zeichen statt der ganzen Wort-Bild-Marke. Prüfe es, indem du dein PNG vor dem Umwandeln auf 16 Pixel verkleinerst. Erkennst du nicht, was es ist, rettet das kein Format.

Leg sie als favicon.ico an die Wurzel der Seite. Diese eine Platzierung deckt Browser ab, die sie direkt anfragen, Feedreader und ältere Werkzeuge, die nirgendwo sonst suchen.

Sie zusätzlich im Kopf des HTML zu deklarieren lohnt sich, neben einem PNG für aktuelle Browser und einem apple-touch-icon für den iOS-Startbildschirm. Das ICO ist der Boden, nicht die ganze Strategie.

Fast immer Zwischenspeicher, und Favicons werden ungewöhnlich hartnäckig zwischengespeichert — vom Browser, von jedem CDN vor der Seite und mitunter auch vom Betriebssystem.

Ruf die Symbol-URL direkt auf, um zu bestätigen, dass die neue Datei ausgeliefert wird, und lösche dann die Websitedaten für genau diese Herkunft statt den ganzen Browser zu leeren. Sitzt ein CDN davor, leere auch dort. Ist die Datei selbst bestätigt richtig, ist der Rest Geduld.

Leg so viele PNGs ab, wie du magst. Jedes wird sein eigenes ICO, und sie kommen zusammen als ZIP zurück — passend für eine App oder eine Reihe von Seiten, die je ein Symbol brauchen.

Die Umwandlung läuft in deinem Browser, es gibt also keinen Upload, keine Warteschlange und keine Grenze jenseits deines eigenen Rechners. Symbole sind klein genug, dass das nie die Beschränkung ist.