Cómo funciona : Iconos y favicon
Suelte una imagen. Se lleva un archivo comprimido con el favicon.ico, los iconos de la pestaña, el de la pantalla de inicio de los iPhone, los de la aplicación instalable, y las líneas exactas que hay que pegar en su página.
Ponerle un icono a un sitio web debería ser cosa de dos minutos. En realidad hacen falta siete archivos de tamaños distintos, un formato antiguo que ya ningún programa sabe escribir, un icono especial para los iPhone, otro que Android recorta a su forma, y media docena de líneas que hay que pegar en el sitio correcto de la página. Por eso existen tantos generadores de favicon, y por eso todos empiezan pidiéndole su logotipo.
Este no se lo pide. Su imagen se lee, se vuelve a dibujar en cada tamaño, y el archivo comprimido se monta dentro de la pestaña. El archivo .ico se construye byte a byte, porque ningún navegador sabe escribirlo: está comprobado, no supuesto.
Si su fuente es un SVG, se VUELVE A DIBUJAR en cada tamaño en vez de agrandarse o reducirse. Es exactamente lo que hay que hacer con una imagen vectorial, y es la mejor fuente posible para un juego de iconos.
Cómo funciona
- Suelte su imagen. Lo ideal es un cuadrado de 512 píxeles de lado como mínimo; un SVG es todavía mejor, porque se volverá a dibujar nítido en cada tamaño.
- Elija cómo tratar una imagen que no sea cuadrada, y si los iconos que no manejan la transparencia deben recibir un fondo blanco.
- Pulse «Fabricar y descargar». Baja un solo archivo comprimido, con los nueve archivos y una chuleta que lleva las líneas para pegar.
Formatos aceptados
Estas cuatro familias se abren en todos los navegadores al día. El SVG tiene un estatus aparte y un tratamiento aparte: se vuelve a dibujar en cada tamaño en vez de escalarse.
Imagen PNG (.png)
La mejor elección después del SVG: conserva la transparencia, cosa que importa mucho en un icono de pestaña. Apunte a 512 píxeles de lado como mínimo.
Imagen vectorial SVG (.svg)
La fuente ideal: cada tamaño se VUELVE A DIBUJAR a partir del dibujo, no se agranda desde píxeles. El SVG debe llevar sus propias dimensiones o una zona de dibujo, y no debe apuntar a ninguna tipografía ni a ninguna imagen de fuera, porque el navegador las ignora.
Foto JPEG (.jpg, .jpeg)
Funciona, pero un JPEG no tiene transparencia: su icono llevará siempre un fondo rectangular. Para un logotipo, mejor un PNG o un SVG.
Imagen WebP (.webp)
Se abre en todas partes y conserva la transparencia. Los iconos producidos, en cambio, son siempre PNG: es el único formato que un navegador está obligado a escribir, y el único que todos los sistemas aceptan dentro de un .ico.
Sus límites
20 MB por archivo
La fuente de un icono no tiene por qué ser pesada: pasados los veinte megabytes ya no se trata de un logotipo sino de una fotografía, y el archivo producido sería el mismo. El límite evita hacer trabajar a un móvil para nada.
Unos 16,7 millones de píxeles por imagen
En iPhone y iPad, la superficie de un lienzo estuvo mucho tiempo limitada a 4096 por 4096 píxeles, y la reserva de memoria falla por encima. La herramienta comprueba la superficie ANTES de reservar y rechaza limpiamente.
Una fuente demasiado pequeña no se puede mejorar
Si su imagen mide menos de 512 píxeles de lado, los iconos grandes serán una ampliación, o sea que saldrán borrosos. Ninguna herramienta puede inventarse píxeles que no existen, y esta se lo dice en pantalla en vez de devolverle un icono blando sin comentarios.
El .ico se monta a mano, con PNG dentro
Ningún navegador sabe escribir un archivo .ico: lo hemos medido, y pedirle ese formato a un lienzo devuelve un PNG. Así que el contenedor se construye byte a byte alrededor de tres imágenes PNG. El PNG dentro de un .ico se acepta desde Windows Vista y desde Firefox 9; para los demás navegadores solo hemos encontrado pruebas de uso, no documentación del editor, y preferimos escribirlo.
El archivo comprimido no lleva ninguna fecha
Un archivo zip guarda normalmente la fecha y la hora de cada archivo. Sería el único dato sobre usted que el comprimido transportaría. Por eso escribimos dentro una fecha fija, la más antigua que el formato permite, y dos comprimidos hechos a partir de la misma imagen salen idénticos byte a byte.
Las imágenes animadas se rechazan
Un icono es fijo por naturaleza, y un lienzo solo contiene una vista. En vez de quedarse en silencio con la primera imagen de una animación, la herramienta se para y lo dice.
Preguntas sobre esta herramienta
¿Mi imagen se envía a alguna parte?
No, y no hace falta que nos crea. Abra el inspector de su navegador con la tecla F12, vaya a la pestaña «Red», vacíe la lista, y después suelte su imagen. No aparece ni una línea. También puede cortar su conexión: la herramienta sigue funcionando, y el comprimido también sale.
¿Qué imagen conviene dar para que salga bien?
Un SVG, si lo tiene: entonces cada icono se vuelve a dibujar nítido a su tamaño definitivo. Si no, un PNG cuadrado de 512 píxeles de lado como mínimo, con fondo transparente. Evite una imagen con muchos detalles finos: a dieciséis píxeles de lado, un dibujo fino se convierte en una mancha. Los buenos favicons son casi siempre una forma sencilla y un contraste rotundo.
¿Por qué nueve archivos, y no uno solo?
Porque los sistemas no piden lo mismo. Los navegadores quieren un icono pequeño para la pestaña y buscan un favicon.ico en la raíz del sitio sin que nadie se lo diga. iOS quiere un icono de 180 píxeles para la pantalla de inicio, y lo coloca sobre negro si es transparente. Android quiere un icono enmascarable, que recorta a la forma del momento. El manifiesto de una aplicación instalable pide otros dos. Ninguna de esas necesidades es un capricho, y la chuleta del comprimido le dice dónde poner cada uno.
¿Por qué el comprimido no lleva ninguna fecha?
Porque un archivo zip guarda normalmente la fecha y la hora de cada archivo, y ese sería el único dato sobre usted que el comprimido transportaría. Por eso escribimos dentro una fecha fija, la más antigua que el formato permite. Es un detalle, pero es un detalle coherente: una herramienta que no recibe nada no tiene por qué escribir algo sobre usted en el archivo que le devuelve. Y tiene un efecto secundario agradable: dos comprimidos hechos a partir de la misma imagen salen idénticos byte a byte.
¿Cómo fabrican el .ico si el navegador no sabe escribirlo?
A mano. Empezamos por comprobarlo en vez de suponerlo: pedirle el formato .ico a un lienzo devuelve un PNG, sin avisar. Así que el archivo se monta byte a byte, con una cabecera de directorio de iconos, un descriptor por tamaño, y tres imágenes PNG seguidas. Son unas treinta líneas de código, y evita embarcar una biblioteca por un formato de hace treinta años.
Mi imagen no es cuadrada. ¿Qué pasa?
La herramienta le avisa y le deja elegir. Colocar la imagen entera conserva todo su dibujo y añade márgenes alrededor: es casi siempre lo correcto para un logotipo, porque no se corta nada. Recortar por el centro llena todo el cuadrado pero mete tijera en los bordes, cosa que le va bien a una fotografía y casi nunca a un logotipo.
¿Los iconos conservan la transparencia?
Sí, salvo dos, y no es decisión nuestra. El icono de la pantalla de inicio de los iPhone lo coloca iOS sobre negro si es transparente, y el icono enmascarable lo recorta Android a la forma del sistema, lo que sobre transparencia da cualquier cosa. Así que esos dos reciben un fondo blanco, y usted puede quitarlo. Todos los demás siguen transparentes.
Suelte una imagen. Se lleva un archivo comprimido con el favicon.ico, los iconos de la pestaña, el de la pantalla de inicio de los iPhone, los de la aplicación instalable, y las líneas exactas que hay que pegar en su página.
ComprobarLa prueba, paso a pasoLa comprobación con el inspector de red, explicada gesto a gesto y con capturas de pantalla.
El rincónEl rincón de las imágenesUna foto cuenta más de lo que enseña. Aquí se ve, se limpia, se aligera, se recorta, y se difumina lo que no es asunto de nadie.