Guía del favicon transparente
Un fondo sólido en un favicon se ve anticuado y choca con el modo oscuro. Aquí te explicamos cómo conservar el alfa de principio a fin.
Comprueba favicons en cualquier sitio
Instala la extensión FetchFavicon para Chrome para extraer, previsualizar y validar favicons al instante.
Empieza con una fuente transparente
Exporta tu logotipo como PNG-32 sin relleno de fondo, o usa SVG. La mayor parte del desenfoque proviene de un fondo blanco integrado, no de la herramienta de favicon.
.ico admite alfa
Las entradas comprimidas en PNG dentro de .ico conservan su canal alfa. Las entradas bitmap no — usa una herramienta que seleccione la codificación correcta según el tamaño.
Gestión del modo oscuro
Publica un SVG con un bloque <style>@media (prefers-color-scheme: dark) { ... }</style>, y deja que .ico se encargue del respaldo estático.
Preguntas frecuentes
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.