Crear favicon.ico desde SVG o PNG con varias resoluciones
Agrupa iconos multi-resolución para navegadores clásicos y accesos directos en Windows — sin pelear con recetas antiguas de ImageMagick.
Más utilidades que combinan bien con esta guía:
Por qué importa
Los navegadores siguen pidiendo /favicon.ico aunque el manifest declare teselas PNG/WebP modernas. Windows fija sitios usando recursos .ico con varios tamaños para que los accesos directos se vean nítidos en barras HiDPI. Los indie hackers que publican sitios estáticos necesitan un paso rápido entre export Figma y public/ — idealmente sin subir arte con IP sensible.
Tres escenarios reales
Genera ICO combinado con entradas 16–256 px desde un glifo SVG nítido.
Menos 404 en bots legacy
Proporciona ICO junto a PNG para portales compatibles con IE que IT aún exige.
Accesos directos coherentes en escritorio
Sustituye conjuntos PNG multip archivo por un ICO en hosting de docs (GitHub Pages).
Un solo artefacto en commit
Guía paso a paso
Abre SVG a ICO.
Prepara un maestro cuadrado
Los iconos leen mejor 1:1 — recorta relleno sobrante primero en recorte de imagen si hace falta.
Sube SVG (o raster compatible)
Los vectores escalan bien a densidades ICO — convierte trazos a contornos si desaparecen trazos finos.
Selecciona tamaños incrustados
Los bundles típicos incluyen 16, 32, 48 y 256 px — añade 24/64 si las guías de teselas Windows lo piden.
Previsualiza cada capa
Prueba glifos monocromo a 16 px — simplifica geometría si el detalle se embarrulla.
Descarga `favicon.ico`
Colócalo en la raíz del sitio y referencia con
<link rel="icon" href="/favicon.ico" sizes="any">para máxima compatibilidad.
Consejos útiles
- Empareja PNG/WebP con
<link rel="icon" type="image/png">para navegadores modernos manteniendo ICO como red de seguridad. - Genera tamaños PNG de respaldo vía SVG a PNG para arrays
iconsdel manifest. - Invalida caché tras rediseños (
favicon.ico?v=20260502) cuando los bordes CDN se obstinen.
Trampas comunes
Error frecuente
Arte demasiado detallado
Las entradas ICO bajo 32 px castigan degradados intrincados — prioriza siluetas marcadas.
Error frecuente
Rarezas de transparencia
Algunos contextos Windows aplastan ICO transparentes a negro — prueba accesos fijados en temas oscuros.
Error frecuente
MIME incorrecto en CDN
Asegura image/x-icon o image/vnd.microsoft.icon — respuestas mal etiquetadas confunden rastreadores.
Cuándo no es la herramienta adecuada
- Pipelines PWA completos: generadores tipo
@vite-pwau orquestadores maskable Android. - Favicons animados: el soporte ICO animado es legado — modernízalo con moderación y mide CPU.
.icnsde macOS: requiere flujos de exportación aparte del ICO.
Preguntas frecuentes
¿Sube mis activos de marca?
Sin ida al servidor: la generación ocurre en la sesión del navegador como otras utilidades de imagen MoreKits.
¿Tamaños máximos recomendados?
Empaquetar demasiadas capas aumenta el peso — prefiero conjuntos lean que cubran escritorio y menú Inicio.
¿Puedo partir de PNG en lugar de SVG?
Sí si ya existen maestros PNG — SVG sigue siendo ideal por escalabilidad infinita antes de rasterizar cada capa ICO.
Próximos pasos
- Comprime PNG de marketing tras exportar con el compresor de imágenes.
- Audita colores con el selector de color.
- Documenta el despliegue del favicon en tu checklist de hosting junto a
robots.txt.