SVG-Favicon: Unterstützung, Dark Mode und Fallbacks
Ein SVG-Favicon ist ein Vektor-Icon, das mit einem Link-Tag vom Typ image/svg+xml referenziert wird, sodass eine Datei in jeder Größe scharf rendert statt eines PNGs pro Größe. Da es ein Dokument ist, kann es eine prefers-color-scheme-Media-Query tragen und sich im Dark Mode anders zeichnen. Die Unterstützung ist nicht universell: Aktuelle Chrome, Edge und Firefox rendern es, während Safari es nicht für das Tab-Icon verwendet, also behalte einen PNG- oder ICO-Fallback daneben.
Eine Datei statt eines Satzes
Ein Raster-Favicon ist eine zum Exportzeitpunkt getroffene Größenentscheidung. Ein SVG ist das nicht: Der Browser rastert es in der Größe, die die Oberfläche braucht, sodass ein Tab bei 16 Pixeln und eine Lesezeichenleiste bei 32 dasselbe knackige Ergebnis aus einer Datei erhalten, die meist kleiner ist als ein einzelnes PNG.
Der Haken ist, dass die Unterstützung uneinheitlich ist und ein SVG-Favicon kein Ersatz für den restlichen Icon-Satz ist. Oberflächen installierter Apps auf Android und iOS wollen weiterhin PNGs, und Safari braucht weiterhin den Rasterpfad für sein Tab-Icon. Behandle das SVG als Verbesserung, die auf ein funktionierendes PNG- und ICO-Setup gelegt wird.
Wo ein SVG-Favicon funktioniert
| Oberfläche | Verhalten |
|---|---|
| Chrome-/Edge-Tab | Rendert das SVG |
| Firefox-Tab | Rendert das SVG |
| Safari-Tab | Verwendet es nicht; greift auf dein PNG oder ICO zurück |
| iOS-Home-Bildschirm | Verwendet das apple-touch-icon-PNG, nie das SVG |
| Android-/PWA-Installation | Verwendet die PNGs im Web-App-Manifest |
Die Head-Tags
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">Browser, die image/svg+xml verstehen, nehmen das SVG; der Rest fällt auf die ICO durch. Kein User-Agent-Sniffing nötig.
Ein Favicon, das dem Dark Mode folgt
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #111111 }
@media (prefers-color-scheme: dark) {
path { fill: #ffffff }
}
</style>
<path d="M20 80 L50 20 L80 80 Z" />
</svg>Die Styles müssen innerhalb des SVG stehen. Ein externes Stylesheet wird für ein Favicon nicht geladen. Browser, die SVG-Favicons unterstützen, respektieren das in der Regel; die anderen nutzen einfach den Raster-Fallback.
FAQ zu SVG-Favicons
Kann ein SVG-Favicon favicon.ico ersetzen?
Nicht ganz. Alles, was /favicon.ico per Pfad anfragt (und alles, was keine SVG-Favicons rendert), braucht die Rasterdatei. Das SVG ist eine Ergänzung, kein Ersatz.
Warum erscheint mein SVG-Favicon in Safari nicht?
Safari verwendet für das Tab-Icon derzeit kein SVG. Es greift auf das Raster-Icon zurück, das du deklariert hast, sodass die Lösung darin besteht, sicherzustellen, dass dieser Fallback existiert und gut aussieht.
Ist rel="mask-icon" dasselbe?
Nein. mask-icon ist eine separate Safari-Funktion, die ein flaches monochromes SVG nimmt und es für angeheftete Tabs einfärbt. Sie ignoriert die Farben in deiner Datei und beeinflusst das normale Tab-Icon nicht.