xiry.

Development · Tip

Light/dark mode favicons via media attribute

HTML technique to switch browser favicons based on system color scheme

From the Xiry library · Updated 11 October 2026

A zero-JavaScript HTML pattern that serves different favicons for light and dark modes using the media attribute on link tags. It prevents dark logos from vanishing against dark browser tabs and white logos from disappearing in light mode.

How it works

Use the `media` attribute on favicon link tags to switch icons with the user's color scheme:

Lightmode Favicon:

<link rel="icon" href="light-icon.ico" media="(prefers-color-scheme: light)" />

Darkmode Favicon:

<link rel="icon" href="dark-icon.ico" media="(prefers-color-scheme: dark)" />

Especially useful when the product logo is fully white or fully dark.

What it's for

  • Prevent monochrome logos from disappearing in browser tabs based on theme
  • Serve distinct high-contrast favicons for light and dark operating system modes
  • Switch tab icons dynamically without running client-side JavaScript

Key points

  • Uses native HTML link tag media attribute
  • Targets prefers-color-scheme media query
  • Requires zero JavaScript execution
  • Works automatically based on user OS or browser theme preference

Pricing

Free

Details

Type
Tip
Category
Development
Topic
HTML & CSS Tips
Open source
No
Platforms
Web
For
Web developers and front-end designers
Tags
html, favicon, css, dark mode, frontend, webdev

Why it was saved

  • @flornkm, 6 August 2025: If your logo is fully white or dark, it can vanish in browser tabs under the wrong scheme; using the media attribute on the link tag fixes this with two .ico files and no JS.

Related

Updated