SVG-Favicons: Wann du eins verwendest und die ICO, die du weiterhin brauchst
Ein einzelnes SVG kann dein schärfstes Favicon in modernen Browsern sein und aus einer einzigen Datei in den Dark Mode umschalten. Es kann nur nicht dein einziges Icon sein, deshalb erfährst du hier, wo es passt und was es der .ico und den PNGs überlässt.
Was ein SVG-Favicon gut kann
Ein Favicon wird über die Oberflächen hinweg in völlig unterschiedlichen Größen gezeichnet, und ein einzelnes SVG deckt sie alle aus einer Datei ab. Es bleibt auf jedem Display scharf, weil es vektorbasiert ist und kein festes Pixelraster, also gibt es kein unscharfes Hochskalieren und keine separaten 16-, 32- und 48-Pixel-Exporte, die synchron gehalten werden müssen.
Es hat noch einen Trick, den ein Raster-Icon nicht mitmacht: Eine prefers-color-scheme-Media-Query im SVG lässt dieselbe Datei sich selbst umfärben, wenn das Betriebssystem in den Dark Mode wechselt, sodass die Marke gegen eine dunkle Tab-Leiste lesbar bleibt, ohne ein zweites Bild auszuliefern.
So verlinkst du es, mit den Fallbacks
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Ein Browser, der SVG versteht, bevorzugt die erste Zeile. Alles andere ist für die Oberflächen da, die es nicht tun.
Wo SVG funktioniert und wo nicht
| Oberfläche | Verwendet das SVG? |
|---|---|
| Moderne Browser-Tabs | Ja, und dort sieht es am besten aus |
| Ältere Browser | Nein, sie greifen auf die .ico oder ein PNG zurück |
| Der /favicon.ico-Pfad | Nein, diese Anfrage braucht eine echte .ico |
| iOS-Startbildschirm | Nein, er verwendet das apple-touch-icon-PNG |
| Android- und PWA-Installation | Nein, sie liest PNG-Icons aus dem Manifest |
Das SVG an den Dark Mode anpassen
Setze eine prefers-color-scheme-Media-Query in die eigenen Styles des SVG und lass es die Füllfarben wechseln, wenn sich das OS-Theme ändert. Eine Datei wird dann sowohl auf heller als auch auf dunkler Browser-Oberfläche korrekt dargestellt, was der eleganteste Weg ist, ein themenbewusstes Favicon zu handhaben.
Wenn du die Media-Query lieber nicht pflegen willst, ist eine einzige Marke in einem mittleren Farbton mit genug Kontrast, um auf beiden Hintergründen zu bestehen, ein einfacherer Weg zum selben Ziel.
Häufig gestellte Fragen
Sollte ich ein SVG-Favicon verwenden?
Für den Browser-Tab: ja. Es ist eine einzige Datei, skaliert perfekt und kann sich an den Dark Mode anpassen. Kombiniere es einfach mit einer favicon.ico und PNG-App-Icons, damit die Oberflächen, die kein SVG lesen, trotzdem abgedeckt sind.
Unterstützen alle Browser SVG-Favicons?
Die meisten modernen Browser tun es, aber nicht alle, und keine Startbildschirm-Oberfläche verwendet eins. Deshalb behältst du eine .ico und PNGs als Fallbacks, statt dich allein auf das SVG zu verlassen.
Brauche ich noch favicon.ico, wenn ich ein SVG habe?
Ja. Browser, Crawler und Feed-Reader fordern /favicon.ico weiterhin über den Pfad an, und diese Anfrage lässt sich nicht mit einem SVG beantworten. Behalte eine echte .ico im Stammverzeichnis der Site.
Kann ein SVG-Favicon Dark Mode?
Ja, das ist einer seiner Vorteile. Eine prefers-color-scheme-Media-Query im SVG färbt es um, wenn das OS das Theme wechselt, sodass eine einzige Datei sowohl auf heller als auch auf dunkler Browser-Oberfläche funktioniert.