Convertir SVG a ICO

La mayoría de conversiones a icono parten de algo que ya se renderizó una vez: una exportación en PNG, una captura, un JPG que alguien encontró por ahí. Cada uno de esos arrastra la resolución y los defectos de lo que lo produjo, y reducirlo al tamaño de un icono los acumula. Un SVG no arrastra nada: son instrucciones, así que el motor de render dibuja la marca de nuevo exactamente al tamaño que el icono necesita.

Eso significa que los bordes se suavizan una sola vez en vez de dos, las curvas se calculan en lugar de reescalarse, y no queda ningún halo suave de una exportación anterior. Si tienes el vector, úsalo: esta es una de las pocas conversiones donde el origen elegido se nota de verdad en el resultado.

Un ICO es un contenedor pensado para guardar la misma marca en varios tamaños, de forma que Windows pueda mostrar una versión nítida de 16 píxeles en la barra de tareas y una versión nítida de 256 en el escritorio sin reescalar ninguna. Eso es lo que hace el archivo que se escribe aquí: el selector de tamaños de icono decide el conjunto, el valor por defecto es 16, 32 y 48, y cada uno es un PNG independiente con su canal alfa intacto. Elige «todos los tamaños comunes» y se suman 64, 128 y 256; elige «solo 256 px» y obtienes esa única entrada grande.

Doscientos cincuenta y seis es el techo del propio formato, no una elección tomada aquí. Una entrada guarda su ancho en un solo byte, que llega hasta 255, así que la especificación reserva el valor cero para significar 256, y ese es el byte que se escribe para un icono a tamaño completo. En ningún sitio hay uno más grande. Las entradas se escriben de mayor a menor, porque un descodificador que ignore el directorio suele quedarse con la que encuentra primero, y la más grande es lo menos malo que se le puede dar.

Con el conjunto por defecto no reescala nada: lee el directorio, encuentra una entrada que ya mide 16 píxeles y dibuja esa. Esa es la diferencia para la que se inventó el contenedor, y se nota: una imagen de 256 píxeles reducida al vuelo por el filtro general de un navegador pierde toda la alineación que hacía nítida a la marca, mientras que una entrada de 16 se redujo una vez, en un paso con filtrado, antes de escribir el archivo. Elige «solo 256 px» y el navegador vuelve a hacer el reescalado él mismo.

Lo que ningún arreglo puede hacer es redibujar la marca. La entrada de 16 píxeles aquí es el render de 256 reducido, no el SVG vuelto a renderizar a 16 con sus trazos ajustados a la cuadrícula de píxeles, así que un trazo de un píxel se sigue suavizando y el hueco dentro de una letra se sigue rellenando. Para una forma sólida, una letra gruesa o una silueta fuerte eso no es problema. Para el detalle fino sí lo es, y por eso los sets de iconos serios siguen llevando un 16 dibujado a mano —GIMP e IcoFX permiten añadir uno al archivo que entrega esta página.

La restricción es brutal y conviene diseñar para ella en vez de pelearse con ella. Dieciséis por dieciséis son 256 píxeles en total, menos que los caracteres de esta frase. Cualquier cosa que necesite más de tres formas distintas para leerse no se va a leer.

Los recursos habituales: quitar el nombre y dejar solo el símbolo, engrosar los trazos para que caigan en píxeles enteros, subir el contraste tanto sobre fondo claro como oscuro, y eliminar cualquier detalle más fino que una décima del ancho. Como se parte de un vector, hacer esa variante simplificada es cuestión de ocultar unas pocas capas y exportar un segundo SVG.

La imagen dentro del icono es un PNG, así que el canal alfa recorre toda la cadena: resvg dibuja el diseño sobre nada, los píxeles conservan su transparencia y el PNG la guarda. Una marca con esquinas redondeadas conserva sus esquinas redondeadas en vez de ganar un cuadrado blanco.

Esto importa más de lo que solía. Los navegadores ahora pintan la barra de pestañas según el tema claro u oscuro del sistema, y un favicon con un fondo blanco de fábrica se delata sobre uno oscuro. Deja el fondo fuera del dibujo y que el alfa haga su trabajo.

Los navegadores modernos aceptan un favicon en SVG directamente, y es la mejor opción donde se admite: un solo archivo pequeño, nítido a cualquier tamaño y capaz de responder a un esquema de color oscuro con una media query dentro del propio dibujo. Lo habitual ahora es declarar un SVG en el marcado y dejar un ICO en la raíz para todo lo demás.

Eso no es motivo para saltarse el icono. La petición de /favicon.ico la hacen los navegadores exista o no en el HTML, y también una larga lista de lectores de feeds, generadores de vistas previas de enlaces y rastreadores que no procesan HTML en absoluto. Los dos archivos, unos pocos kilobytes entre ambos, y la pregunta no vuelve a plantearse.

Pon el archivo en la raíz como favicon.ico. Esa sola colocación satisface la petición automática y no exige nada de marcado, que es por lo que ha sobrevivido treinta años de cambios en la web a su alrededor.

Después declara el resto de forma explícita: un elemento link con rel="icon" y type="image/svg+xml" para el SVG, y un apple-touch-icon en PNG de 180 píxeles para iOS, que ignora los otros dos. Con tres archivos se cubre a cualquier cliente actual, y el icono es el único que no necesita declaración.

Los favicons se guardan en caché con una insistencia poco habitual, en un almacén separado del caché normal de la página, y una recarga forzada no suele vaciarlo. Esto produce unos minutos fiables de creer que la conversión falló cuando el archivo del servidor es perfectamente correcto.

Comprueba el archivo directamente abriendo su URL en una pestaña, que evita por completo el caché de iconos. Si ahí aparece la imagen correcta, el despliegue funcionó. Para forzar que la pestaña se actualice, abre el sitio en una ventana privada o añade un parámetro a la URL del elemento link durante un despliegue.

Nada en esta conversión recorta. El dibujo se renderiza con sus propias proporciones, y cada entrada del icono se hace después centrándolo en un lienzo cuadrado a la mayor escala que quepa, así que un viewBox ancho se rellena con transparencia arriba y abajo en vez de estirarse. El icono nunca se distorsiona, lo cual es lo correcto por defecto, pero una marca tres veces más ancha que alta acaba ocupando un tercio del cuadrado y se lee como un logo pequeño flotando en una pestaña grande.

Arréglalo en el SVG. Fija el viewBox a un cuadrado y coloca la marca dentro con el margen que veas bien, recordando que los iconos suelen mostrarse a sangre y sin ningún margen propio. Un símbolo que llena cerca del noventa por ciento del cuadrado se lee bien a cualquier tamaño, y a 16 píxeles la diferencia entre llenar el marco y llenar un tercio es la diferencia entre cuatro píxeles legibles de trazo y uno.

Suelta el conjunto entero. Cada dibujo se renderiza y se envuelve por separado y el resultado vuelve como un ZIP, que es la forma habitual de este encargo para quien gestiona varios sitios o varios productos de una misma identidad de marca: un símbolo por cada propiedad, todos necesitando el mismo tratamiento la misma tarde.

Cada archivo recibe el mismo tratamiento y el mismo conjunto de tamaños, así que el lote vuelve consistente. Lo que no es consistente es cuánto del cuadrado llena cada marca: un dibujo con un viewBox ancho queda centrado con espacio transparente a los lados, y al lado de un hermano bien cuadrado se verá una talla más pequeño. Cuadrar los viewBox conviene hacerlo una vez en el origen en vez de notarlo después en una docena de sitios.

resvg renderiza el dibujo y el icono se monta en esta pestaña del navegador, así que una marca todavía sin publicar no sale del equipo en ningún momento del proceso.

Al no depender de un servidor tampoco hace falta cuenta ni existe un límite diario que dependa de nosotros: se puede soltar una carpeta entera, hasta cien archivos por tanda y hasta cien megabytes cada uno, y todo vuelve empaquetado en un solo ZIP.