SVG a Favicon

SVG a Favicon: genera todos los tamaños y favicon.ico de una vez

Los sitios web suelen necesitar un conjunto completo de iconos: los navegadores utilizan 16 y 32, los accesos directos de Windows pueden utilizar un favicon.ico multirresolución, iOS utiliza 180 para la pantalla de inicio y los manifiestos PWA suelen utilizar 192 y 512. Exportar cada tamaño manualmente resulta tedioso y puede producir dimensiones inconsistentes. Esta herramienta genera todo el conjunto a partir de un único SVG, incluido .ico y el código de referencia. Todo se procesa localmente en el navegador y los archivos no se suben al servidor.

Dos métodos de entrada y validación inmediata

Puedes subir un archivo .svg o pegar directamente el código fuente SVG en el cuadro de texto, por ejemplo, código copiado desde una herramienta de diseño. La entrada se valida inmediatamente: se comprueba si el código SVG es válido, si contiene viewBox, cuáles son sus dimensiones y si es un cuadrado 1:1. Se recomienda utilizar un icono 1:1 para Favicon. Si no es cuadrado, se muestra un aviso, pero se puede continuar. El SVG se renderiza mediante carga como imagen y los scripts incluidos en el archivo no se ejecutan.

Selección de tamaños

Los tamaños se agrupan por uso. Los tamaños habituales son 16, 32, 48, 180, 192 y 512, todos seleccionados por defecto. También están disponibles 64, 128 y 256, y se puede introducir un tamaño personalizado. La página ofrece tres botones predefinidos: Iconos web recomendados, Todos y Limpiar. También se explica el uso de cada tamaño: 16 para pestañas del navegador, 32 y 48 para navegadores y accesos directos de Windows, 180 para la pantalla de inicio de iOS, 192 y 512 para manifiestos PWA, y 64 y 128 para iconos generales.

Fondo y margen interior

El fondo predeterminado es transparente, adecuado para iconos que ya son cuadrados o tienen espacio interior. Si la imagen de origen queda demasiado cerca de los bordes o debe utilizarse sobre un fondo oscuro, puedes elegir un color de relleno y especificar el color de fondo. El margen interior añade espacio alrededor del icono mediante un porcentaje, con valores rápidos como 0, 5%, 10%, 15% y 20%, para evitar que toque el borde del lienzo. Todos los tamaños utilizan la misma configuración de fondo y margen para mantener una apariencia uniforme.

Resultados generados y descargas

Después de generar los archivos, los resultados se agrupan por uso. En la parte superior hay una vista previa similar a una pestaña del navegador que muestra el icono a su tamaño real de 16 píxeles. El grupo Favicon muestra los tamaños inferiores a 180 y explica la composición de favicon.ico. El grupo Web y PWA muestra los tamaños de 180 o superiores. Cada tamaño incluye vista previa, tamaño de archivo y botón de descarga individual. Hay cuatro métodos de descarga: descargar un tamaño individual, descargar todos los PNG de forma secuencial, descargar favicon.ico con varias resoluciones estándar o descargar un ZIP con todos los PNG y favicon.ico.

Código de referencia HTML

La página genera automáticamente el código de referencia HTML y la sección de iconos del webmanifest según los tamaños seleccionados. Incluye la sintaxis de referencia para favicon.ico, cada tamaño PNG y apple-touch-icon. Solo tienes que copiar el código en el proyecto. Las rutas del código se organizan desde la raíz del sitio.

Preguntas frecuentes y gestión de errores

¿Por qué el ico generado no contiene 512? Los contenedores ICO tienen una compatibilidad limitada con entradas PNG superiores a 256, por lo que la herramienta escribe automáticamente en el ico solo los tamaños de hasta 256. El PNG de 512 se proporciona por separado y la página indica qué tamaños contiene realmente el ico.
¿Qué ocurre si las fuentes del SVG no se muestran? Al renderizar un SVG independiente, los navegadores no cargan archivos de fuentes externas del sistema. Convierte el texto a trazados dentro del SVG.
¿Qué ocurre si no selecciono ningún tamaño? La herramienta solicita seleccionar al menos un tamaño de salida.
¿Qué ocurre si el SVG no es válido o falla el renderizado? Normalmente se debe a código incompleto o etiquetas no válidas. Vuelve a exportar el SVG desde la herramienta de diseño e inténtalo de nuevo.

Casos de uso y privacidad

Es adecuada para configurar iconos de pestaña en sitios web y sistemas administrativos, iconos de pantalla de inicio para sitios móviles, iconos de manifiestos PWA y para convertir rápidamente Logos vectoriales en un conjunto completo de recursos de iconos. El renderizado SVG, la codificación PNG y el empaquetado ICO se realizan localmente en el navegador. La página no tiene interfaz de subida, los archivos no se suben al servidor ni se guardan.