SVG a ICO: logotipo vectorial a favicon

SVG es el formato de origen ideal para iconos. Debido a que es vectorial, un SVG puede renderizarse a cualquier resolución sin perder calidad — que es exactamente lo que necesitas cuando un solo archivo ICO debe contener versiones a 16, 32, 48 e incluso 256 píxeles. Sin embargo, la conversión de SVG a ICO no siempre es directa. Los archivos SVG pueden referenciar fuentes externas, usar hojas de estilo vinculadas, incrustar imágenes externas o carecer de un viewBox adecuado, todo lo cual puede causar que el icono renderizado se vea roto o borroso.

Any2ICO renderiza tu SVG directamente en el navegador usando la Canvas API, luego empaqueta las imágenes rasterizadas en un archivo ICO conforme a estándares. La conversión es rápida y privada — tus archivos nunca salen de tu dispositivo. Pero la calidad de la salida depende en gran medida de lo bien preparado que esté el SVG antes de la conversión.

Esta guía cubre todo lo que necesitas saber: cómo preparar un SVG para uso como favicon, cómo ejecutar la conversión, cómo mantener los tamaños pequeños nítidos y cómo solucionar fallos comunes. Si sigues estos pasos, obtendrás un favicon limpio y profesional de tu arte vectorial cada vez.

Antes de convertir: prepara tu SVG

Un SVG bien preparado se convierte limpiamente al primer intento. Uno mal preparado produce marcos en blanco, elementos faltantes o salida distorsionada. Dedica un minuto a verificar estos elementos antes de subir.

Establece un viewBox adecuado

El atributo viewBox le dice al renderizador qué porción del lienzo SVG mostrar. Si falta o es incorrecto, el icono puede aparecer descentrado, recortado o completamente en blanco. Abre tu SVG en un editor de texto y confirma que la etiqueta raíz <svg> incluye un viewBox como viewBox="0 0 100 100". Los valores deben coincidir con el cuadro delimitador real de tu arte. La mayoría de las herramientas de diseño (Figma, Illustrator, Inkscape) lo establecen automáticamente al exportar, pero vale la pena verificar.

Convierte el texto a contornos

Si tu SVG contiene elementos de texto vivo, el navegador necesita la fuente correspondiente para renderizarlos. Dado que Any2ICO se ejecuta en tu navegador, solo puede usar fuentes instaladas en tu dispositivo o incrustadas en el SVG. El enfoque más seguro es convertir todo el texto a contornos (trazados) en tu herramienta de diseño antes de exportar. En Illustrator, selecciona el texto y elige Texto > Crear contornos. En Figma, aplana la capa de texto. Esto elimina las dependencias de fuentes por completo.

Evita imágenes y hojas de estilo externas

Los archivos SVG pueden referenciar recursos externos con etiquetas <image href="/es/..."> o <link>. Cuando el SVG se carga en la Canvas API para la conversión, estas referencias externas son bloqueadas por las políticas de seguridad del navegador. El resultado son imágenes faltantes o elementos sin estilo. Incrusta cualquier imagen como URIs de datos Base64 y mueve todo el CSS a atributos style en línea o un bloque <style> dentro del propio SVG.

Convierte SVG a ICO con Any2ICO

Una vez que tu SVG esté preparado, la conversión en sí toma solo unos clics.

Paso 1 — Haz tu SVG compatible con favicon

Verifica la lista anterior: el viewBox está establecido, el texto está convertido a contornos y los activos externos están incrustados. Guarda el archivo SVG limpio.

Paso 2 — Sube el SVG

Abre el conversor Any2ICO y arrastra tu SVG al área de subida. También puedes pegar desde tu portapapeles, introducir una URL que apunte al SVG o importarlo desde Google Drive u OneDrive. Any2ICO acepta archivos SVG de hasta 10 MB.

Paso 3 — Selecciona tamaños y configuración

Elige los tamaños de icono que necesitas. Para un favicon web, 16, 32 y 48 son esenciales. Añade 64, 128 y 256 si el icono servirá también como icono de aplicación de Windows. Establece el escalado en Ajustar (Contain) (recomendado para logotipos) y el fondo en Transparente. Para detalles sobre qué tamaños sirven para qué propósito, consulta nuestra guía de tamaños de favicon.

Paso 4 — Descarga el ICO

Haz clic en Convertir. El ICO se genera instantáneamente en tu navegador. Descárgalo y colócalo en la raíz de tu sitio web como favicon.ico, o úsalo como icono de acceso directo de Windows. Si subiste múltiples SVGs, Any2ICO empaqueta los resultados en un archivo ZIP.

Mantener los iconos nítidos a tamaños pequeños

Un logotipo vectorial que se ve impresionante a 256x256 puede convertirse en una mancha ilegible a 16x16. El problema no es el proceso de conversión — es que los detalles finos, trazos delgados y texto pequeño simplemente no sobreviven a una reducción agresiva. Hay pasos prácticos que puedes tomar para asegurar que tu icono siga siendo legible en cada tamaño.

Simplifica el arte para tamaños pequeños. Los conjuntos de iconos profesionales a menudo incluyen variantes SVG separadas para diferentes rangos de tamaño: una versión detallada para 128+ píxeles y una versión simplificada para 16 y 32 píxeles. Si tu logotipo tiene líneas finas, texto pequeño o detalles intrincados, considera crear una versión reducida que elimine esos elementos. Convierte el SVG simplificado para los tamaños pequeños y la versión completa para los tamaños grandes, luego combínalos en un solo ICO.

Usa formas audaces y de alto contraste. A 16x16, tu icono se renderiza en solo 256 píxeles en total. Las formas necesitan ser lo suficientemente gruesas para sobrevivir. Los trazos finos de 1 píxel pueden suavizarse en borrosidad gris. Aumenta el ancho del trazo y mejora el contraste entre el icono y su fondo para asegurar que el favicon sea reconocible de un vistazo.

Previsualiza al tamaño real. Después de la conversión, abre el ICO y visualiza cada tamaño incrustado al 100% de zoom. No juzgues la versión de 16x16 mirándola escalada a 200 píxeles — eso siempre se verá con bloques. En su lugar, comprueba cómo aparece en una pestaña real del navegador. Si se lee bien ahí, el icono está listo.

Solución de problemas comunes de SVG

Si tu ICO convertido no se ve bien, la causa casi siempre está en la fuente SVG, no en el conversor. Aquí están los problemas más comunes y sus soluciones.

Icono en blanco o vacío

Esto generalmente significa que el SVG no tiene atributo viewBox, o que el viewBox no coincide con los límites del arte. Abre el SVG en un editor de texto y añade o corrige el viewBox. También verifica que el SVG tenga contenido visible real y no sea solo un envoltorio vacío.

Fuentes o texto faltantes

Si los elementos de texto aparecen como rectángulos en blanco o se renderizan en una fuente del sistema por defecto, el SVG referencia una fuente que no está disponible. La solución es convertir todo el texto a contornos en tu herramienta de diseño antes de exportar el SVG. Esto incorpora las formas del texto directamente en el archivo.

Imágenes faltantes

Las imágenes externas vinculadas (<image href="https://...">) son bloqueadas por la seguridad del navegador cuando el SVG se renderiza en un Canvas. Incrusta los datos de la imagen directamente en el SVG como un URI de datos Base64, o fusiona la imagen en el SVG usando tu herramienta de diseño.

Colores o estilos incorrectos

Si el SVG usa una hoja de estilo externa o variables CSS definidas fuera del SVG, esos estilos no estarán disponibles durante el renderizado en Canvas. Mueve todos los estilos en línea. Si el SVG usa currentColor, reemplázalo con un valor de color explícito.