Guia do favicon transparente
Fundo sólido em um favicon parece ultrapassado e conflita com o modo escuro. Veja como preservar o alpha de ponta a ponta.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Comece com uma fonte transparente
Exporte seu logo como PNG-32 sem preenchimento de fundo, ou use SVG. A maior parte do desfoque vem de um fundo branco embutido, não da ferramenta de favicon.
O .ico suporta alpha
Entradas com compressão PNG dentro do .ico preservam o canal alfa. Entradas em bitmap não — use uma ferramenta que escolha a codificação correta por tamanho.
Lidando com o modo escuro
Publique um SVG com um bloco <style>@media (prefers-color-scheme: dark) { ... }</style> e deixe o .ico como fallback estático.
Perguntas frequentes
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.