PNG, JPG, SVG oder WebP in ein echtes Multi-Size-ICO umwandeln: 16, 32 und 48 px in einer Datei, Alphakanal vollständig erhalten. Speicherform PNG oder unkomprimierte Bitmap, beide Größen im Vergleich. Öffnet .ico auch wieder.
Bild hierher ziehen oder zum Auswählen klicken
PNG, JPG, SVG, WebP, GIF oder BMP · bis 10 MB
Beide sind in einer .ico-Datei zulässig. PNG wird von Windows seit Vista und von jedem aktuellen Browser gelesen; unkomprimierte Bitmaps stecken in 13 der 14 echten ICO-Dateien, die sich auf 20 untersuchten Websites fanden, weil ImageMagick standardmäßig in sie umwandelt.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" type="image/svg+xml" href="/icon.svg"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
.ico-Datei hierher ziehen oder zum Auswählen klicken
Jede Größe in der Datei wird einzeln aufgeführt
| Position | Bytes | Feld | Wert |
|---|---|---|---|
| 0 | 2 | idReserved | 0 |
| 2 | 2 | idType | 1 |
| 4 | 2 | idCount | 3 |
| 6 | 1 | bWidth[0] | 16 → 16 |
| 7 | 1 | bHeight[0] | 16 → 16 |
| 8 | 1 | bColorCount[0] | 0 |
| 9 | 1 | bReserved[0] | 0 |
| 10 | 2 | wPlanes[0] | 1 |
| 12 | 2 | wBitCount[0] | 32 |
| 14 | 4 | dwBytesInRes[0] | 248 |
| 18 | 4 | dwImageOffset[0] | 54 |
| 22 | 1 | bWidth[1] | 32 → 32 |
| 23 | 1 | bHeight[1] | 32 → 32 |
| 24 | 1 | bColorCount[1] | 0 |
| 25 | 1 | bReserved[1] | 0 |
| 26 | 2 | wPlanes[1] | 1 |
| 28 | 2 | wBitCount[1] | 32 |
| 30 | 4 | dwBytesInRes[1] | 720 |
| 34 | 4 | dwImageOffset[1] | 302 |
| 38 | 1 | bWidth[2] | 48 → 48 |
| 39 | 1 | bHeight[2] | 48 → 48 |
| 40 | 1 | bColorCount[2] | 0 |
| 41 | 1 | bReserved[2] | 0 |
| 42 | 2 | wPlanes[2] | 1 |
| 44 | 2 | wBitCount[2] | 32 |
| 46 | 4 | dwBytesInRes[2] | 1464 |
| 50 | 4 | dwImageOffset[2] | 1022 |
Geschrieben und geprüft von den Entwicklern, die die Konvertierungswerkzeuge von Go Tools bauen. Der Aufbau des Containers, die Byteanzahlen und die hier beschriebenen Fehlerbilder stammen aus einer schriftlichen Fachprüfung und nicht aus den Zusammenfassungen anderer Leute über dieses Format.
16, 32 und 48 px Diese drei decken den Browser-Tab, den Alt-Tab-Umschalter und den Desktop ab und sind seit 1995 der empfohlene Satz. 256 kommt nur dazu, wenn das Icon auch in einer Großsymbolansicht bestehen muss.
Ja — genau dafür ist es da Das Format ist ein Container: ein sechs Byte langer Header, pro Bild ein 16 Byte langer Verzeichniseintrag, dann die Bilder. Jedes davon ist eine eigene Zeichnung, und deshalb bleibt ein gutes Icon auch bei 16 px klar.
Nein, wenn es richtig gemacht wird Beide Speicherformen innerhalb einer .ico-Datei tragen einen vollen 8-Bit-Alphakanal. Transparenz geht nur verloren, wenn ein Werkzeug die Alpha-Bytes leer lässt oder die 1-Bit-Maske weglässt, die ältere Software stattdessen liest.
264 KB unkomprimiert, als PNG ein paar KB Eine unkomprimierte 256-px-Ebene ist exakt 270.376 Byte groß — 40 Byte Header, 262.144 Byte Pixel und 8.192 Byte Maske —, ganz gleich, was das Bild zeigt. Als PNG abgelegt kostet dieselbe Ebene meist ein paar Kilobyte.
Eine .ico-Datei ist weniger ein Bildformat als ein kleines Archiv aus Bildern. Sie beginnt mit einem sechs Byte langen Header, der angibt, wie viele Bilder enthalten sind, gefolgt von je einem 16 Byte langen Verzeichniseintrag pro Bild mit Breite, Höhe, Byteanzahl und Position in der Datei, und erst danach kommen die Bilddaten selbst. Jedes Bild kann auf zwei Arten abgelegt sein: als vollständige, im Ganzen eingebettete PNG-Datei oder als unkomprimierte Windows-Bitmap, unter die eine 1-Bit-Transparenzmaske gehängt ist.
Dieser Aufbau ist der Grund, warum ein Favicon im Browser-Tab bei 16 px und im Dateimanager bei 48 px gleichermaßen scharf aussehen kann — es sind verschiedene Zeichnungen, für jede Größe von Hand abgestimmt, und nicht ein einziges Bild, das skaliert wird. Er ist auch der Grund für ein paar Überraschungen. Die Seitenlänge steht in einem einzigen Byte, deshalb wird 256 als Null geschrieben und 512 lässt sich gar nicht schreiben. Und das Verzeichnis hält für jeden Eintrag eine Größe fest, die in den Bilddaten selbst ebenfalls steht — die beiden können sich also widersprechen, und unterschiedliche Software glaubt Unterschiedlichem.
$ file favicon.ico
favicon.ico: MS Windows icon resource - 3 icons, 16x16, 32 bits/pixel, 32x32, 32 bits/pixel
$ python3 -c "from PIL import Image; print(sorted(Image.open('favicon.ico').ico.sizes()))"
[(16, 16), (32, 32), (48, 48)] 16, 32 und 48 px als Voreinstellung, bis hinauf zu 256. Jede Größe wird einzeln aus dem Original in voller Qualität gezeichnet, statt aus der Ebene darüber verkleinert zu werden — kleine Größen erben so nicht die Unschärfe einer größeren.
Die beiden zulässigen Speicherformen haben sehr unterschiedliche Kompromisse, und die meisten Konverter erwähnen nie, welche davon sie schreiben. Hier ist es ein Schalter, und die jeweils entstehende Dateigröße wird angezeigt — die Entscheidung fällt also anhand einer Zahl und nicht aus dem Bauch heraus.
Der Alphakanal wird vollständig geschrieben, und die 1-Bit-Maske, die ältere Software stattdessen liest, wird daraus abgeleitet statt leer gelassen. Eine leere Maske ist genau das, was aus einem transparenten Icon überall dort ein schwarzes Quadrat macht, wo nur die Maske gelesen wird.
Der umgekehrte Tab listet jedes Bild in einer .ico-Datei mit echter Größe, Speicherform, Farbtiefe und der Herkunft seiner Transparenz auf — einschließlich palettenbasierter Bitmaps, die mehrere bekannte Favicons bis heute verwenden. Ein Browser zeigt Ihnen immer nur eines davon.
Behauptet das Verzeichnis eine Größe, zu der die Bilddaten nicht passen, wird das gemeldet. Ebenso ein eingebettetes PNG, das Firefox wegwirft: Sein ICO-Decoder nimmt nur 8-Bit-RGB oder -RGBA, eine Ebene mit Palette oder Graustufen verschwindet dort also einfach, während jeder andere Browser sie anzeigt. Beides sind häufige Gründe dafür, dass ein Icon in einem Programm funktioniert und in einem anderen leer bleibt, und kein anderer Konverter weist auf eines von beiden hin.
Lesen, Skalieren und Packen passieren vollständig auf dieser Seite. Die Datei erreicht nie einen Server, es gibt also hinterher nichts zu löschen und keine Warteschlange.
magick in.png -define icon:auto-resize=48,32,16 favicon.ico Die übliche Antwort und der Grund, warum so viele Favicons unkomprimiert sind. Jede Ebene außer 256 px wird vor dem Packen in eine Bitmap umgewandelt, drei Größen kommen also mit rund 15 KB statt ein paar hundert Byte heraus. Die Größen werden mit der größten zuerst geschrieben.
img.save('favicon.ico', sizes=[(16,16),(32,32),(48,48)]) Bettet PNG ein, dieselben drei Größen landen also in etwa einem Zehntel des Platzes. Pillow liest ICO außerdem gut: Image.open(f).ico.sizes() listet auf, was drinsteckt — praktisch, um die Datei von jemand anderem zu prüfen.
npx png-to-ico icon.png > favicon.ico Ein Einzweck-CLI, das ein oder mehrere PNGs nimmt und sie als PNG-Nutzdaten packt. Praktisch in einem Build-Skript; es skaliert nicht für Sie, jede Größe muss also als eigene Datei vorliegen.
sharp(input).resize(32).png() Hervorragend, um die einzelnen PNGs zu erzeugen, aber es schreibt keine ICO-Container und wird deshalb normalerweise mit einem der Packer oben kombiniert. Eine häufige Verwirrungsquelle, wenn eine Build-Pipeline ohnehin schon auf sharp standardisiert ist.
github.com/Kodeworks/golang-image-ico Schreibt ein ICO mit einem einzigen Bild aus einem image.Image. Für ein Favicon in einer Größe reicht das; mehrere Größen in einen Container zu packen heißt, das Verzeichnis selbst zu schreiben, und das sind etwa dreißig Zeilen.
.rc-Ressourcenskript, rc.exe So entstehen Anwendungssymbole normalerweise. Der Compiler bettet die .ico-Datei in den Ressourcenabschnitt der ausführbaren Datei ein; der Container darin hat exakt dasselbe Format wie ein Web-Favicon.
.ico Exportiert jede Ebene des Bildes als eine Icon-Größe und lässt Sie die Farbtiefe pro Ebene wählen, einschließlich komprimiertem PNG. Eines der wenigen grafischen Werkzeuge, das diese Wahl offenlegt, statt sie stillschweigend zu treffen.
sips -s format ico in.png --out favicon.ico macOS hat sehr wohl einen ICO-Writer: sips --formats führt com.microsoft.ico als beschreibbar auf, und der Befehl oben hat hier eine gültige Datei erzeugt. Was er nicht kann, ist mehrere Größen zu packen — die Ausgabe war eine einzelne 48×48-Ebene. iconutil, das Suchergebnisse stattdessen meist vorschlagen, erzeugt .icns, Apples eigenen Container, den Windows und Browser nicht lesen.
$ xxd -l 38 favicon.ico
00000000: 0000 0100 0300 1010 0000 0100 2000 e903 ............ ... 00000010: 0000 3600 0000 2020 0000 0100 2000 6c05 ..6... .... .l. 00000020: 0000 1f04 0000 ......
0000 ist das reservierte Feld, 0100 steht für Typ 1 (Icon, nicht Cursor), 0300 sagt: drei Bilder. Dann folgt der erste 16 Byte lange Verzeichniseintrag: 10 10 ist 16×16, 00 die Farbanzahl, 00 reserviert, 0100 eine Farbebene, 2000 32 Bit pro Pixel, e903 0000 sind 1.001 Byte Nutzdaten an der Position 3600 0000 = 54 — also genau 6 + 3 × 16, das Ende des Verzeichnisses. Alle mehrbytigen Zahlen sind Little-Endian, außer den Größen, die einzelne Bytes sind.
bWidth = 0x00 bHeight = 0x00
256 × 256
Für jede Seitenlänge steht im Verzeichnis genau ein Byte, also ist 255 die größte Zahl, die hineinpasst, und 0 ist als 256 definiert. Deshalb wird 512 px auf dieser Seite auch nirgends angeboten: Es gibt kein Byte, das 512 bedeutet. Mehrere Online-Konverter bieten es trotzdem an und schreiben ein 512-px-Bild hinter einen Verzeichniseintrag, der es gar nicht beschreiben kann.
16 + 32 + 48 px, PNG payloads 16 + 32 + 48 px, uncompressed BMP payloads
389 bytes 15,086 bytes
Unkomprimierte Nutzdaten kosten 40 + Breite × Höhe × 4 Byte plus eine 1-Bit-Maske; ihre Größe hängt damit allein von den Abmessungen ab und überhaupt nicht vom Bildinhalt. Genau deshalb können drei verschiedene Websites drei völlig unterschiedliche Icons in Dateien gleicher Länge ausliefern.
$ magick logo.png -define icon:auto-resize=48,32,16 favicon.ico $ file favicon.ico
favicon.ico: MS Windows icon resource - 3 icons, 48x48, 32 bits/pixel, 32x32, 32 bits/pixel
ImageMagick wandelt jede Ebene außer 256 px vor dem Packen in eine unkomprimierte Bitmap um — deshalb liegt die Ausgabe bei rund 15 KB statt bei ein paar hundert Byte. Pillow macht es umgekehrt und bettet PNG ein: Image.open('logo.png').save('favicon.ico', sizes=[(16,16),(32,32),(48,48)]).
$ magick favicon.ico favicon-%d.png
favicon-0.png 48×48 favicon-1.png 32×32 favicon-2.png 16×16
Ein Browser kann Ihnen das nicht abnehmen. Geben Sie ein Multi-Size-ICO an ein <img>-Tag, bekommen Sie genau ein Bild — das größte —, ganz gleich, in welcher Reihenfolge die Größen stehen. Aufzulisten, was wirklich in einer Datei steckt, heißt den Container selbst zu zerlegen, und genau das macht der Tab ICO → PNG.
PNG, JPG, SVG, WebP, GIF und BMP werden alle akzeptiert, bis 10 MB. Nichts verlässt den Browser: Die Datei wird über die File API gelesen, und jedes Pixel wird auf einem lokalen Canvas gezeichnet.
16, 32 und 48 px sind zu Beginn angehakt. Nehmen Sie 64, 128 oder 256 dazu, wenn das Icon eine Großsymbolansicht oder einen hochauflösenden Desktop überstehen muss. Ist Ihre Vorlage kleiner als die größte angehakte Größe, sagt die Seite das, statt sie stillschweigend zu vergrößern.
PNG ist die Voreinstellung, weil es eine Größenordnung kleiner ist und von jedem aktuellen Browser und jedem Windows seit Vista gelesen wird. Wechseln Sie zur unkomprimierten Bitmap, wenn Sie die Form wollen, in der die meisten ausgelieferten Favicons tatsächlich vorliegen. Beide Dateigrößen stehen nebeneinander.
Speichern Sie die .ico-Datei und holen Sie sich das Markup über die Schaltfläche „link-Tags kopieren“. Der Pfad /favicon.ico im Wurzelverzeichnis funktioniert weiterhin als Rückfallebene, aber ein ausdrückliches link-Element ist der Weg, den Browser zuerst versuchen sollen.
Das Verzeichnisbyte für ein 256-px-Bild muss 0 sein. 255 zu schreiben sieht nach einem harmlosen Off-by-one aus und erzeugt eine Datei, die manche Browser stillschweigend nicht zeichnen.
bWidth = 0xFF bHeight = 0xFF ; „255“, gemeint war 256
bWidth = 0x00 bHeight = 0x00 ; 0 ist als 256 definiert
Steht in einem Verzeichniseintrag 16×16 über Nutzdaten, die in Wahrheit 32×32 sind, teilen sich die Decoder: Manche vertrauen dem Verzeichnis und zeichnen gar nichts, andere vertrauen den Nutzdaten und stellen das Bild sauber dar. Die Datei funktioniert dann auf einem Rechner und ist auf einem anderen unsichtbar.
entry: 16×16 payload IHDR: 32×32
entry: 32×32 payload IHDR: 32×32
Innerhalb einer unkomprimierten Ebene umfasst die Höhe Farbdaten und Maske zusammen. Die einfache Höhe zu schreiben erzeugt eine Datei, die in manchen Decodern leer bleibt und in anderen als untere Bildhälfte erscheint — in beiden Fällen ohne Fehlermeldung.
biHeight = 32 ; für ein 32-px-Bild
biHeight = 64 ; 2 × 32, Farbdaten plus Maske
Manche Werkzeuge füllen die Maske und lassen jedes Alpha-Byte auf null. Ein Decoder liest das als vollständig transparentes Bild, und das Icon verschwindet; ein anderer fällt auf die Maske zurück und zeigt es korrekt. Beides konsequent zu schreiben erspart den ganzen Streit.
alpha bytes: all 0x00 mask: all 0x00
alpha bytes: real values mask: set where alpha < 128
Externe Verweise in einem SVG werden beim Rastern blockiert, und nichts meldet es — kein Fehler wird ausgelöst, und das Canvas bleibt lesbar. Der Platzhalter für ein kaputtes Bild wird dann einfach ins Icon eingebacken. Binden Sie die Zeichnung vor dem Umwandeln direkt ein.
<image href="https://cdn.example.com/logo.png"/>
<image href="data:image/png;base64,iVBORw0KGgo…"/>
00 00 reserviert, 01 00 für ein Icon (02 00 kennzeichnet eine Cursordatei) und einer zwei Byte langen Anzahl. Jeder Verzeichniseintrag beginnt mit Breite, Höhe, Palettengröße und einem reservierten Byte — je ein Byte —, gefolgt von zwei Byte langen Feldern für Farbebenen und Bit pro Pixel sowie zwei vier Byte langen Feldern für Länge und Position der Nutzdaten. Alles Mehrbytige ist Little-Endian.ceil(Breite ÷ 32) × 4 Byte hinzu. Eine 16-px-Ebene ist damit 1.128 Byte groß, 48 px sind 9.640 und 256 px sind 270.376 — unabhängig davon, was das Bild zeigt. Diese feste Größe ist der Grund, warum drei voneinander unabhängige Websites Favicons byteidentischer Länge ausliefern können, und auch der Grund, warum eine 256-px-Ebene hier nur angeboten wird, wenn die Nutzdaten PNG sind.image/vnd.microsoft.icon wurde im September 2003 bei der IANA registriert, und die dort angegebene Quelle ist ein Microsoft-Artikel von 1995 mit dem Titel „Icons in Win32“. RFC 2361, der häufig als ICO-Spezifikation zitiert wird, trägt in Wahrheit den Titel „WAVE and AVI Codec Registries“ und sagt über Bilder überhaupt nichts.magick logo.png -define icon:auto-resize=48,32,16 favicon.ico. Konvertierungswerkzeuge
Zahlen zwischen Binär, Hexadezimal, Dezimal, Oktal und beliebigen Basen (2–36) sofort konvertieren. Kostenlos, privat, ohne Anmeldung — alles läuft in Ihrem Browser.
Konvertierungswerkzeuge
Ganzzahl mit Vorzeichen eingeben und Betrag-Vorzeichen, Einerkomplement, Zweierkomplement und Offset-Binär auf einmal erhalten, von 4 bis 64 Bit. Oder ein Bitmuster bzw. Hex-Byte einfügen und alle fünf Lesarten sehen.
Konvertierungswerkzeuge
Linux-Dateiberechtigungen zwischen Oktal (755, 644) und rwx-Symbolen umrechnen. chmod-Befehle kopieren, riskante Modi wie 777 erkennen — kostenlos, direkt im Browser.
Konvertierungswerkzeuge
Konvertieren Sie HEX zu RGB, HSL, OKLCH, OKLAB und CMYK direkt im Browser — jedes Format mit einem Klick kopieren. Kostenlos, ohne Anmeldung, Ihre Farben verlassen die Seite nie.
Konvertierungswerkzeuge
Konvertieren Sie HEX-Farben direkt im Browser in CMYK. Naive sRGB-basierte Näherung für Druckvorschauen. Kostenlos, ohne Anmeldung, Ihre Farben bleiben lokal.
Konvertierungswerkzeuge
Konvertieren Sie jede HEX-Farbe direkt im Browser in HSL — 3-stellig, 6-stellig und 8-stellig mit Alpha werden unterstützt. Kostenlos, sofort, ohne Anmeldung, Ihre Farben verlassen die Seite nie.