SVG-Favicon - Support, Fallbacks, Grenzen

Ein SVG-Favicon funktioniert in modernen Desktop-Browsern, wenn du type="image/svg+xml" setzt und PNG- oder ICO-Fallbacks für Safari, ältere Clients und Kontexte ohne Vektor-Support mitlieferst. SVG ersetzt nicht dein komplettes Icon-Set. Es ist eine optionale scharfe Schicht über 16×16, 32×32, apple-touch-icon und Manifest-Icons.

Dieser Guide zeigt, wo SVG hilft, wo es scheitert, und welches HTML-Muster alle Browser abdeckt, ohne Lesezeichen oder Home-Screen-Icons zu brechen.

Was ein SVG-Favicon wirklich leistet

Vektor-Favicons skalieren ohne Pixelierung auf jede Tab-Größe. Eine einzelne favicon.svg wirkt auf 32×32 und auf Retina-Displays scharf, weil der Browser das SVG beim Rendern rasterisiert.

Das klingt ideal für Logos mit einfacher Geometrie. In der Praxis behandeln Browser SVG als eine Option in einer Prioritätenliste. Fehlt Support oder blockiert etwas das SVG, gewinnt der nächste passende rel="icon"-Eintrag.

SVG-Favicons ersetzen nicht:

• favicon.ico im Root (wird weiter automatisch angefragt)
• apple-touch-icon für iOS-Home-Screens (nur PNG)
• Manifest-Icons bei 192×192 und 512×512 für Android-PWAs

Die vollständige Größentabelle findest du im Favicon-Größen-Guide.

Browser-Support 2026

Desktop-Chromium, Firefox und aktuelle Edge-Versionen akzeptieren SVG-Favicons bei korrektem MIME-Type und type-Attribut. Safari unter macOS unterstützt SVG in Tabs in aktuellen Versionen, iOS Safari nutzt für Home-Screen-Icons weiter PNG und ignoriert SVG bei „Zum Home-Bildschirm“.

Die sichere Regel: SVG für scharfe Desktop-Tabs, aber immer PNG oder ICO zusätzlich deklarieren, damit kein generischer Globus erscheint.

Empfohlenes HTML-Muster mit Fallbacks

Die Reihenfolge spielt eine Rolle, wenn mehrere rel="icon"-Tags konkurrieren. Viele Teams listen ICO und PNG zuerst, dann SVG.

Produktionsreifes Beispiel:

<link rel="icon" href="/favicon.ico" sizes="any">
<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="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Warum dieser Stack funktioniert:

1. favicon.ico bedient Legacy-Crawler und automatische Root-Requests.
2. PNG-Größen decken Safari-Sonderfälle, RSS und Tools ohne SVG ab.
3. SVG liefert Retina-Desktop-Tabs eine scharfe Quelle.
4. apple-touch-icon kümmert sich um iOS außerhalb der Tab-Leiste.
5. Manifest bedient Android-Install-Oberflächen.

Copy-Paste-Varianten und Framework-Hinweise: Favicon-HTML-Beispiel und Favicon per HTML einbinden.

SVG-Favicons designen, die bei 16×16 überleben

SVG skaliert mathematisch. Das Auge nicht. Ein Logo, das bei 512×512 perfekt wirkt, wird bei 16×16 zu grauem Brei, wenn dünne Striche kollabieren.

Design-Regeln für Tab-Größen

• Kräftige Formen mit mindestens 2px Strich bei 16×16-Äquivalent
• Kein Kleinsttext; Initialen nur, wenn sie die viewBox füllen
• Vollflächen statt Haarlinien
• Quadratische viewBox (1:1)
• In einem Design-Tool bei 16×16 und 32×32 testen

Wenn dein Markenzeichen feine Details braucht, lass SVG für Tabs weg und liefere optimierte PNGs aus einem 512×512-Master. Unscharfe PNGs bedeuten meist falsche Exportgrößen, nicht fehlendes SVG. Siehe Favicon unscharf? So behebst du Pixelierung.

Dark Mode und transparentes SVG

Browser-Chrome wechselt zwischen hellem und dunklem Theme. Ein weißes Logo auf transparentem SVG verschwindet auf hellen Tabs.

Optionen:

• Dezenter Kreis-Hintergrund im SVG
• Separate PNGs mit eingebautem Kontrast
• prefers-color-scheme im SVG (limitierter Favicon-Support; nicht allein darauf verlassen)

Im Zweifel beide Themes prüfen. Favicon Check listet deklarierte Icons und lässt dich jede Datei herunterladen.

Grenzen und Fallstricke bei SVG-Favicons

Kein SVG im Web-App-Manifest

Die Manifest-Spezifikation erwartet PNG für Install-Icons. "icons"-Einträge mit SVG funktionieren auf Android nicht zuverlässig. Halte 192×192 und 512×512 PNG in site.webmanifest. Details in Web-App-Manifest-Icons erklärt.

MIME-Type muss stimmen

favicon.svg als image/svg+xml ausliefern. Falscher Content-Type führt zu stillem Fallback oder kaputtem Tab.

Externe Ressourcen im SVG

Manche Exporte referenzieren externe Fonts oder Bilder. Favicons laden in einem eingeschränkten Kontext. Pfade inline einbetten. <script> entfernen.

sizes="any" bei SVG

<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">

Gültig für Vektoren. Bei PNG exakte Pixelgrößen wie 32x32 verwenden.

Caching nach SVG-Updates

Browser cachen Favicons aggressiv. Nach dem Tausch von favicon.svg siehst du oft noch das alte Zeichen. Siehe Favicon-Cache erklärt.

Schritt für Schritt - SVG mit sicheren Fallbacks

1. Quadratisches SVG mit vereinfachter Geometrie exportieren.
2. favicon.ico, 16×16, 32×32 und 180×180 PNG aus demselben Master erzeugen.
3. 192×192 und 512×512 PNG ins Manifest legen.
4. Alle Dateien ins Root oder nach /assets/icons/ hochladen.
5. Vollständigen link-Block im serverseitig gerenderten <head> einfügen.
6. Prüfen, dass /favicon.ico ohne Login mit 200 antwortet.
7. Live-URL mit Favicon Check scannen.
8. Hard-Refresh oder privates Fenster für den Tab-Test.

Bleibt der Tab leer, zuerst Favicon wird nicht angezeigt? So behebst du es durchgehen, bevor du SVG-Support die Schuld gibst.

SVG vs PNG vs ICO

Die meisten Produktions-Sites nutzen alle drei: ICO im Root, PNG-Leiter, optional SVG für Desktop.

Häufige SVG-Favicon-Fehler

Nur SVG, kein PNG oder ICO

Scharfer Tab in Chrome, generischer Globus im RSS-Reader. Immer Raster-Fallbacks mitliefern.

Komplexe Illustration bei 16×16

Detailreiche Pfade werden zu Rauschen. Mark vereinfachen oder SVG weglassen.

Falscher Pfad auf Unterseiten

href="favicon.svg" bricht unter /blog/beitrag. Root-relative Pfade wie /favicon.svg nutzen.

CDN mit falschem MIME oder CORS

Manche CDNs liefern text/plain. Direkte URL im Inkognito-Fenster testen.

SVG soll unscharfe PNG retten

Wurden PNGs aus 16×16 hochskaliert, hilft SVG nicht bei Manifest oder iOS. Neu aus großem Master exportieren. Siehe Häufige Favicon-Fehler.

Wann du SVG ganz weglassen solltest

• Fotorealistisches oder gradient-lastiges Logo
• Kein Team für sauberes Inline-SVG
• Publikum überwiegend mobile Safari
• Brand-Guidelines verlangen identische Pixel überall

Eine saubere PNG-Leiter aus 512×512 reicht den meisten Sites. SVG ist Enhancement, keine Pflicht.

MIME-Type und Server-Header prüfen

Selbst perfektes HTML scheitert, wenn der Server SVG falsch ausliefert. Erwartet:

Content-Type: image/svg+xml

Test mit:

curl -I https://deine-domain.de/favicon.svg

Antwortet der Server text/plain oder application/octet-stream, ignorieren manche Browser das SVG und greifen zum PNG-Fallback - oder zeigen gar nichts, wenn kein Fallback existiert. Gleicher Check für PNG (image/png) und ICO (image/x-icon).

Bei nginx:

types {
  image/svg+xml svg;
  image/png png;
  image/x-icon ico;
}

Bei Apache .htaccess:

AddType image/svg+xml .svg
AddType image/png .png
AddType image/x-icon .ico

Nach Header-Fix erneut Favicon Check laufen lassen.

SVG in Build-Pipelines (Next.js, Vite, Webpack)

Frameworks kopieren public/favicon.svg nach /favicon.svg, fügen aber nicht automatisch den link-Tag ein.

Next.js App Router: app/icon.svg erzeugt Metadata, ersetzt aber nicht apple-touch-icon oder Manifest. Vite: Datei in public/, Tags manuell in index.html. Prüfe immer gerendertes Production-HTML, nicht nur Repo-Struktur.

Wenn ein Bundler SVG optimiert und dabei viewBox entfernt, bricht Skalierung. Optimierer so konfigurieren, dass viewBox erhalten bleibt.

Security und CSP

Content-Security-Policy mit striktem default-src blockiert manchmal externe Favicon-URLs. Self-hosted Icons unter derselben Origin vermeiden das. Inline-Skripte im SVG entfernen - manche Scanner markieren SVG-Favicons als Risiko.

Bei img-src oder default-src ohne data: funktionieren Data-URI-Favicons nicht. Statische Dateien auf HTTPS bevorzugen, wie in Favicon-HTML-Beispiel.

Vergleich mit PNG-only Setup

Teams ohne SVG-Erfahrung starten mit PNG-Leiter aus Favicon-Größen-Guide. SVG später ergänzen, wenn Desktop-Schärfe Priorität hat.

Nach jedem SVG-Update Production mit Favicon Check scannen und SVG plus Fallbacks gemeinsam bestätigen.

FAQ

Unterstützen alle Browser SVG-Favicons?

Moderne Desktop-Browser ja. iOS-Home-Screen, Android-Install und viele Nicht-Browser-Clients nein. PNG und ICO als Fallback sind Pflicht.

Soll SVG oder PNG zuerst im HTML stehen?

Beides funktioniert, wenn alle Dateien existieren. Viele listen ICO und PNG vor SVG.

Kann ich SVG bei apple-touch-icon nutzen?

Nein. 180×180 PNG für rel="apple-touch-icon".

Nutzt Google SVG-Favicons?

Google bevorzugt historisch ICO und PNG. /favicon.ico und PNG-Größen behalten, auch mit SVG für Tabs.

Wie teste ich SVG-Favicon-Support?

URL mit Favicon Check scannen. SVG und Fallbacks sollten gemeinsam gelistet sein.

Warum lokal ok, live kaputt?

MIME-Type, Pfad, CDN-Cache, abweichendes Production-HTML prüfen. View-Source auf der Live-URL, nicht nur DevTools Elements.

Ersetzt ein SVG mehrere PNG-Größen?

Für Desktop-Tabs kann ein SVG skalieren. Für iOS, Android, Manifest und ICO brauchst du weiter separate Rasterdateien.

Inline-SVG im HTML statt link-Tag?

Browser erwarten rel="icon" mit .svg-URL. Inline-SVG im Body ersetzt das nicht.

Fazit

SVG-Favicons für scharfe Desktop-Tabs nutzen, aber nie allein. favicon.svg mit favicon.ico, 16×16 und 32×32 PNG, apple-touch-icon und Manifest-Icons kombinieren. Grafik für 16×16 vereinfachen, korrekte MIME-Types setzen, Live-Stack mit Favicon Check prüfen. Größen und HTML-Vorlagen: Favicon-Größen-Guide und Favicon-HTML-Beispiel.