# Light/dark mode favicons via media attribute

> HTML technique to switch browser favicons based on system color scheme

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 is 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](https://xiry.app/topics/development.md)
- 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](https://x.com/flornkm/status/1953158130012946600): 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

- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Osmo](https://xiry.app/resources/osmo): Resource vault and toolkit of animations, components, and transitions for Webflow and HTML (Website, Paid)
- [Anchoring DOM Labels to a 3D Globe with CSS Anchor Positioning](https://xiry.app/resources/anchoring-dom-labels-to-a-3d-globe-with-css-anchor-positioni): Declaratively anchor and toggle DOM markers on 3D scenes with CSS (Tip, Free)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [COBE](https://xiry.app/resources/cobe): Lightweight 5KB WebGL globe with CSS anchor positioning support (Web app, Open source)
- [CSS Card Parallax with Pointermove and Custom Properties](https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties): CSS recipe for interactive 3D card tilt and 2D layer parallax (Tip, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/light-dark-mode-favicons-via-media-attribute

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.