Das beste Favicon-Format 2026

ICO ist das ursprüngliche Favicon-Format, das in den 1990er Jahren von Microsoft für Windows-Symboldateien erstellt und später von Browsern als universelle Favicon-Konvention übernommen wurde. Eine .ico-Datei ist ein Container mit mehreren Bildern – eine einzelne .ico-Datei kann Frames mit 16×16, 32×32, 48×48, 64×64, 128×128 und 256×256 Pixeln in einer Binärdatei bündeln. Der Browser analysiert das ICO-Verzeichnis und stellt den Frame dar, der der benötigten Anzeigegröße am nächsten kommt, ohne dass zusätzliche Link-Tags erforderlich sind.

Die Multi-Size-Fähigkeit des .ico-Formats ist sein entscheidender Vorteil. Eine Datei, ein Link-Tag deckt alle Standard-Tab- und Lesezeichenleistengrößen in jedem Browser und Betriebssystem ab. Aus diesem Grund ist /favicon.ico seit den Anfängen des Webs der Standard-Erkennungspfad – Browser versuchen, /favicon.ico vom Domänenstamm abzurufen, auch wenn kein Link-Tag dies angibt. In keinem anderen Format ist dieser konventionsbasierte Fallback integriert.

PNG ist ein Einzelbildformat, das aufgrund seines überlegenen verlustfreien Komprimierungsalgorithmus bei jeder einzelnen Auflösung die schärfste Darstellung liefert. Ein 32×32 PNG eines flachen Farblogos kann auf weniger als 300 Bytes komprimiert werden – weitaus kleiner als der entsprechende BMP-Frame in einer älteren .ico-Datei. PNG bietet außerdem erstklassige Unterstützung für alle Browser, Bildbearbeitungstools und Content-Management-Systeme und ist damit das Format mit der geringsten Reibung.

PNG erfordert explizite Link-Tags mit Typ- und Größenattributen, um als Favicon erkannt zu werden. „<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>“ muss in Ihrem HTML vorhanden sein, sonst ignoriert der Browser PNG vollständig und greift auf /favicon.ico zurück. Aus diesem Grund fungiert PNG als Verbesserungsebene gegenüber .ico und nicht als Ersatz – es sorgt für eine schärfere Darstellung bei bestimmten Displaygrößen, während .ico alles andere übernimmt.

SVG ist das modernste und flexibelste Favicon-Format. SVG ist vektorbasiert, was bedeutet, dass eine Datei bei jeder Pixeldichte von 16×16 bis 3000×3000 ohne Rasterungsartefakte korrekt gerendert wird. Eine 1 KB große SVG-Datei unterstützt 96-dpi-Monitore, 2x Retina-Bildschirme und 4K-Displays gleichermaßen gut. Diese zukunftssichere Skalierbarkeit macht SVG zum besten Format für jede Website, deren Publikum Displays mit gemischter Dichte verwendet.

SVG-Favicons unterstützen die Dark-Mode-Anpassung durch die CSS-Medienabfrage `@media (prefers-color-scheme: dark)`, die im Block SVG `<style>` eingebettet ist. Wenn sich das Betriebssystem im Dunkelmodus befindet, wendet der Browser die Stile des Dunkelmodus auf den SVG an und die Farben des Favicons ändern sich – beispielsweise ein weißes Symbol auf dunklem Hintergrund anstelle eines dunklen Symbols auf hellem Hintergrund. Weder .ico noch PNG verfügen über eine entsprechende Funktion.

Die Browserunterstützung für SVG-Favicons im Jahr 2026 umfasst Chrome 80+, Edge 80+, Firefox 41+, Safari 15+ und alle Chromium-basierten Browser (Brave, Opera, Vivaldi). Dies stellt die überwiegende Mehrheit der aktiven Browserinstallationen dar. Die übrigen Benutzer – hauptsächlich auf älteren iOS-Geräten mit Versionen vor Safari 15 oder mit älteren Unternehmensbrowsern – greifen automatisch auf .ico zurück, wenn beide Link-Tags vorhanden sind.

Der Dateigrößenvergleich zwischen den drei Formaten bevorzugt SVG für moderne Inhalte und .ico für das Multi-Size-Bundle. Ein typisches SVG-Favicon ist 1–4 KB groß. Eine minimale .ico-Datei mit mehreren Größen und vier Frames (16/32/48/64) unter Verwendung der PNG-Komprimierung ist 8–20 KB groß. Eine einzelne 512×512 PNG (die Quellgröße) ist je nach Komplexität 20–100 KB groß. Für das kombinierte Favicon-Paket, das an den Browser gesendet wird, beträgt die Gesamtgröße normalerweise weniger als 50 KB und wird für die gesamte Sitzung zwischengespeichert.

Bei korrekter Verwendung ist die Transparenzunterstützung in allen drei Formaten gleich. SVG ist standardmäßig transparent (kein Hintergrund, es sei denn, Sie fügen explizit einen hinzu). PNG unterstützt einen 8-Bit-Alphakanal. ICO unterstützt Transparenz, wenn seine internen Frames die PNG-Komprimierung verwenden – was alle modernen ICO-Generatoren tun. BMP-kodierte ICO-Frames haben nur 1-Bit-Transparenz (binär); Vermeiden Sie Generatoren, die standardmäßig die BMP-Kodierung verwenden.

Speziell für den Dunkelmodus lautet die Formathierarchie: SVG zuerst (native CSS-Medienabfrageunterstützung), dann PNG für statische Kontexte, in denen der Dunkelmodus kein Problem darstellt, dann .ico als statischer Fallback. Websites, die eine dynamische Anpassung der Symbolfarbe benötigen, sollten SVG als primäres Favicon priorisieren und .ico nur als Fallback für Umgebungen verwenden, die SVG überhaupt nicht unterstützen.

Der empfohlene Produktions-Favicon-Stack für eine professionelle Website im Jahr 2026 kombiniert alle drei Formate in der Reihenfolge der Browserpräferenz: „<link rel='icon' href='/favicon.ico'>“ als universeller Fallback, „<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>“ für Retina-Klarheit, „<link rel='icon' type='image/svg+xml' href='/favicon.svg'>“ für skalierbare Dark-Mode-Unterstützung und „<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` für iOS-Startbildschirminstallationen. Browser wählen das spezifischste Format aus, das sie unterstützen.

Für bestimmte Plattformkontexte sind die Formatoptionen stärker eingeschränkt. iOS-Startbildschirmsymbole (apple-touch-icon) müssen PNG sein. Windows Betriebssystemverknüpfungen und Datei-Explorer-Symbole müssen .ico verwenden. Android PWA-Manifestsymbole müssen PNG sein. Nur die Browser-Tab-/Lesezeichenanzeige unterstützt alle drei Formate, wobei der Browser die Auswahl anhand der bereitgestellten Link-Tags trifft.

Die Generierung aller drei Formate aus einer einzigen Quelle ist der effizienteste Workflow. Laden Sie ein 512×512 PNG oder SVG auf das favicon generator hoch. Das Tool rastert den SVG (oder verwendet den PNG direkt), um alle .ico-Frames mit 16, 32, 48, 64, 128 und 256 Pixel zu erzeugen, exportiert eigenständige PNGs mit 32, 180, 192 und 512 Pixel und leitet den SVG weiter oder optimiert ihn. Das Download-Paket enthält alle Dateien und das HTML-Snippet zur sofortigen Bereitstellung.

Formate für SEO vergleichen: Die Google-Suche unterstützt sowohl .ico als auch PNG für Suchergebnis-Favicons. Die Mindestgröße beträgt 48×48 Pixel. SVG wird von Google noch nicht für Suchfavicons verwendet (es wird vor der Anzeige auf PNG gerastert). Um für die Favicon-Berechtigung für die Google-Suche geeignet zu sein, stellen Sie sicher, dass Ihre .ico-Datei einen 48×48-Frame enthält, Ihr Favicon öffentlich zugänglich ist und das Seitenverhältnis quadratisch ist. Einen vollständigen SVG-Vergleich finden Sie im favicon-vs-svg guide.