favicon.ico vs PNG vs SVG - Welches Format wann?

Kein einzelnes Favicon-Format gewinnt 2026 in jedem Kontext. favicon.ico deckt Legacy-Auto-Requests und Multi-Size-Bündelung. PNG gibt präzise Größenkontrolle im HTML. SVG skaliert sauber in modernen Desktop-Browsern, braucht aber PNG-Fallbacks für Safari-Tabs und iOS. Das beste Setup nutzt alle drei strategisch, nicht ein Format allein.

Dieser Guide vergleicht ICO, PNG und SVG für Tabs, Lesezeichen, iOS und PWAs. Du weiß danach, welche Datei wohin gehört und wie du HTML ohne Bruch älterer Clients verdrahtest.

Format-Vergleich auf einen Blick

Größen pro Kontext: Favicon-Größen - Leitfaden. Dieser Artikel fokussiert Formatwahl.

favicon.ico - der Legacy-Standard

Browser rufen https://deineseite.de/favicon.ico automatisch ab, auch bei PNG- oder SVG-Deklaration im HTML.

Eine echte ICO-Datei kann mehrere Bitmap-Größen bündeln:

• 16x16 für Tabs und Lesezeichen
• 32x32 für Hi-DPI-Tabs
• 48x48 für ältere Windows-Shell-Icons

Vorteile:

• Ein Request für mehrere Größen
• Funktioniert ohne link-Tags (trotzdem nicht empfohlen)
• E-Mail-Clients und Crawler suchen oft zuerst ICO

Nachteile:

• Schwerer hand-editierbar als PNG
• Keine SVG-Skalierung
• Transparenz manchmal schlecht exportiert

favicon.ico im Domain-Root halten. Erstellung: favicon.ico erstellen.

PNG - die moderne explizite Wahl

PNG ist Standard für deklarierte Favicons:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Vorteile:

• Verlustfrei bei flachen Icons und Transparenz
• Exaktes sizes-Attribut für Audit-Tools
• Einfache Pipeline aus Design-Tools
• Pflicht für apple-touch-icon und PWA-Manifest

Nachteile:

• Mehrere Dateien pflegen
• Erfüllt /favicon.ico nicht ohne separate ICO

PNG für jede größenspezifische Rolle: Tab-Größen, 180x180 Apple, 192 und 512 PWA.

SVG - skalierbar mit Einschränkungen

SVG-Favicons funktionieren in Chrome, Firefox und Edge:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

PNG nach SVG als Fallback listen. Safari auf macOS bevorzugte historisch PNG für Tabs. iOS akzeptiert kein SVG für apple-touch-icon.

Vorteile:

• Eine Datei für jede Tab-Größe
• prefers-color-scheme im SVG für Dark-Mode-Icons
• Kleine Dateigröße bei einfachen Marken

Nachteile:

• Kein SVG in Web App Manifest für Android (PNG nutzen)
• Komplexe SVGs rendern bei 16 px uneinheitlich
• Sicherheitsrichtlinien blockieren manchmal externe SVG-Entities

SVG ist Ergänzung, kein vollständiger Ersatz.

Empfohlener Format-Stack 2026

Produktionsreifes Setup:

/favicon.ico          (16, 32, 48 Multi-Size)
/favicon.svg          (optional, mit PNG-Fallback)
/favicon-32x32.png
/favicon-16x16.png
/apple-touch-icon.png (180x180 PNG)
/icons/icon-192.png   (Manifest)
/icons/icon-512.png   (Manifest)

HTML-Head Minimum:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Tag-Anleitung: Favicon per HTML einbinden.

Wann nur ein Format reicht

Nur ICO

Ok für interne Tools und Prototypen. /favicon.ico wird gefunden. Kein scharfes apple-touch-icon und kein PWA-Manifest.

Nur PNG

Geht, wenn du fehlendes Root-ICO-Verhalten akzeptierst. ICO ergänzen für E-Mail-Clients und alte Importer.

Nur SVG

Nicht allein ausliefern. Immer mit PNG und idealerweise ICO kombinieren.

Design-Tipps pro Format

ICO

• Aus demselben Master wie PNG-Größen exportieren
• Mindestens 16- und 32-px-Ebenen
• Keine Fotos; flache Marken komprimieren sauberer

PNG

• 8-bit PNG reicht für flache Logos
• sizes-Attribut = echte Pixelmaße

SVG

• Pfade für 16-px-Lesbarkeit vereinfachen
• Fills einbetten, keine winzigen Raster-Bilder
• Tab-Render in Chrome und Firefox bei 100% und 200% testen

Typische Format-Fehler

JPEG als Favicon

Keine saubere Transparenz, Artefakte. PNG oder ICO.

SVG ohne PNG-Fallback

Safari und ältere Chromium-Builds zeigen fehlende Tabs.

Falsche MIME-Types

ICO als image/x-icon, PNG als image/png, SVG als image/svg+xml.

PNG unter /favicon.ico

Manche Server mappen PNG auf .ico. Verwirrt Audit-Tools. Echte Multi-Size ICO nutzen.

SVG in Manifest-Icons

Android-Install erwartet PNG. SVG scheitert in Lighthouse.

Format-Mix testen

Nach Deploy:

1. Seitenquelltext - alle link-Tags
2. /favicon.ico, PNGs, SVG direkt öffnen
3. Tab in Chrome, Firefox, Safari
4. Favicon Check für HTML, ICO und Manifest

Das Tool lädt jede Datei zum Format- und Dimensions-Check.

Sicherheit und Hosting

Manche CSP-Richtlinien blockieren inline oder externe SVG-Favicons. Prüfe bei Content-Security-Policy, ob Favicon-URLs erlaubte Origins sind.

SVG-Favicons mit externen Entity-Referenzen können XSS-Risiken bei unsauberen Uploads bergen. Inline-SVG unter eigener Kontrolle bevorzugen oder SVG weglassen und nur PNG plus ICO liefern.

Corporate Proxies strippen gelegentlich ICO oder unbekannte MIME-Responses. Melden Enterprise-Nutzer fehlende Tabs, aus deren Netzwerk testen oder PNG-only-Deklarationen anbieten.

Formate nach Projekttyp

Marketing-Site: ICO + PNG 16/32 + apple-touch-icon 180 + optional SVG. Volle Abdeckung, minimales PWA bis Manifest nachgerüstet wird.

Installierbare PWA: Alles oben plus Manifest-PNG 192/512. SVG optional nur für Desktop-Tabs.

Internes Admin-Tool: ICO mit 16- und 32-Ebenen reicht oft. apple-touch weglassen, wenn Mobile per Policy blockiert.

E-Mail-lastige Marke: ICO im Root ist kritisch. Viele E-Mail-Clients ignorieren HTML-Link-Tags und holen nur /favicon.ico.

Neu bewerten, wenn Produktscope wächst. Marketing-Site mit PWA-Install braucht Manifest-PNGs ohne ICO zu entfernen.

Dateigröße und Performance

Favicon-Requests blockieren Rendering nicht spürbar, aber unnötig große 512-PNGs als einziges Tab-Icon verschwenden Bandbreite. Tab-Icons klein halten: 16 und 32 px Dateien sind typisch unter 2 KB bei flachen Marken.

SVG kann noch kleiner sein, aber PNG-Fallback bleibt Pflicht. ICO bündelt mehrere Größen in einem Request - sinnvoll für langsame Netze mit vielen parallelen Tab-Loads in Enterprise-Umgebungen.

CDN-Kompression (Brotli/Gzip) auf PNG und SVG aktivieren. ICO selten komprimierbar, deshalb Ebenen nicht über 256 px ohne Grund einbetten.

MIME-Types und Server-Konfiguration

Korrekte Header reduieren seltsames Client-Verhalten:

Nginx-Beispiel für ICO:

location = /favicon.ico {
  types { image/x-icon ico; }
}

Falsche Header brechen selten modernes Chrome, verwirren aber Audit-Tools. Favicon Check validiert Fetch-Erfolg unabhängig vom MIME - Header trotzdem fixen, wenn du Server kontrollierst.

Wann welches Format Priorität hat

Priorität nach Sichtbarkeit:

1. PNG 180x180 für iOS Homescreen (wenn mobile Traffic hoch)
2. PNG 192/512 für PWA und Android
3. PNG 16/32 plus ICO für Desktop-Tabs
4. SVG optional für Desktop-Chrome/Firefox

Kleines Team mit begrenztem Budget: ICO multi-size plus 180x180 apple-touch-icon zuerst, dann Tab-PNGs, dann PWA, zuletzt SVG.

Migrations-Szenarien zwischen Formaten

PNG-only Site ergänzt ICO: ICO aus bestehendem 32x32 PNG erzeugen, ins Root legen, link rel="icon" href="/favicon.ico" sizes="any" setzen. PNG-Tags behalten.

ICO-only Site ergänzt PNG: 16 und 32 aus ICO-Master-Quelle exportieren, nicht aus ICO-Binary rippen, wenn Quelle existiert.

SVG zu PNG-Site: SVG-Link vor PNG-Fallback einfügen. Safari-Tab testen. apple-touch-icon PNG unverändert.

PWA-Launch auf bestehender Site: Manifest-Icons ergänzen ohne ICO oder Tab-PNGs zu entfernen. Voller Stack in Favicon-Größen - Leitfaden.

Nach jeder Migration Produktion mit Favicon Check scannen. Halte eine interne Tabelle, welches Format für welche Fläche zuständig ist - Tab, iOS, PWA - damit niemand SVG fälschlich als apple-touch-icon einträgt.

Accessibility und Barrierefreiheit

Favicons sind dekorativ für Screenreader, aber klare Kontraste helfen sehbeeinträchtigten Nutzern mit Restsehen auf Tabs und Homescreen. Vermeide hellgraue Marken auf weißem Grund in 16 px.

Hoher Kontrast in ICO- und PNG-Ebenen wirkt auch in High-Contrast-Windows-Modi besser als feine Linien.

Formatwahl beeinflusst Barrierefreiheit weniger als Designentscheidungen in den Pixeln selbst. Siehe favicon.ico erstellen für saubere Multi-Size-Exporte.

Zusammenfassung der Format-Entscheidung

Kurzentscheidung für dein Team:

• Legacy und E-Mail: favicon.ico im Root
• Explizite Kontrolle: PNG pro Größe
• Desktop-Schärfe optional: SVG plus Fallback
• iOS: nur PNG 180x180
• Android PWA: nur PNG 192 und 512 im Manifest

Alles zusammen ist normal, kein Overkill. Favicon Check zeigt in Sekunden, welche Schicht fehlt.

Teams, die nur ein Format wählen wollen, scheitern fast immer an iOS oder Android. Der Stack aus ICO, Tab-PNG, apple-touch-icon und Manifest-PNG ist der praktische Standard 2026. Favicon per HTML einbinden liefert die konkrete Tag-Liste dafür.

ICO vs PNG speziell für Tabs

Tabs holen ICO automatisch, honorieren aber deklariertes PNG. Wenn du ein Format für Tabs wählen musst:

• PNG 32x32 + 16x16 für moderne Kontrolle
• Plus favicon.ico für alles, was es noch auto-anfordert

Siehe Beste Favicon-Größe für Browser-Tabs.

FAQ

favicon.ico oder PNG in 2026?

Beides. ICO für Root-Requests und Legacy. PNG für deklarierte Größen.

Ist SVG ein gutes Favicon-Format?

Ja auf Desktop mit PNG-Fallback und separatem apple-touch-icon PNG.

Kann favicon.ico PNG-Daten enthalten?

ICO ist Container. Moderne Generatoren betten PNG-komprimierte Ebenen ein.

Welches Format für apple-touch-icon?

Nur PNG. 180x180. Kein ICO, kein SVG.

Welches Format für PWA-Manifest-Icons?

PNG bei 192x192 und 512x512.

Unterstützt favicon.ico Transparenz?

Ja in modernen ICO-Dateien. Auf Windows-Verknüpfungen testen.

Welches Format ist am kleinsten?

Einfaches SVG oft minimal. ICO reduziert Requests. PNG 16+32 bleibt winzig bei flachen Marken.

Formate auf der Live-Site prüfen?

Favicon Check. Listet ICO, PNG, SVG und Manifest-Icons mit Fetch-Status. Ein Scan reicht meist, um fehlende Schichten im Format-Stack zu erkennen, bevor Nutzer sie in Tabs oder auf dem Homescreen sehen.

Fazit

favicon.ico für Legacy-Auto-Fetch und gebündelte Tab-Größen, PNG für jede explizite Größe inkl. Apple und PWA, SVG optional als scharfe Desktop-Schicht mit PNG-Fallback. Tags serverseitig verdrahten, mit Favicon Check validieren. Formatwahl ist ein Stack, kein Einzelgewinner - und genau dieser Stack deckt Tabs, iOS, Android und Legacy-Tools ab.