ICO-Datei erstellen: Windows-Icons und Favicons

ICO-Dateien bilden die Grundlage für Windows-Anwendungssymbole und Website-Favicons. Anders als Bildformate, die nur ein einzelnes Bild enthalten, kann eine ICO-Datei mehrere Größen bündeln. So können Windows und Browser ein Icon auswählen, das der gewünschten Darstellungsgröße möglichst nahekommt. Dieser Leitfaden erklärt die Grundlagen des ICO-Formats und zeigt Ihnen Schritt für Schritt, wie Sie eine ICO-Datei mit professionell gestalteten Icons erstellen.

Was ist das ICO-Format?

ICO ist ein Containerformat, das Microsoft speziell für Icons entwickelt hat. Sein wesentliches Merkmal: Eine einzelne .ico-Datei kann mehrere Bilder mit unterschiedlichen Größen und Farbtiefen enthalten, gemeinsam in einer Datei verpackt.

Wenn Windows oder ein Webbrowser ein Icon anzeigen muss, sucht das System in der ICO-Datei nach dem Bild, das am besten zur benötigten Größe passt. Mehrere enthaltene Größen können den Skalierungsbedarf verringern. Prüfen Sie das Design bei 16×16, 32×32 und 256×256 Pixeln; feine Details können bei kleinen Größen trotzdem unklar werden.

Wichtige Eigenschaften von ICO:

• Container für mehrere eingebettete Bilder
• Unterschiedliche Größe und Farbtiefe für jedes eingebettete Bild möglich
• Unterstützung vollständiger Transparenz durch PNG-32-Kodierung

Prüfen Sie, ob die Zielumgebung ICO und die bereitgestellten Größen unterstützt.

Wofür Sie ICO-Dateien benötigen

Für Windows-Anwendungen

Windows verwendet ICO-Dateien an vielen Stellen im Betriebssystem:

• Desktop-Verknüpfungen und Anwendungssymbole
• Symbole in der Taskleiste
• Symbole im Startmenü
• Symbole für Dateizuordnungen, die einen bestimmten Dateityp kennzeichnen
• Symbole in der Alt+Tab-Ansicht zum Wechseln zwischen Fenstern

Ohne passende ICO-Dateien zeigt Ihre Anwendung das allgemeine Windows-Standardsymbol an. Das vermittelt unmittelbar den Eindruck eines unfertigen Produkts.

Für Website-Favicons

Jede Website benötigt ein Favicon, das kleine Symbol an folgenden Stellen:

• Browser-Tabs
• Lesezeichenlisten
• Browserverlauf
• Verknüpfungen auf dem Startbildschirm mobiler Geräte
• Adressleiste

Prüfen Sie, ob die Zielumgebung ICO und die bereitgestellten Größen unterstützt.

So erstellen Sie eine ICO-Datei

Wenn Sie von einem PNG ausgehen und die Icon-Größen auswählen möchten, verwenden Sie PNG in ICO:

1. Laden Sie ein PNG mit bis zu 20 MB hoch.
2. Wählen Sie 16, 32, 48, 64, 128 oder 256 px; 32, 64 und 128 sind vorausgewählt.
3. Wandeln Sie die Datei um, laden Sie icons.zip herunter und entpacken Sie das Archiv.
4. Wählen Sie eine ICO-Datei mit einer einzelnen Größe oder favicon.ico mit allen ausgewählten Größen.

Rechteckige Ausgangsbilder werden proportional mit transparenten Rändern in das Quadrat eingepasst. Schneiden Sie das Bild vorher quadratisch zu, wenn das Motiv mehr Platz im Icon einnehmen soll. Für ein fest zusammengestelltes Website-Paket mit PNG-Dateien und einem Manifest verwenden Sie den Favicon-Generator. Er verarbeitet ein Bild und bietet keine Größenauswahl.

Benötigte Größen je nach Einsatzzweck

Wählen Sie die Größen passend zur tatsächlichen Zielumgebung. Diese Website bietet 16, 32, 48, 64, 128 und 256 px, jedoch keine 24 px. Nehmen Sie die Größen auf, die Ihre Anwendung oder das Browser-Layout benötigt, und prüfen Sie die kleinste Darstellung. Keine Zusammenstellung von Größen garantiert Kompatibilität oder Schärfe in jeder Umgebung.

Bewährte Vorgehensweisen für die Icon-Gestaltung

Setzen Sie auf Einfachheit

Icons werden sehr klein dargestellt. Ein Design, das bei 512×512 Pixeln detailliert und durchdacht wirkt, kann bei 16×16 zu einem unkenntlichen Fleck werden. Für wirkungsvolle Icons gelten daher andere Regeln als für viele andere Gestaltungsaufgaben:

• Kräftige, einfache Formen — Setzen Sie auf markante geometrische Formen statt auf filigrane Illustrationen.
• Hoher Kontrast — Das Icon muss auf hellen und dunklen Hintergründen gut erkennbar sein.
• Klare Silhouette — Die Gesamtform sollte auch ohne Farbdetails erkennbar bleiben.
• Wenige Farben — 3–5 Farben reichen meist aus; zu viele Farben wirken in kleinen Größen unübersichtlich.

Beginnen Sie mit der kleinsten Größe

Ein häufiger Fehler besteht darin, ein schönes großes Icon zu gestalten und dann zu erwarten, dass es sich problemlos verkleinern lässt. Gehen Sie stattdessen so vor:

1. Überlegen Sie zu Beginn, wie das Design bei 16×16 Pixeln aussehen wird.
2. Gestalten Sie es unter Berücksichtigung dieser Einschränkung.
3. Nutzen Sie größere Varianten für zusätzliche Details und Feinschliff.
4. Prüfen Sie vor dem Abschluss, ob alle Größen korrekt aussehen.

Vermeiden Sie feine Details

Bei kleinen Größen können bestimmte Elemente problematisch werden:

• Dünne Linien — Sie verschwinden oder wirken unscharf; verwenden Sie mindestens 2 px Strichstärke.
• Kleine Schrift — Unter etwa 32 px ist sie nicht lesbar; verzichten Sie möglichst auf Text in Icons.
• Farbverläufe — Sie können in großen Darstellungen gut aussehen, in kleinen aber zu flachen Farbflächen werden.
• Schlagschatten — Sie lassen kleine Icons oft unscharf wirken.

Vorhandene Bilder in ICO umwandeln

Aus PNG, dem häufigsten Ausgangsformat

PNG ist ein ideales Ausgangsformat für die ICO-Umwandlung:

• Quadratisches PNG mit transparentem Hintergrund
• Hohe Auflösung von 512×512 Pixeln oder mehr
• Saubere, glatte Kanten
• Keine Komprimierungsartefakte

Aus JPG

JPG ist ebenfalls verwendbar, hat aber Einschränkungen:

• Keine Transparenz: Bereiche, die transparent sein sollen, müssen manuell bearbeitet werden.
• Schneiden Sie das Bild quadratisch zu, falls es noch nicht quadratisch ist.
• JPG-Komprimierungsartefakte können bei kleinen Größen sichtbar werden.

Aus SVG

SVG ist ein sehr guter Ausgangspunkt, da es beliebig skalierbar ist:

• Exportieren Sie das SVG zunächst als hochauflösendes PNG mit 512×512 oder 1024×1024 Pixeln.
• Wandeln Sie das PNG anschließend in ICO um.
• Prüfen Sie das exportierte PNG und jede ICO-Größe; auch eine Vektordatei garantiert nicht, dass feine Details in kleinen Ausgabegrößen erhalten bleiben.

Favicons per HTML in die Website einbinden

Einfache Einbindung

Ein einfacher Favicon-Link:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Fügen Sie diesen Link in den <head>-Bereich Ihres HTML-Dokuments ein. Die meisten Browser finden eine Datei namens favicon.ico im Stammverzeichnis auch ohne HTML-Angabe automatisch. Ein ausdrücklicher Link ist jedoch zuverlässiger.

Moderne Einbindung mit mehreren Formaten

Verwenden Sie mehrere Formate, um auf verschiedenen Plattformen und Geräten möglichst gute Ergebnisse zu erzielen:

<!-- Standard-Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG-Favicons für moderne Browser -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple-Touch-Icon für den iOS-Startbildschirm -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Laden Sie jede referenzierte Datei hoch und testen Sie das Icon in den vorgesehenen Browsern und auf den vorgesehenen Geräten.

Web-App-Manifest

Ergänzen Sie für Progressive Web Apps (PWAs) auch eine Manifestdatei:

<link rel="manifest" href="/site.webmanifest">

Das Manifest verweist auf größere Icons mit 192×192 und 512×512 Pixeln. Sie werden verwendet, wenn die Website als App auf dem Startbildschirm installiert wird.

Icons in Windows-Anwendungen integrieren

In Anwendungsressourcen einbetten

Bei der Entwicklung einer Desktop-Anwendung wird die ICO-Datei direkt in die Anwendung eingebettet:

• Fügen Sie die .ico-Datei in Visual Studio als Ressource hinzu.
• Verweisen Sie im Anwendungsmanifest darauf.
• Windows verwendet je nach Darstellungskontext automatisch die passende Größe.

Dateitypen zuordnen

Wenn Sie ein bestimmtes Symbol für einen Dateityp verwenden möchten, etwa für .myapp-Dateien:

• Registrieren Sie die Dateiendung in der Windows-Registry.
• Verweisen Sie auf die ausführbare Anwendungsdatei oder auf eine separate ICO-Datei.
• Das Symbol erscheint im Datei-Explorer bei allen Dateien dieses Typs.

Qualitätsprobleme beheben

Unscharfe Icons

Ursache: In der ICO-Datei fehlt die angeforderte Größe. Windows skaliert deshalb die nächstgelegene verfügbare Größe.

Lösung: Nehmen Sie alle häufig benötigten Größen auf: 16, 32, 48 und 256. Mit Werkzeugen wie IcoFX oder Resource Hacker können Sie prüfen, welche Größen Ihre ICO-Datei enthält.

Gezackte Kanten oder Treppeneffekte

Ursache: Statt vollständiger Alpha-Transparenz wird binäre Transparenz mit 1 Bit verwendet.

Lösung: Verwenden Sie PNG-32-Ausgangsdateien mit vollständigem Alphakanal. Das moderne ICO-Format unterstützt PNG-32-Kodierung innerhalb des Containers.

Das Favicon erscheint nicht im Browser

Ursache: Browser-Cache, fehlerhaftes HTML oder ein falscher Dateipfad.

Lösung:

1. Leeren Sie den Browser-Cache und laden Sie die Seite vollständig neu (Ctrl+Shift+R oder Cmd+Shift+R).
2. Prüfen Sie, ob sich das <link>-Tag im <head>-Bereich befindet und der href-Pfad korrekt ist.
3. Stellen Sie sicher, dass die Datei erreichbar ist, indem Sie die URL direkt aufrufen.
4. Prüfen Sie mit einem Favicon-Validierungswerkzeug, ob die Datei korrekt formatiert ist.

Testen Sie Ihre Icons

Prüfen Sie vor der Veröffentlichung, ob Ihre Icons in allen Einsatzbereichen korrekt aussehen:

Darstellung in Windows

• Taskleiste: klein, typischerweise 24×24, aus 32×32 skaliert
• Desktop-Verknüpfung: mittelgroß, typischerweise 48×48
• Große Symbole im Datei-Explorer: 96×96 oder 128×128
• Extra große Symbole: 256×256
• Windows-11-Startmenü: verschiedene Größen

Darstellung im Browser

• Browser-Tab: 16×16 oder 32×32
• Lesezeichenleiste
• Browserverlauf
• Auf Mobilgeräten: Symbol der Startbildschirm-Verknüpfung

Prüfung auf verschiedenen Hintergründen

• Helle Hintergründe als häufigster Einsatzbereich
• Dunkelmodus und dunkle Hintergründe, die zunehmend wichtig sind
• Farbige Taskleisten und Werkzeugleisten

Häufig gestellte Fragen

Welche Größen sollte eine ICO-Datei enthalten?

Wählen Sie die Größen passend zur tatsächlichen Zielumgebung. Diese Website bietet 16, 32, 48, 64, 128 und 256 px, jedoch keine 24 px. Nehmen Sie die Größen auf, die Ihre Anwendung oder das Browser-Layout benötigt, und prüfen Sie die kleinste Darstellung. Keine Zusammenstellung von Größen garantiert Kompatibilität oder Schärfe in jeder Umgebung.

Können Sie für Favicons PNG statt ICO verwenden?

Ja, moderne Browser unterstützen PNG-Favicons mit <link rel="icon" type="image/png" ...>. ICO bietet jedoch die breiteste Kompatibilität, besonders mit älteren Browsern, E-Mail-Programmen und einigen Drittanbieter-Werkzeugen, die standardmäßig im Stammverzeichnis nach favicon.ico suchen.

Warum sieht Ihr Icon unscharf aus?

In Ihrer ICO-Datei fehlt die Größe, die Windows oder der Browser tatsächlich anzeigen möchte. Nehmen Sie alle benötigten Größen auf. Den Inhalt einer ICO-Datei können Sie mit IcoFX, Resource Hacker oder Online-Werkzeugen zur ICO-Prüfung kontrollieren.

Sollten Icons immer quadratisch sein?

Rechteckige Bilder werden proportional mit transparenten Rändern in das Quadrat eingepasst. Dieser Konverter schneidet sie nicht automatisch zu und streckt sie nicht.

Wie erstellen Sie ein transparentes Icon?

Beginnen Sie mit einem PNG, das bereits Transparenz enthält. Dieser Konverter übernimmt den Alphakanal der Ausgangsdatei ohne zusätzlichen Schalter. Prüfen Sie nach dem Entpacken des ZIP-Archivs die einzelnen Größen; feine Kanten können sich beim Skalieren verändern.

Fazit

Eine passende ICO-Datei lässt sich einfach erstellen, wenn Sie das Format als Container für mehrere Größen verstehen. Beginnen Sie mit einem sauberen, quadratischen und hochauflösenden PNG. Nehmen Sie alle für Ihren Einsatzzweck benötigten Größen auf, testen Sie verschiedene Darstellungskontexte und prüfen Sie das Ergebnis in jeder vorgesehenen Darstellungsgröße.

Erstellen Sie ICO-Dateien aus einem unterstützten PNG-, JPG-, WebP-, GIF- oder SVG-Bild mit unserem ICO-Konverter. Die verfügbaren Größen werden automatisch erzeugt.

ICO-Datei erstellen →

---

Weitere Werkzeuge: Favicon-Generator | Bildgröße ändern | PNG-Konverter