App-Icons vs Favicons: ICO vs PNG und was jede Plattform erwartet

Icons sind in moderner Software allgegenwärtig, vom winzigen Bild in einem Browser-Tab bis zum großen Quadrat auf dem Startbildschirm eines Smartphones. Obwohl sie an der Oberfläche ähnlich aussehen, dienen diese Icons unterschiedlichen Zwecken, folgen unterschiedlichen Formatregeln und werden in sehr unterschiedlichen Kontexten angezeigt. Sie zu verwechseln oder das falsche Format zu verwenden führt zu unscharfen Tabs, fehlenden Lesezeichen-Icons oder Ablehnungen im App-Store.

Die zwei häufigsten Kategorien sind Favicons und App-Icons. Ein Favicon (kurz für "Favorite Icon") ist das kleine Bild, das in Browser-Tabs, Lesezeichenlisten und im Browserverlauf erscheint. Ein App-Icon ist das Bild, das eine native Anwendung auf einem Desktop- oder Mobilbetriebssystem repräsentiert. Beide beginnen als Bilddateien, unterscheiden sich aber in Formatanforderungen, Größenerwartungen und wie die Plattform sie erkennt und verwendet.

Dieser Artikel erklärt, was jeder Icon-Typ ist, wann Sie das ICO-Format gegenüber PNG verwenden sollten und was die großen Plattformen tatsächlich erwarten. Ob Sie eine Website erstellen, eine Desktop-Anwendung paketieren oder eine Mobile-App ausliefern — Sie werden genau wissen, welches Format und welche Größen bereitgestellt werden müssen.

Was ist ein Favicon?

Ein Favicon ist das Icon, das ein Webbrowser neben Ihrer Website anzeigt. Sie sehen es im Browser-Tab neben dem Seitentitel, in Ihrer Lesezeichenliste, im Browserverlauf und in einigen Fällen in der Adressleiste oder in Suchergebnissen. Der Begriff stammt von der ursprünglichen Implementierung des Internet Explorer, der nach einer Datei namens favicon.ico im Stammverzeichnis jeder Website suchte.

Historisch mussten Favicons im ICO-Format sein. Der Internet Explorer verlangte es, und es gab keine Alternative. Die Fähigkeit des ICO-Formats, mehrere Größen in einer einzigen Datei einzubetten, machte es zu einer praktischen Wahl: Eine Datei konnte sowohl das 16x16-Bild für den Tab als auch das 32x32-Bild für die Lesezeichenleiste liefern. Moderne Browser (Chrome, Firefox, Safari, Edge) akzeptieren jetzt auch PNG-Favicons, die über ein <link>-Tag im Seiten-HTML angegeben werden, greifen aber immer noch auf /favicon.ico zurück, wenn kein explizites Link-Tag vorhanden ist.

Für maximale Kompatibilität über alle Browser hinweg, einschließlich älterer Versionen und Crawler, ist die Bereitstellung einer favicon.ico-Datei im Stammverzeichnis Ihrer Website nach wie vor der sicherste Ansatz. Diese ICO-Datei sollte mindestens 16x16 und 32x32 Größen enthalten. Viele Entwickler fügen auch 48x48 für High-DPI-Browser-Tabs hinzu. Sie können dies mit PNG-Link-Tags für Plattformen ergänzen, die diese bevorzugen, aber die ICO-Datei fungiert als Ihr Sicherheitsnetz.

Was ist ein App-Icon?

Ein App-Icon repräsentiert eine native Anwendung in der Benutzeroberfläche eines Betriebssystems. Unter Windows erscheint es auf dem Desktop, in der Taskleiste, im Startmenü und im ALT+TAB-Umschalter. Unter macOS zeigt es sich im Dock, Launchpad und Finder. Unter iOS und Android belegt es einen Platz auf dem Startbildschirm und in der App-Schublade. Jede Plattform hat eigene Formatanforderungen und Größenspezifikationen.

Windows verwendet das ICO-Format für Anwendungs-Icons. Eine ausführbare Windows-Datei (.exe) bettet eine ICO-Ressource ein, die das Betriebssystem liest und anzeigt. Dieses ICO sollte Ebenen bei 16, 32, 48, 64, 128 und 256 Pixeln enthalten, um jeden Anzeigekontext und DPI-Skalierungsfaktor abzudecken. Verknüpfungen (.lnk-Dateien) können auch externe ICO-Dateien referenzieren.

macOS verwendet das ICNS-Format, Apples proprietäres Icon-Containerformat mit mehreren Auflösungen. ICNS-Dateien können Größen bis zu 1024x1024 Pixeln enthalten. Die Quellbilder sind typischerweise PNGs, die während des Build-Prozesses in das ICNS-Bundle kompiliert werden.

iOS erfordert PNG-Bilder in bestimmten Größen (60x60 bei 2x und 3x, plus Variationen für iPad, Spotlight und Einstellungen). Apple verwendet weder ICO noch ICNS für iOS-App-Icons. Die Bilder werden als einfache PNGs im Asset-Katalog des App-Bundles bereitgestellt.

Android verwendet ebenfalls PNG, typischerweise als adaptive Icon-Ebenen (Vordergrund und Hintergrund) in mehreren Dichten (mdpi bis xxxhdpi). Das Play-Store-Icon ist ein 512x512 PNG.

Web-Apps (PWA) verwenden PNG-Icons, die in einer manifest.json-Datei referenziert werden. Gängige Größen sind 192x192 und 512x512. Diese Icons erscheinen auf dem Startbildschirm, wenn ein Benutzer die PWA installiert.

Praktische Ratschläge und häufige Fehler

Icons über Plattformen hinweg richtig zu machen erfordert Aufmerksamkeit für einige Details, die leicht übersehen werden. Hier sind die Fehler, die Entwickler am häufigsten machen, zusammen mit unkomplizierten Lösungen.

Sich auf ein einzelnes PNG für alles verlassen: Ein einzelnes 512x512 PNG funktioniert für einige Kontexte, versagt aber bei anderen. Browser, die nach /favicon.ico suchen, werden es nicht finden. Ausführbare Windows-Dateien können kein PNG als Icon-Ressource einbetten. Generieren Sie immer eine dedizierte ICO-Datei für Favicon- und Windows-Anwendungsfälle, auch wenn PNG Ihr primäres Quellformat ist.

Nur eine Größe in der ICO-Datei verwenden: Eine ICO-Datei mit nur 32x32 sieht in einem Browser-Tab gut aus, wird aber in der großen Icon-Ansicht des Windows-Explorers zu einem unscharfen Fleck. Schließen Sie immer mehrere Größen ein. Das vollständige Set (16 bis 256) stellt sicher, dass jeder Anzeigekontext eine pixelgenaue Ebene zum Zeichnen hat.

High-DPI- und Retina-Displays vergessen: Moderne Bildschirme packen zwei- bis dreimal so viele Pixel wie Standarddisplays. Ein 16x16-Favicon, das auf einem 1080p-Monitor gut aussieht, erscheint auf einem Retina-Display winzig und weich. Schließen Sie eine 32x32-Ebene ein (die Browser bei 2x-Skalierung für den 16px-Tab-Slot verwenden) und eine 48x48-Ebene für 3x-Skalierung oder High-DPI-Tabs.

Nicht plattformübergreifend testen: Ein Icon, das auf Ihrem Entwicklungsrechner perfekt aussieht, kann auf einem anderen Betriebssystem oder Browser völlig anders aussehen. Testen Sie Ihr Favicon in mindestens Chrome, Firefox, Safari und Edge. Wenn Sie eine Desktop-App erstellen, testen Sie das ICO unter Windows bei 100%, 150% und 200% DPI-Skalierung. Ein paar Minuten Testen erspart Stunden an Benutzerbeschwerden.

Für einen tieferen Einblick in das ICO-Format und seine Struktur oder für Hilfe beim Erstellen von Favicons lesen Sie unseren Favicon-Erstellungsleitfaden.