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.
3 min read
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.