Dark-Mode-Favicons (prefers-color-scheme)
Ein Dark-Mode-Favicon ändert sich mit der Light-/Dark-Einstellung des Betriebssystems, sodass es gegen eine dunkle oder helle Browser-Chrome lesbar bleibt. Zwei Ansätze funktionieren: ein SVG-Favicon mit einer prefers-color-scheme-Media-Query, die sich selbst umfärbt, oder zwei PNG-Dateien, deklariert mit media="(prefers-color-scheme: dark)" an ihren Link-Tags. Ein einzelnes Icon in mittlerem Ton, das auf beiden lesbar ist, ist die einfachste Alternative.
Zwei Wege, es reagieren zu lassen
Der sauberere Ansatz ist ein SVG-Favicon mit einer prefers-color-scheme-Media-Query in seinen eigenen Styles, sodass die einzelne Datei sich umfärbt, wenn das Betriebssystem auf Dark umschaltet. Browser, die SVG-Favicons rendern und die Media-Query beachten (darunter Safari und Firefox), übernehmen die Änderung ohne zusätzliche Tags.
Die Alternative sind zwei Rasterdateien: ein normales Icon und ein für Dark optimiertes, jedes an einem Link-Tag mit media-Attribut. Die Unterstützung, PNG-Favicons per media zu wechseln, ist weniger konsistent als der SVG-Weg, also behalte immer ein Standard-Icon, das für sich allein besteht.
Der Zwei-Dateien-Ansatz
<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="icon" href="/favicon.ico" sizes="any" />Die einfache favicon.ico ist der Fallback für alles, was das media-Attribut ignoriert.
FAQ zum Dark-Mode-Favicon
Wie erstelle ich ein Dark-Mode-Favicon?
Entweder setze eine prefers-color-scheme-Media-Query in ein SVG-Favicon, sodass es sich selbst umfärbt, oder deklariere zwei PNGs mit media="(prefers-color-scheme: dark)" und light an ihren Link-Tags. Behalte eine einfache favicon.ico als Fallback.
Funktioniert das media-Attribut an Favicons überall?
Nein. Die Unterstützung, Favicons per prefers-color-scheme zu wechseln, ist über Browser hinweg uneinheitlich, weshalb du immer ein Standard-Icon behältst, das unabhängig vom Theme funktioniert.
SVG-Media-Query oder zwei PNGs?
Der SVG-Weg ist eine Datei und für den Theme-Wechsel generell besser unterstützt. Zwei PNGs geben pixelgenaue Kontrolle pro Theme, verlassen sich aber auf die weniger konsistente Handhabung des media-Attributs.