How do I make a favicon that works in dark mode?
Ship two SVGs — one for light, one for dark — and wire them up with prefers-color-scheme media queries on your <link> tags. That's it. The trick is that writing those tags by hand is fiddly, and most favicon tools still act like it's 2014. Favset spits out both SVG variants, the matching HTML snippet, and a full cross-platform package in under 90 seconds. Everything happens in your browser. Nothing gets uploaded.
If you've ever shipped a logo that looked crisp on a white tab bar and then turned into a smudge the second a user flipped to dark mode, you know the pain. The fix isn't new — Apple and Mozilla wired up prefers-color-scheme for icons years ago — the tooling just hasn't caught up. Favicon.io, the tool most people hit first, ships zero SVG and zero dark mode. RealFaviconGenerator covers every platform you can name but not the theme split. FaviconGenerator.io handles dark mode but skips the per-platform preview and the text and emoji inputs. Favset's the one that does all three: dual SVG output, live preview across browser tab and iOS and Android and Windows mockups, and fully client-side processing.
This is the launch post. Here's what it does and why each piece is in there.
What is a dark mode favicon and why do I need one?
It's a second favicon variant the browser swaps in when the user's OS or browser is set to dark mode. Without it, the logo you drew for a light tab bar ends up on a dark one with the wrong contrast — sometimes invisible, mostly just ugly. Modern browsers respect media="(prefers-color-scheme: dark)" on <link rel="icon"> tags, so you can ship a dark variant next to the light one and let the browser pick.
You need one for the same reason you need a dark theme on your site. A real chunk of your users run their devices dark all the time, and a favicon is the smallest piece of brand surface you've got. When it clashes or disappears, that's a tiny daily friction the user doesn't bother to articulate but absolutely registers. Favset's whole reason for existing is solving this — both favicon-light.svg and favicon-dark.svg with the right media-query HTML, by default, no config to fight with.
How do I generate an SVG favicon?
Drop in an image, or pick a font and type a letter, or grab an emoji. Favset runs everything through Canvas and SVG generation in your browser and hands back a real SVG, not a rasterized PNG that someone renamed. SVG scales cleanly across DPI, so it holds up on retina screens and shrinks down to 16x16 without the soft-edge mush you get from upscaling a tiny PNG. Favicon.io, despite running the category, doesn't ship SVG output at all — which means anyone searching specifically for an SVG generator is already mid-exit.
Favset treats SVG as the primary output. ICO and PNG fall out of it as supporting formats for older browsers and the Apple Touch icon. The full ZIP:
favicon.ico— the legacy fallbackfavicon-16x16.png,favicon-32x32.png,favicon-96x96.pngapple-touch-icon.pngat 180x180icon-192.pngandicon-512.pngfor PWAsfavicon-light.svgandfavicon-dark.svgsite.webmanifest
Ten files. One ZIP. The HTML snippet that wires them up gets generated next to it with a copy button.
How do I create a favicon from text or an emoji?
Type a letter or short word, pick one of 20 Google Fonts, set a color. Done. The preview updates in under 200ms and the rendered text becomes the favicon — no logo needed.
For solo devs shipping a side project at midnight, this is usually the honest path. You don't have a logo. You're not opening Figma. You want a recognizable letter on a colored square that loads in a tab next to the project name and looks intentional. Favset hands you both routes — text with 20 curated fonts, emoji with system-native rendering — and lets you set background color and padding separately for light and dark mode. The dark variant defaults to inverting the background, so you get something sensible with zero clicks. Refine from there if you care.
What does a complete favicon package need in 2026?
Roughly: an ICO fallback for legacy browsers, two SVG variants for light and dark, an Apple Touch icon at 180x180, two PWA icons at 192 and 512, a few legacy PNG sizes, and a site.webmanifest to hold the PWA bits together. The HTML in your <head> references each one with the right type and media so the browser knows what to grab in which context.
The pattern is roughly:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon-light.svg" media="(prefers-color-scheme: light)">
<link rel="icon" type="image/svg+xml" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Favset writes that for you, syntax-highlights it in the panel next to your live preview, and gives you a copy button that pastes straight into your <head>. No manual stitching of media queries, no guessing what size Apple wants this year. The snippet updates live as you change colors, padding, or input, so the code you copy always matches the files in the ZIP.
Are my uploaded images sent to a server?
No. Favset does everything in your browser. The image you drop, the canvas that renders it, the ZIP that builds — all of it stays on your machine. There's no upload endpoint. No server-side storage. The notice on the download button reads "Files generated in your browser — nothing uploaded" because that's literally the architecture: a static site on Cloudflare with JSZip and icojs doing the work in WebAssembly and Canvas.
This matters more for some teams than others. If you're working on something pre-launch and would rather not have a screenshot of your unreleased logo sitting in a third-party tool's analytics, client-side processing is the practical answer. FaviconGenerator.io is the closest functional rival and also runs client-side — but skips the per-platform preview and the text and emoji inputs. Favset's bet is that all three of those — dark mode SVG, live per-platform preview, client-side processing — belong in the same tool.
Try Favset
Free, ad-supported, every favicon mode you actually need. Drop an image, type a letter, or pick an emoji and walk away with a complete cross-platform set in 90 seconds. Open Favset.