Dark-Mode-Favicons: So baust du eines, das sich anpasst
Eine dunkelblaue Marke verschwindet vor einer dunklen Tab-Leiste. Du kannst das aus einem einzigen SVG lösen oder aus zwei PNGs, aber ein Standard-Icon bleibt trotzdem darunter.
Was der Dark Mode wirklich verändert
Die Tab-Leiste des Browsers ist im hellen Modus hell und im dunklen Modus dunkel. Dein Favicon ändert sich nicht mit, es sei denn, du sorgst dafür. Eine Marke, die auf Weiß gestochen scharf wirkt, kann auf einem fast schwarzen Tab verschwinden – und umgekehrt gilt dasselbe für eine helle Marke auf hellem Chrome.
Du hast zwei Möglichkeiten, darauf zu reagieren. Liefere ein einziges SVG aus, das sich selbst umfärbt, oder liefere zwei PNGs und lass den Browser anhand der Systemeinstellung wählen. Der SVG-Weg ist eine Datei und ein Request. Der PNG-Weg funktioniert auf mehr Clients, aber seine Unterstützung für media-umgeschaltete Favicons ist ungleichmäßig, also stützt er sich häufiger auf den Fallback.
Methode A: ein SVG, das sich selbst umschaltet
Ein SVG-Favicon kann sein eigenes CSS mitbringen. Setz eine prefers-color-scheme: dark Media Query in das SVG und ändere den Fill dort. Der Browser liest die Systemeinstellung und färbt das Icon neu – ohne zweite Datei und ohne zusätzliches Link-Tag.
Das ist die Methode, zu der du zuerst greifen solltest. Es ist eine Datei, sie bleibt in jeder Größe gestochen scharf, und es ist der einzige Ansatz, bei dem ein einziges Asset beide Themes abdeckt.
Das SVG, mit den Fallbacks
<!-- In your <head>: SVG first, then the raster fallback -->
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- icon.svg, with the theme rule baked in -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
path { fill: #f5f5f5; }
}
</style>
<path d="M6 6h20v20H6z" />
</svg>Ein Browser, der SVG liest, nutzt die erste Zeile und respektiert die Media Query. Alles andere fällt auf favicon.ico zurück.
Methode B: zwei PNGs auf media-gescopten Link-Tags
Wenn du kein SVG verwenden kannst, exportiere zwei PNGs (etwa eine Dunkel-auf-Hell- und eine Hell-auf-Dunkel-Variante) und gib jedem über ein media-Attribut auf seinem Link-Tag einen Hinweis. Der Browser lädt das, das zum aktuellen Theme passt.
Die Unterstützung dafür ist lückenhaft. Manche Browser ignorieren das media-Attribut an Icon-Links und nehmen einfach das erste, das sie verstehen. Deshalb zählt die letzte Zeile: Ein schlichtes favicon.ico ohne media-Bedingung ist der Standard, auf den jeder Client zurückfallen kann.
Das Setup mit zwei PNGs
<link rel="icon" type="image/png" href="/favicon-dark.png"
media="(prefers-color-scheme: dark)">
<link rel="icon" type="image/png" href="/favicon-light.png"
media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon.ico" sizes="any">Halte das bedingungslose favicon.ico an letzter Stelle, damit ein Browser, der die media-Hinweise ignoriert, trotzdem ein Icon hat.
Der bequeme Weg, der einfach funktioniert
Wenn dir das alles den Aufwand nicht wert ist, nimm eine einzige Marke im mittleren Farbton. Eine Farbe mit genug Kontrast, um sowohl auf hellem als auch auf dunklem Chrome lesbar zu sein (eine kräftige Markenfarbe, weder fast schwarz noch fast weiß), ist in beiden Themes aus einer einzigen Datei lesbar.
Das ist der pragmatische Standard. Du verlierst die perfekte Abstimmung auf jedes Theme, gewinnst aber ein Asset, das nie verschwindet, und keine media-Bedingungen, bei denen du etwas falsch machen kannst.
Häufig gestellte Fragen
Wie bringe ich ein Favicon dazu, sich im Dark Mode zu ändern?
Nutze ein SVG-Favicon mit einer prefers-color-scheme: dark Media Query in seinen Styles, die die Fill-Farbe umschaltet, oder liefere zwei PNGs auf media-gescopten Link-Tags. Behalte in beiden Fällen ein schlichtes favicon.ico als Standard.
Funktionieren Dark-Mode-Favicons in jedem Browser?
SVG-Favicons mit interner Media Query werden von modernen Browsern gut unterstützt. Media-umgeschaltete PNG-Favicons sind weniger zuverlässig, also nimm immer ein bedingungsloses Fallback-Icon dazu.
Kann ich den Dark Mode überspringen und ein einziges Favicon nutzen?
Ja. Wähle eine Marke im mittleren Farbton mit genug Kontrast, um sowohl auf hellen als auch auf dunklen Tabs lesbar zu sein. Es ist eine Datei und sie verschwindet vor keinem der beiden Themes.
Muss sich das favicon.ico für den Dark Mode ändern?
Nein. Das favicon.ico ist dein Standard-Fallback für ältere Clients und Crawler. Lass es als eine einzige gut lesbare Version und regle den Theme-Wechsel über die SVG- oder PNG-Links darüber.