Favicon-Größen erklärt (16–256): Was in favicon.ico gehört

Erfahren Sie genau, welche Icon-Größen in Ihr favicon.ico gehören und warum jede einzelne wichtig ist

Wo Favicons tatsächlich angezeigt werden

Die meisten Menschen denken bei Favicons an die kleinen Icons in Browser-Tabs, aber sie erscheinen an weit mehr Stellen. Das Verständnis jedes Kontexts hilft Ihnen, die richtigen Größen auszuwählen, damit Ihr Icon immer scharf aussieht.

Browser-Tabs sind der sichtbarste Ort. Jeder geöffnete Tab zeigt Ihr Favicon mit ungefähr 16 Pixeln an, was es zur primären Möglichkeit macht, Ihre Website zu identifizieren, wenn viele Tabs geöffnet sind. Lesezeichenleisten und -menüs rendern Ihr Icon in den meisten Browsern ebenfalls mit 16 Pixeln, sodass eine scharfe Version in dieser Größe unverzichtbar ist.

Adressleisten und Suchvorschläge zeigen in einigen Browsern das Favicon neben der URL an, typischerweise mit 16 oder 32 Pixeln je nach Bildschirmdichte. Verlaufspanels verhalten sich ähnlich und verwenden das Favicon, um Benutzern das Durchsuchen zuvor besuchter Websites zu erleichtern.

Über den Browser hinaus erscheinen Favicons auch in Betriebssystem-Kontexten. Wenn ein Benutzer Ihre Website an die Windows-Taskleiste anheftet oder eine Desktop-Verknüpfung erstellt, greift das Betriebssystem auf die ICO-Datei zu und kann das Icon mit 48, 64 oder sogar 256 Pixeln rendern. Auf High-DPI-Displays (Retina-Klasse) kann ein 32-Pixel-Icon gestreckt werden, um einen Platz zu füllen, der mehr Details erfordert, was zu einem unscharfen Ergebnis führt, sofern keine größere Variante in der ICO-Datei vorhanden ist.

Progressive Web Apps (PWAs) verwenden eigene Manifest-Icons anstelle von favicon.ico, aber das Favicon ist weiterhin wichtig als Fallback für die Standard-Browser-Chrome und für Benutzer, die die Website als Lesezeichen speichern, ohne die PWA zu installieren.

Wofür jede Favicon-Größe gedacht ist

Jede Pixelabmessung dient einem bestimmten Zweck. Die folgende Tabelle ordnet jede Standard-Favicon-Größe ihrer üblichen Verwendung zu und gibt an, ob Sie sie einschließen sollten.

Größe (px)	Übliche Verwendung	Einschließen?
16 × 16	Browser-Tabs, Lesezeichenleiste, Adressleiste, Verlauf	Ja — erforderlich
32 × 32	High-DPI-Browser-Tabs, Windows-Taskleiste, macOS Safari	Ja — erforderlich
48 × 48	An Windows angeheftete Website-Verknüpfungen, Windows-Explorer	Ja — empfohlen
64 × 64	Einige Windows-UI-Oberflächen, RSS-Reader	Optional
128 × 128	Windows-Ansicht großer Icons, Chrome Web Store	Optional
256 × 256	Windows-Ansicht extra großer Icons, High-DPI-Desktop-Verknüpfungen	Empfohlen für Vollständigkeit

16 und 32 Pixel sind das absolute Minimum. Ohne sie greifen Browser auf ein generisches Globus-Icon oder ein leeres Icon zurück, was die Markenwiedererkennung beeinträchtigt. Diese beiden Größen decken praktisch jedes Standard-DPI- und High-DPI-Browser-Tab-Szenario ab.

48 Pixel kommen ins Spiel, wenn Benutzer Windows-Verknüpfungen zu Ihrer Website erstellen. Das Betriebssystem rendert Desktop-Verknüpfungen in der Standard-Icon-Ansicht mit 48 Pixeln, sodass das Einschließen dieser Größe verhindert, dass das Betriebssystem die 32-Pixel-Variante unbeholfen hochskaliert.

64 und 128 Pixel erscheinen in Nischenkontexten. Einige Windows-UI-Oberflächen und Drittanbieteranwendungen fordern ein 64-Pixel-Icon an, während 128 Pixel vom Chrome Web Store und bestimmten Ansichten großer Icons verwendet werden. Ihr Einschluss fügt nur wenige Kilobyte zur ICO-Datei hinzu, sodass der Kompromiss minimal ist.

256 Pixel sind besonders wichtig auf High-DPI-Monitoren. Wenn Windows eine extra große Icon-Ansicht rendert oder ein Benutzer Ihre Website an die Taskleiste auf einem 4K-Display anheftet, kann das Betriebssystem die 256-Pixel-Variante für die schärfstmögliche Darstellung verwenden.

Ihr Mehrfachgrößen-Favicon erstellen

Das empfohlene sichere Set

Wenn Sie eine einzelne favicon.ico möchten, die den breitesten Bereich von Kontexten abdeckt, ohne unnötig aufgebläht zu sein, verwenden Sie dieses sichere Set:

16 px — Browser-Tabs und Lesezeichen
32 px — High-DPI-Tabs und Windows-Taskleiste
48 px — Windows-Desktop-Verknüpfungen
256 px — High-DPI- und extra große Icon-Ansichten

Dieses Vier-Größen-Set hält die ICO-Datei kompakt (typischerweise unter 30 KB) und gewährleistet gleichzeitig eine scharfe Darstellung in jedem wichtigen Kontext. Sie können 64 und 128 Pixel hinzufügen, wenn Ihr Anwendungsfall dies erfordert, aber die meisten Websites werden nie einen Unterschied bemerken.

Wenn Sie ein Favicon ausschließlich für das Web erstellen und nicht erwarten, dass Benutzer Desktop-Verknüpfungen erstellen, können Sie das Set auf nur 16 und 32 Pixel reduzieren. Das ergibt eine ICO-Datei deutlich unter 10 KB. Die Kosten für das Einschließen von 48 und 256 sind jedoch so gering, dass wir das vollständige sichere Set als Standard für nahezu jedes Projekt empfehlen.

Für einen breiteren Überblick darüber, wie das ICO-Format funktioniert und wann es die richtige Wahl gegenüber PNG ist, lesen Sie unseren Erklärartikel Was ist eine ICO-Datei.

So generieren Sie die richtigen Favicon-Größen

Die Erstellung eines Mehrfachgrößen-favicon.ico dauert mit Any2ICO nur wenige Schritte. Das Tool akzeptiert PNG, JPG, WebP, GIF, BMP, AVIF und SVG-Quellbilder bis zu 10 MB und erzeugt eine korrekt strukturierte ICO-Datei, die jede von Ihnen gewählte Größe enthält.

Beginnen Sie mit einer hochauflösenden Quelle. Laden Sie Ihr Logo oder Icon mit 512 Pixeln oder größer hoch. Eine große Quelle gibt dem Konverter genug Details, um saubere, herunterskalierte Versionen in jeder Zielgröße zu erzeugen. SVG-Quellen funktionieren besonders gut, da sie ohne Detailverlust skalieren.
Wählen Sie Ihre Größen. Aktivieren Sie die Kontrollkästchen für 16, 32, 48 und 256 (das sichere Set), oder fügen Sie 64 und 128 hinzu, wenn Sie sie benötigen.
Wählen Sie das Skalierungsverhalten. Einpassen passt das Bild in jedes Quadrat ein und bewahrt das Seitenverhältnis, wobei eventuelle Leerräume aufgefüllt werden. Ausfüllen füllt das gesamte Quadrat aus und beschneidet bei Bedarf die Ränder. Für die meisten Logos ist Einpassen mit transparentem Hintergrund die beste Wahl.
Laden Sie Ihr favicon.ico herunter. Platzieren Sie die resultierende Datei im Stammverzeichnis Ihrer Website (https://ihreseite.com/favicon.ico). Browser suchen automatisch nach diesem Pfad, sodass Sie in vielen Fällen nicht einmal ein <link>-Tag benötigen.

Any2ICO führt die Konvertierung direkt in Ihrem Browser mit der Canvas-API durch. Von Ihrem Gerät importierte Dateien werden zur Verarbeitung über den Server übertragen, aber nicht gespeichert. Einfügungen aus der Zwischenablage verbleiben vollständig auf Ihrem Gerät. Wenn Sie mehrere Icons gleichzeitig konvertieren, können Sie im Stapelmodus alles in einer einzigen ZIP-Datei herunterladen.

Für eine vollständige Anleitung mit Screenshots und HTML-Code-Snippets lesen Sie unsere Schritt-für-Schritt-Anleitung So erstellen Sie ein favicon.ico. Und wenn Sie speziell ein PNG konvertieren müssen, führt Sie unser PNG-zu-ICO-Leitfaden detailliert durch diesen Workflow.

Zusammenfassung

Die Wahl der richtigen Favicon-Größen muss nicht kompliziert sein. Die Grundregel ist einfach: Schließen Sie immer 16 und 32 Pixel ein, fügen Sie 48 und 256 für Windows- und High-DPI-Abdeckung hinzu und verwenden Sie ein hochauflösendes Quellbild, um jede Größe scharf zu halten. Dieses Vier-Größen-Set deckt die allermeisten realen Szenarien ab.

Wenn Sie bereit sind, Ihr Favicon zu erstellen, macht Any2ICO es einfach. Laden Sie Ihr Bild hoch, wählen Sie Ihre Größen und laden Sie eine einzelne ICO-Datei herunter, die überall funktioniert. Es ist kostenlos, schnell und respektiert Ihre Privatsphäre.

Erstellen Sie jetzt Ihr Favicon