Design a Modern Favicon: Dark Mode Variants That Hold Up at Tiny Sizes
How to design a modern favicon with light and dark mode variants: simplify the vector mark, build an adaptive SVG, keep raster fallbacks, and check usage rights.
Contents
The short answer
A modern favicon is a simplified, vector-first version of a logo, usually a single symbol or letterform rather than the full lockup. It is delivered as an SVG that can adapt to light and dark browser themes, with raster fallbacks for platforms that do not use SVG icons. The dark mode variant is not a separate logo. It is the same mark with adjusted colors, or occasionally an adjusted outline or background, so that it stays visible against dark browser tabs, bookmarks bars and system interfaces.
No evidence about a specific brand, logo file or tool was supplied for this article. What follows covers general, verifiable design and delivery principles. It does not assess any particular asset.
Why dark mode changes favicon design
Favicons appear on surfaces the site owner does not control. Browser tab strips, history lists and operating system shortcuts may be light or dark depending on user settings. A black wordmark that reads well on a white tab can disappear on a dark one. A pale mark has the opposite problem. A favicon designed for only one background is the most common reason an icon looks broken in dark mode.
There are two broad approaches. The first is a single mark that works on both backgrounds, for example a mid-tone color, or a symbol placed on its own solid shape such as a rounded square or circle. The second is an adaptive SVG that switches colors based on the user's color scheme preference. The first is simpler and more predictable. The second gives finer control where browser support allows it.
Designing the mark itself
- Start from the master vector logo, not from a screenshot or exported PNG, so edges stay clean when you simplify.
- Reduce the mark to its most recognizable element: a monogram, symbol or initial. Full wordmarks rarely survive at the smallest tab sizes.
- Remove fine strokes, thin gaps, gradients and small details that blur together when scaled down.
- Design on a square canvas and check the icon at its smallest rendering sizes, not only enlarged in the design tool.
- Define a light-theme palette and a dark-theme palette, and check contrast on both backgrounds rather than simply inverting colors.
- If the mark depends on a background shape for legibility, treat that shape as part of the icon in both variants.
Vector artwork versus embedded raster images
A file ending in .svg is not guaranteed to contain editable vector paths. An SVG can wrap an embedded raster image, and that image will not recolor through CSS or scale cleanly. Likewise, a logo described as vector may only be available as a raster preview. Before building an adaptive favicon, open the source file in a vector editor and confirm that the shapes are real paths or shapes and not a placed bitmap. If the source is raster only, the mark has to be redrawn or properly vectorized before a reliable dark mode variant can be made.
Building an adaptive SVG favicon
An SVG favicon can include a style block with a prefers-color-scheme media query, so the icon changes fill colors when the user's system or browser is set to dark mode. The fragment below shows the idea. The root svg element and its standard namespace declaration are omitted, and the colors and path data are placeholders, not recommendations.
<style>
.mark { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) {
.mark { fill: #f2f2f2; }
}
</style>
<path class="mark" d="..." />Two caveats apply. First, browser support for SVG favicons, and for media queries inside them, varies and changes over time, so check current compatibility for the browsers your audience uses. Second, some browsers evaluate the color scheme only when the icon loads, so the favicon may not update immediately after a user switches themes.
Delivery: the file set
Because SVG favicon support is not universal, a typical modern setup pairs the adaptive SVG with raster fallbacks. Raster files cannot switch colors on their own, so give them a mark that works on both light and dark backgrounds, often a symbol on a solid background shape.
| File | Format | Role |
| favicon.svg | Vector (SVG) | Primary icon for browsers that support SVG favicons; can carry light and dark variants |
| favicon.ico | Raster (ICO) | Legacy fallback, commonly containing small sizes such as 16x16 and 32x32 |
| apple-touch-icon.png | Raster (PNG) | Home-screen icon on Apple devices, commonly 180x180 |
| Manifest icons | Raster (PNG) | Icons referenced by a web app manifest, commonly 192x192 and 512x512 |
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">Keep the master vector file, with separate named layers or artboards for the light and dark variants, alongside the exported set. Future changes then start from editable artwork rather than from rasterized exports.
Rights and permissions
Being able to download a logo file does not grant permission to modify it or use it as a favicon. Creating a dark mode variant is a modification. If the logo belongs to another organization, or the artwork came from a template or stock source, check the license terms for the artwork. Check any font used in a lettermark separately, because font licenses may restrict embedding or outlining. Trademark rights in the mark itself are a further, separate question. For your own brand, confirm that you hold the source files and the rights from whoever designed the logo.
Gaps in this assessment
No specific logo, design tool, brand guideline or test results were provided. This article therefore gives no measured contrast values, browser-by-browser support data or recommendations for particular software. Verify browser behavior and color contrast against your own artwork and target audience before publishing.