Base64 in ICO

So wandeln Sie Base64 in ICO um

1. Fügen Sie das Base64 ein, eine URI data:image/x-icon;base64,... oder das ganze Tag <link rel="icon" href="data:...">.
2. Prüfen Sie, ob die Statuszeile bei Erkannt ICO zeigt, und sehen Sie sich die Vorschau an.
3. Drücken Sie Datei herunterladen. Der Name lautet standardmäßig decoded.ico; benennen Sie ihn in favicon um, wenn die Datei auf eine Website kommt.

Das Feld MIME-Typ zeigt image/x-icon, den Typ, den die meisten Server und Data-URIs für Icons verwenden.

ICO-Dateien enthalten mehrere Bilder

Anders als PNG oder JPEG ist eine ICO-Datei ein kleiner Container. Eine typische favicon.ico enthält Versionen in 16×16, 32×32 und 48×48, Windows-Programmsymbole haben oft zusätzlich 256×256. Windows wählt die beste Größe für die Taskleiste, eine Desktop-Verknüpfung oder den Explorer; Browser wählen eine für den Tab.

Die Datei beginnt mit einem 6-Byte-Header, dann folgt pro Bild ein 16-Byte-Verzeichniseintrag. Das Base64 jeder ICO beginnt daher mit AAABAA, den Bytes 00 00 01 00. So sieht Hex-Dump anzeigen für ein Icon mit drei Größen aus:

00000000  00 00 01 00 03 00 10 10  00 00 00 00 20 00 56 00  |............ .V.|
00000010  00 00 36 00 00 00 20 20  00 00 00 00 20 00 6b 00  |..6...  .... .k.|
00000020  00 00 8c 00 00 00 30 30  00 00 00 00 20 00 8c 00  |......00.... ...|
00000030  00 00 f7 00 00 00 89 50  4e 47 0d 0a 1a 0a 00 00  |.......PNG......|

Die nächsten beiden Einträge beschreiben 32×32 (20 20) und 48×48 (30 30). Bei Offset 54 beginnt das erste Bild, und das .PNG in der Textspalte zeigt, dass es als PNG gespeichert ist.

PNG oder BMP darin

Jedes Bild in einer ICO ist entweder als vollständige PNG-Datei gespeichert oder als Bitmap ohne den üblichen Datei-Header BM. Im zweiten Fall beginnen seine Daten mit 28 00 00 00, und die Höhe in diesem Bitmap-Header ist verdoppelt, weil auf die Farbpixel eine 1-Bit-Transparenzmaske folgt. Große 256×256-Bilder sind meist PNG, da eine unkomprimierte 32-Bit-Bitmap dieser Größe mehr als 256 KB belegt.

Eine ICO-Zeichenkette ist oft viel länger, als das Icon vermuten lässt, weil jede Größe darin steckt und Bitmap-Einträge unkomprimiert sind. Für eine Website ist ein einzelnes 32×32-PNG oder ein SVG-Favicon meist viel kleiner. Favicon in Base64 erklärt, wie Sie diese einbetten.

Die Bilder im Code auflisten und extrahieren

Diese Python-Funktion liest das Verzeichnis und liefert jedes Bild mit Größe und Format:

import base64, struct

def ico_entries(b64: str):
    data = base64.b64decode(b64.split(",", 1)[-1])
    reserved, kind, count = struct.unpack_from("<HHH", data, 0)
    if reserved != 0 or kind not in (1, 2):
        raise ValueError("not an ICO or CUR file")
    for i in range(count):
        w, h, colors, _, _, bpp, size, offset = struct.unpack_from("<BBBBHHII", data, 6 + 16 * i)
        image = data[offset:offset + size]
        fmt = "png" if image.startswith(b"\x89PNG") else "bmp"
        yield {"size": f"{w or 256}x{h or 256}", "bpp": bpp, "bytes": size, "format": fmt, "data": image}

Für das Icon oben liefert sie 16x16, 32x32 und 48x48, alle png. Schreiben Sie entry["data"] eines PNG-Eintrags in eine .png-Datei, haben Sie diese Größe als eigenständiges Bild. Bitmap-Einträge brauchen einen Datei-Header und müssen von der Maske befreit werden, bevor andere Software sie liest; öffnen Sie die ICO für diese also in einem Icon-Editor. Base64 in Python erklärt mehr zum Dekodieren.

Wenn sich das Icon nicht öffnen lässt

• „Erkannt: PNG, erwartet: ICO.“ Viele „Favicon“-Zeichenketten sind einfache PNGs. Browser akzeptieren ein PNG-Favicon unter jedem Namen, Software, die eine echte Icon-Datei braucht, etwa Windows-Programmressourcen, akzeptiert aber kein umbenanntes PNG. Nutzen Sie Als .png herunterladen und behalten Sie es als PNG.
• „Ihr Browser kann ICO-Bilder nicht anzeigen.“ Der Browser konnte kein Bild in der Datei zeichnen, meist weil ein Eintrag beschädigt oder abgeschnitten ist oder ein ungewöhnliches Bitmap-Format nutzt. Der Download enthält trotzdem genau die Daten; öffnen Sie sie in einem Icon-Editor, um zu sehen, welcher Eintrag scheitert.
• Das Favicon ändert sich im Browser nicht. Browser legen Favicons in einem eigenen Cache ab, prüfen Sie das neue Icon also in einem privaten Fenster.

Häufige Fragen