Dateiformate
Was ist ICO? Icon-Dateien und Favicons erklärt
ICO ist das Windows-Icon-Format, das mehrere Größen in einer Datei bündelt. Wir erklären seinen Aufbau, die Geschichte des Favicons und welche Größen Sie heute brauchen.
Autor: Hemen Dönüştür Editör EkibiVeröffentlicht: 7 Min. Lesezeit
ICO ist das Format, das Windows für Programm- und Ordnersymbole verwendet und das im Web für das kleine Seitensymbol im Browser-Tab (das Favicon) genutzt wird. Von anderen Bildformaten unterscheidet es sich dadurch, dass eine einzige Datei mehrere Größen desselben Symbols enthalten kann. Dieser Artikel erklärt den inneren Aufbau einer ICO-Datei, ihre Entwicklung über die Windows-Versionen hinweg, die Geschichte des Favicons, welche Größen Sie heute brauchen und wie Sie ICO-Dateien richtig erstellen.
Was ist ICO?
ICO (Dateiendung .ico) ist ein Containerformat, das Microsoft für Icon-Ressourcen definiert hat. Eine ICO-Datei beginnt mit einem „Icon-Verzeichnis“, das jedes enthaltene Bild (zum Beispiel 16x16, 32x32 und 48x48 Pixel) als eigenen Eintrag auflistet. Windows oder der Browser wählt dann die Größe, die am besten zur jeweiligen Anzeigestelle passt.
Der offiziell bei der IANA registrierte MIME-Typ lautet image/vnd.microsoft.icon, doch Microsoft-Software und viele Server verwenden weiterhin image/x-icon. Das CUR-Format für Mauszeiger ist nahezu identisch: Es trägt im Typfeld des Verzeichnisses 2 statt 1 ein und speichert den Klickpunkt des Zeigers (Hotspot).
Geschichte: von Windows-Icons zum Favicon
- Windows 1.0: Icons waren monochrom.
- Windows 3.0: Die heute bekannte verzeichnisbasierte Struktur mit mehreren Bildern kam hinzu.
- 1995: John Hornicks Microsoft-Artikel „Icons“ dokumentierte den ICO-Aufbau im Detail und riet Entwicklern, mindestens Bilder in 16x16 (16 Farben), 32x32 (16 Farben) und 48x48 (256 Farben) mitzuliefern.
- März 1999: Internet Explorer 5 unterstützte als erster Browser Favicons. Eine Datei
favicon.icoim Stammverzeichnis der Website wurde in den Favoriten und in der Adressleiste angezeigt. - Windows XP: 32-Bit-Bilder erhielten einen 8-Bit-Alphakanal, womit weiche, halbtransparente Kanten möglich wurden.
- Windows Vista: 256x256-Bilder und PNG-Komprimierung innerhalb von ICO kamen hinzu.
- 2003: Der MIME-Typ
image/vnd.microsoft.iconwurde von einer dritten Partei bei der IANA eingereicht.
Aufbau einer ICO-Datei
Icon-Verzeichnis (ICONDIR)
Die Datei beginnt mit einem 6 Byte langen Header: einem reservierten Feld (0), dem Typ (1 für Icons, 2 für Cursor) und der Anzahl der Bilder. Danach folgt für jedes Bild ein 16 Byte langer Verzeichniseintrag.
Verzeichniseintrag (ICONDIRENTRY)
| Feld | Bedeutung |
|---|---|
| bWidth, bHeight | Breite und Höhe (je 1 Byte). Der Wert 0 steht für 256 Pixel. |
| bColorCount | Anzahl der Palettenfarben (0 ab 8 Bit) |
| wPlanes, wBitCount | Farbebenen und Bits pro Pixel |
| dwBytesInRes | Größe der Bilddaten in Byte |
| dwImageOffset | Position, an der die Bilddaten in der Datei beginnen |
Da die Größenfelder nur ein Byte umfassen, kann ein Bild in einer ICO-Datei höchstens 256x256 Pixel groß sein.
Bilddaten: BMP oder PNG
In einer klassischen ICO-Datei ist jedes Bild ein BMP ohne Dateiheader (ein DIB). Laut Hornicks Artikel enthält es ein Farbbild (die XOR-Maske), gefolgt von einer 1-Bit-Transparenzmaske (der AND-Maske). Deshalb ist die im Header gespeicherte Höhe die gemeinsame Höhe beider Masken, also doppelt so groß wie die tatsächliche Höhe. Ab Windows XP tragen 32-Bit-Bilder ihren Alphakanal direkt in den Pixeldaten.
Seit Windows Vista kann ein Eintrag statt eines BMP auch eine vollständige PNG-Datei sein. Eingebettetes PNG macht die Datei vor allem bei der Größe 256x256 deutlich kleiner. MDN weist darauf hin, dass PNG in ICO vor Vista nicht unterstützt wurde und in alter Software Probleme verursachen kann, aktuelle Browser und Windows-Versionen lesen jedoch beide Varianten.
Welche Größen brauchen Sie?
Windows-App-Icons
Laut Microsofts aktuellen Richtlinien für App-Icons sollte eine Win32-App mindestens 16x16, 24x24, 32x32, 48x48 und 256x256 enthalten. Findet Windows keine exakt passende Größe, skaliert es die nächstgrößere herunter. Ist ein 256-Pixel-Bild vorhanden, wird das Icon also immer nur verkleinert, nie vergrößert. Bei 100 % Skalierung nutzen etwa die Titelleiste und Kontextmenüs 16 Pixel und die Taskleiste 24, bei 200 % werden daraus 32 und 48.
Favicons für Websites
Im Web ist es anders. Nach dem HTML Standard dürfen Browser /favicon.ico aus dem Stammverzeichnis anfordern, wenn eine Seite keinen rel="icon"-Link hat. Eine favicon.ico im Stammverzeichnis ist daher weiterhin sinnvoll, reicht allein aber nicht aus:
- Die Google-Suche verlangt ein quadratisches (1:1) Favicon von mindestens 8x8 Pixeln und empfiehlt eines größer als 48x48, damit es auf verschiedenen Oberflächen gut aussieht.
- Die Home-Bildschirme von iPhone und iPad verwenden ein
apple-touch-iconmit 180x180 Pixeln. - Android und PWAs erwarten im Web-App-Manifest Icons mit 192 und 512 Pixeln sowie eine „maskable“-Variante für adaptive Icons.
- Aktuelle Browser unterstützen auch SVG-Favicons, eine einzige Vektordatei deckt alle Größen ab.
In der Praxis deckt eine favicon.ico mit 16, 32 und 48 Pixeln Desktop-Browser und ältere Systeme ab, während größere Größen als separate PNG-Dateien bereitgestellt werden.
Unterstützung in Systemen, Browsern und Programmen
Windows liest und schreibt ICO nativ, Explorer, Verknüpfungen und Desktop arbeiten damit. Laut MDN zeigen Chrome, Edge, Firefox, Opera und Safari ICO-Dateien an. macOS verwendet für App-Icons sein eigenes Format ICNS, doch die Vorschau öffnet ICO. Bildbearbeitungen wie GIMP öffnen eine ICO-Datei als Datei mit Ebenen, eine Ebene pro Größe. MDN rät von ICO für allgemeine Webinhalte ab und merkt an, dass Favicons sich in Richtung PNG mit einem <link>-Element entwickelt haben.
Stärken und Schwächen
| Stärken | Schwächen |
|---|---|
| Mehrere Größen und Farbtiefen in einer Datei | Höchstens 256x256 Pixel |
| Universelle Unterstützung unter Windows | Im Web außer für Favicons ohne Nutzen |
| Alphakanal und PNG-Komprimierung (ab Vista) | Alte BMP-basierte Einträge sind groß und umständlich |
| Browser suchen automatisch nach einer favicon.ico im Stammverzeichnis | Erfordert ein spezielles Werkzeug, nicht jedes Programm kann es schreiben |
Typische Probleme und Lösungen
Reicht es nicht, eine PNG-Datei in .ico umzubenennen?
Manche Browser tolerieren das, aber es ist keine echte ICO-Datei: Es fehlt das Icon-Verzeichnis, und Windows akzeptiert sie nicht als Icon. Richtig ist, das Bild in eine echte ICO-Datei umzuwandeln. Unsere Werkzeuge PNG in ICO und JPG in ICO schreiben immer Quadrate mit 16, 32 und 48 Pixeln und ergänzen 64, 128 und 256, wenn Ihr Bild groß genug ist. Jede Größe wird als PNG eingebettet, sodass die Transparenz erhalten bleibt.
Das Favicon ist unscharf oder unleserlich
Dünne Linien und kleine Schrift verschwinden bei 16 Pixeln. Verwenden Sie ein kräftiges, kontrastreiches, einfaches Zeichen und nehmen Sie bei Bedarf nur den Symbolteil Ihres Logos. Eine quadratische Vorlage mit mindestens 256x256, idealerweise 512x512 Pixeln liefert das beste Ergebnis.
Ein nicht quadratisches Bild wirkt gestaucht oder gestreckt
Icons sind quadratisch. Unsere Werkzeuge strecken das Bild nie: Sie zentrieren es mit erhaltenen Proportionen in einem Quadrat und lassen die Ränder transparent. Für ein exaktes Quadrat schneiden Sie zuerst mit Bild zuschneiden einen quadratischen Ausschnitt aus.
Das neue Favicon wird nicht angezeigt
Browser speichern Favicons lange im Cache. Die Datei umzubenennen oder einen Versionsparameter anzuhängen (/favicon.ico?v=2) und zu prüfen, ob der Server den richtigen MIME-Typ liefert, löst das Problem meist. Das Icon in den Google-Suchergebnissen aktualisiert sich erst, nachdem die Website erneut gecrawlt wurde.
Windows zeigt weiterhin das alte Icon
Windows hält Icons in einem eigenen Cache. Die App neu zu erstellen und die Verknüpfung neu anzulegen oder sich ab- und wieder anzumelden, genügt oft.
Tipps zur Umwandlung
- Eine ICO-Datei reicht für eine Website nicht: Der Favicon-Generator erzeugt in einem Durchgang favicon.ico (16, 32 und 48 Pixel), favicon-48x48.png, apple-touch-icon.png (180 Pixel), icon-192.png, icon-512.png, ein maskierbares icon-512-maskable.png und site.webmanifest, dazu icon.svg, wenn die Vorlage ein SVG ist. Außerdem erhalten Sie den Codeschnipsel für den
<head>Ihrer Seite. - Das Apple-Icon braucht einen deckenden Hintergrund: iOS zeigt transparente Bereiche schwarz an und rundet die Ecken selbst ab, daher füllt der Favicon-Generator das apple-touch-icon mit der von Ihnen gewählten Hintergrundfarbe.
- Wenn Ihr Logo ein SVG ist: Rendern Sie mit SVG in PNG ein großes PNG und wandeln Sie dieses in ICO um, oder geben Sie das SVG direkt in den Favicon-Generator.
Unsere ICO- und Favicon-Werkzeuge laufen in Ihrem Browser. Ihr Bild wird nicht hochgeladen und verlässt Ihr Gerät nicht.
Häufig gestellte Fragen
Wie groß darf ein Bild in einer ICO-Datei höchstens sein?
Die Felder für Breite und Höhe in einem Verzeichniseintrag umfassen je ein Byte, und 0 steht für 256. Ein einzelnes Bild in einer ICO-Datei ist also höchstens 256x256 Pixel groß.
Sollte ich für mein Favicon ICO oder PNG verwenden?
Beides. Eine favicon.ico mit 16, 32 und 48 Pixeln im Stammverzeichnis bedient ältere Browser und automatische Anfragen. Für aktuelle Browser und Mobilgeräte deklarieren Sie PNG-Icons (und optional SVG) mit <link>-Tags.
Unterstützt ICO Transparenz?
Ja. Alte ICO-Dateien nutzen eine 1-Bit-Maske, 32-Bit-Bilder haben seit Windows XP einen vollständigen Alphakanal, und eingebettetes PNG überträgt Transparenz seit Vista.
Wie wandle ich eine ICO-Datei in PNG um?
Fügen Sie Ihre ICO-Datei in den Bildkonverter ein und wählen Sie PNG als Zielformat. Enthält die Datei mehrere Größen, wird die größte verwendet.
Werden ICO-Dateien auf dem Mac verwendet?
macOS nutzt für App-Icons das Format ICNS. Für Websites funktionieren favicon.ico und PNG-Icons in Browsern auf jedem Betriebssystem.
