The Transparent Favicon Guide
A solid background on a favicon looks dated and clashes with dark mode. Here's how to keep alpha end-to-end.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Start with a transparent source
Export your logo as PNG-32 with no background fill, or use SVG. Most blur comes from a baked-in white background, not the favicon tool.
.ico supports alpha
PNG-compressed entries inside .ico keep their alpha channel. Bitmap entries don't — use a tool that picks the right encoding per size.
Handling dark mode
Ship an SVG with a <style>@media (prefers-color-scheme: dark) { ... }</style> block, and let .ico handle the static fallback.
FAQ
How do I make a favicon with a transparent background?
Start from a PNG-32 or SVG with no baked-in background. Export to .ico using a tool that preserves the alpha channel.
Does .ico support transparency?
Yes when entries use PNG compression. Bitmap-encoded .ico entries do not preserve alpha.
How do transparent favicons work in dark mode?
Ship an SVG favicon with prefers-color-scheme styles, and keep a static .ico fallback for browsers that ignore SVG.