Es lassen sich seit geraumer Zeit SVG-Grafiken als Favicon benutzen. Hier erfährst du wie das geht und auch wie sich die Farbe des Favicons ändert, falls der Dark Mode aktiv ist.
So lassen sich allgemein Favicons hinzufügen. Das sind meist kleine Logos von Unternehmen, die im Browser-Fenster in den einzelnen Tabs gezeigt werden, damit der Nutzer diese besser voneinander unterscheiden kann.
<-- normal -->
<link rel="icon" href="favicon.svg">
Nun haben wir das Favicon als SVG-Grafik eingebunden. Wie wird der Dark Mode nun erkannt?
Dark Mode
Als Beispiel nehmen wir einen Kreis als Favicon.
<-- favicon.svg -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<style>
circle{
fill: #000
}
@media (prefers-color-scheme: dark) {
circle {
fill: #fff;
}
}
</style>
<circle cx="50" cy="50" r="47"/>
</svg>
Und zwar öffnen wir die SVG-Grafik des Kreises in einem beliebigen Text-Editor und fügen dort Inline-CSS ein. Zunächst füllen wir den Kreis standardmäßig mit dem Farbcode #000 (Schwarz). Anschließend definieren wir darunter einen Media Query, der bei folgender Anweisung aktiv wird: prefers-color-scheme: dark. Damit wird der Dark Mode vom Browser erkannt. Nun geben wir dem Kreis innerhalb des Media Queries den Farbcode #fff (Weiß) und schon sind wir fast fertig. Da noch nicht alle Browser den Dark Mode unterstützen, braucht es Fallbacks, also eine Alternative auf die zurückgegriffen werden kann, sofern der jeweilige Browser keine SVGs unterstützt.
Ausnahme Safari
Safari unterstützt auch SVG, aber leider keinen Dark Mode…
<-- safari -->
<link rel="mask-icon" href="favicon.svg" color="#d06b58">
Also fügen wir ein Fallback bzw. einen zweiten Link-Tag hinzu, auf den zurückgegriffen wird, falls Safari der verwendete Browser ist. Wir geben unserer SVG hier eine feste Farbe. Es empfiehlt sich eine Farbe zu benutzen, die sowohl auf Weiß, als auch auf Schwarz gut erkennbar ist. In unserem Beispiel ein Orange-Ton.
Ältere Browser
<-- alte Browser -->
<link rel="alternate icon" href="favicon.ico">
SVGs als Favicon werden noch lange nicht von allen Browsern unterstützt, deswegen empfiehlt es sich auch einen dritten Link-Tag hinzuzufügen. Sofern der Browser überhaupt keine SVGs unterstützt, wird auf die ICO-Datei zurückgegriffen.
Schlusswort
Leider funktioniert die Erkennung des Dark Modes nicht, wenn z.B. in Chrome ein spezifisches Design installiert wird. Sondern nur sofern bspw. die von Win10 und Chrome offiziell zur Verfügung stehenden Dark Modes aktiviert werden. So ist es eine gute Alternative, dem Icon ein Hintergrund zu geben, unabhängig von der Browser-Farbe wäre das Icon zwar nicht Transparent, aber immerhin zu jeder Zeit gut sichtbar.