Ein schwarzes Logo auf transparentem Hintergrund sieht in einem hellen Tab perfekt aus und verschwindet in einem dunklen. ICO kann sich nicht anpassen, ein SVG-Favicon dagegen schon: Eine CSS-Regel wechselt die Farben passend zum Browser-Design.
Das Problem: eine Datei, zwei Hintergründe
Da Browser dem Systemdesign folgen, kann die Tableiste auf derselben Seite für eine Person fast weiß und für eine andere fast schwarz sein. Ein einfarbiges Favicon, das nur für einen Hintergrund gestaltet wurde, ist auf dem anderen unlesbar.
Viele Websites umgehen das mit einem deckenden farbigen Hintergrund. Das funktioniert, macht das Symbol aber zu einem schweren Farbfleck, während große Marken oft ein freigestelltes Zeichen verwenden.
Die passende Lösung lässt den Browser entscheiden. Dafür braucht es weder JavaScript noch eine Erkennung auf dem Server.
So funktioniert das anpassbare SVG
Eine SVG-Datei ist ein Dokument statt eines flachen Rasterbilds. Sie kann einen style-Tag und damit Media Queries enthalten. Eine Regel mit prefers-color-scheme: dark definiert die Füllfarbe der Pfade neu, sobald der Browser ein dunkles Design verwendet.
Das SVG legt zunächst eine Standardfarbe für das helle Design fest und ersetzt diese im Dunkelmodus durch eine weitere Regel. Der Browser wendet beim Rendern die passende Variante an und aktualisiert den Tab direkt bei einem Designwechsel.
Damit ist mehr möglich als eine reine Farbumkehr: Du kannst eine völlig andere Zeichnung anzeigen, etwa ein freigestelltes Symbol im hellen und eine gefüllte Plakette im dunklen Modus.
SVG neben der .ico einbinden
Binde das SVG mit link rel="icon" type="image/svg+xml" href="/favicon.svg" ein. Unterstützende Browser bevorzugen es, andere greifen auf die favicon.ico im Stammverzeichnis zurück.
Du musst also nichts entfernen: Beide Dateien bestehen nebeneinander und ergänzen sich bei der Browser-Abdeckung. Das ist progressive Verbesserung für ein 32-Pixel-Symbol.
Beachte dabei: Ein Favicon-SVG muss eigenständig sein. Externe Schriftarten, entfernte Bilder und Skripte werden in diesem Kontext nicht geladen. Text muss in Pfade umgewandelt werden.
Was der Dunkelmodus nicht abdeckt
Die dunkle Variante gilt für das Favicon im Desktop-Browser. Sie verändert weder das Apple Touch Icon, ein festes, deckendes PNG, noch die Manifest-Symbole, die Android auf seinem eigenen Hintergrund darstellt.
Auch die Unterstützung ist nicht überall gleich: Chromium-basierte Browser und Firefox lesen das anpassbare SVG, Safari hinkt je nach Version hinterher. Der automatische Rückgriff auf die .ico deckt diese Fälle ab.
Gestalte deshalb dein helles Symbol als Standardvariante für alle Besucher. Die dunkle Variante ist eine zusätzliche Verbesserung für Browser, die sie unterstützen.
Primärquellen
Häufige Fragen
Unterstützt favicon.ico den Dunkelmodus?
Nein. ICO speichert feste Rasterbilder ohne Kenntnis eines Designs. Nur SVG kann eine Media Query enthalten. Deshalb umfasst das moderne Paket beide Formate.
Braucht man zwei SVG-Dateien, eine helle und eine dunkle?
Nein, eine Datei genügt. Beide Varianten stehen im selben SVG und werden durch die Media Query prefers-color-scheme unterschieden. Zusätzliche Anfragen oder Erkennungscode sind nicht nötig.
Wie teste ich die Darstellung im Dunkelmodus?
Wechsle das Design deines Betriebssystems und lade den Tab neu. Im Generator stehen die Vorschauen für helle und dunkle Tabs nebeneinander, sodass du nicht hin- und herwechseln musst.