Bhinish Dhiman

Tamaños de favicon: qué archivos necesitas de verdad y cómo crearlos

Traducido del original en inglés. Leer el original

Necesitas un favicon.ico con imágenes de 16, 32 y 48 píxeles, archivos PNG de 180 píxeles para la pantalla de inicio de iOS y de 192 y 512 píxeles para Android a través de un manifiesto web, y cuatro líneas en el head. Genéralos a partir de un original de al menos 512 píxeles y luego revisa la versión de 16 píxeles: tiene 256 píxeles en total, así que un logotipo de texto o los trazos finos no van a sobrevivir.

Los generadores de favicon más antiguos te devuelven una veintena de archivos. La mayoría son imágenes de mosaico para Windows y tamaños viejos de Apple que ya nada lee. El conjunto que todavía importa es pequeño, y la pregunta difícil no es qué tamaños exportar, sino si tu logo sobrevive al más chico.

Dos definiciones

Un favicon es el ícono pequeño que el navegador muestra en una pestaña, en un marcador y en la pantalla de inicio. Es un caso raro entre los recursos de marca: se dibuja a 512 píxeles y se ve, casi siempre, a 16.

Un PNG-in-ICO es un archivo .ico cuyas imágenes se guardan como datos PNG en lugar de mapas de bits. Es válido desde Windows Vista y mantiene el archivo liviano.

Los archivos y qué lee cada uno

Este es el conjunto que produce la herramienta, con el nombre que tiene cada archivo en la descarga:

Archivo Tamaño en píxeles Qué lo usa
favicon.ico 16, 32 y 48, dentro de un solo archivo Se solicita por defecto en la raíz del sitio, y lo piden también varios rastreadores y lectores de feeds
icon-16.png 16 La pestaña del navegador, el tamaño que casi todo el mundo ve de verdad
icon-32.png 32 Una pestaña en una pantalla de alta densidad, y la barra de tareas de Windows
icon-48.png 48 Los accesos directos a sitios en Windows
apple-touch-icon.png 180 Un marcador en la pantalla de inicio de iOS
icon-192.png 192 La pantalla de inicio de Android, a través del manifiesto web
icon-512.png 512 La pantalla de carga y el aviso de instalación, a través del manifiesto web
site.webmanifest Ninguno Enumera los íconos de 192 y 512 con el nombre de tu sitio
head.html Ninguno Las cuatro líneas para el head de tu página

Vale la pena publicar el ICO aunque los navegadores modernos usen un PNG declarado en una etiqueta link. Un favicon.ico en la raíz se sigue solicitando por defecto, así que omitirlo genera un goteo constante de errores 404.

Deja los tamaños pequeños en PNG. En nuestras mediciones, convertir un ícono de 16 píxeles a WebP lo hizo más grande, no más chico: 332 bytes en PNG, 718 bytes en WebP, un aumento del 116.3%, porque el costo fijo del contenedor de WebP no tiene margen para compensarse en 256 píxeles. Los detalles están en cuánto ahorra pasar de PNG a WebP, medido.

El fragmento para el head

Estas son las cuatro líneas que escribe la herramienta, tal cual:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon-512.png" type="image/png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Cada ruta empieza con una barra, así que los archivos van en la raíz de tu sitio, junto a tu página de inicio. Los PNG de 16, 32 y 48 píxeles no aparecen: sus imágenes son las que contiene el ICO, y vienen en la descarga como archivos separados por si los necesitas.

El manifiesto que escribe la herramienta, con el nombre de sitio predeterminado, es este:

{
  "name": "My site",
  "short_name": "My site",
  "icons": [
    {
      "src": "/icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

Crea el conjunto con la herramienta

  1. Abre el Favicon generator y arrastra tu logo al recuadro, o haz clic en él para elegir un archivo. Acepta PNG, JPEG o SVG, de 512 píxeles o más, idealmente cuadrado. Un original que no es cuadrado se encaja dentro del cuadrado, no se recorta.
  2. Antes que nada, lee la comprobación. Da tres cifras: Detail kept at 16px (detalle conservado a 16px), On a light tab (en una pestaña clara) y On a dark tab (en una pestaña oscura). Debajo, el ícono de 16 píxeles se muestra a tamaño real sobre un color de pestaña claro y sobre uno oscuro.
  3. Lee cualquier advertencia en rojo debajo de las cifras. Si no hay ninguna, el panel indica que el ícono aguanta a 16 píxeles y se distingue sobre ambas barras de pestañas.
  4. Recorre la lista de tamaños. Cada fila muestra el ícono, su tamaño, para qué sirve y el peso del archivo.
  5. Escribe el nombre de tu sitio en Site name, for the manifest (nombre del sitio, para el manifiesto).
  6. Presiona Download everything as .zip para obtener los nueve archivos, y Copy the markup para copiar el fragmento del head.

La aritmética no perdona. Un ícono de 16 píxeles tiene 16 × 16 = 256 píxeles en total. Un original de 512 píxeles tiene 512 × 512 = 262 144. Cada píxel de la pestaña representa 262 144 ÷ 256 = 1 024 píxeles de tu diseño. Un logotipo de tres letras recibe unos 85 píxeles por letra una vez descontados los espacios entre letras, y eso no alcanza para dibujar una letra.

La cifra de detalle mide cuánto de eso sobrevive. La herramienta dibuja tu logo a 128 píxeles y a 16, cuenta cuántos niveles de brillo distintos aparecen en cada versión (sin contar los píxeles transparentes) e informa el conteo de 16 píxeles como porcentaje del de 128. Por debajo del 45%, avisa que el ícono se leerá como una forma de color y no como tu logo. No lo juzgues solo por la vista previa: a 16 píxeles tu ojo completa lo que sabe que está ahí.

Si la cifra se desploma, cambia el logo, no la exportación. Una sola letra, un fragmento recortado del logo o una silueta simplificada sobreviven donde el logo completo no. Ningún ajuste de exportación recupera detalle de 256 píxeles.

Hay una advertencia más a la que conviene estar atento. Si tu original mide menos de 512 píxeles, el archivo de 512 píxeles se amplía a partir de él y se verá borroso. Usa un original de al menos 512 píxeles, o un SVG.

La trampa de la pestaña oscura

Un logo que se lee perfecto en un navegador claro puede desaparecer en modo oscuro. La herramienta toma el color promedio de los píxeles visibles de tu logo, lo mide contra una barra de pestañas clara (#F2F2F2) y una oscura (#202124), y avisa si alguno de los dos contrastes baja de 1.6:1.

Un logo negro muestra el problema completo. El negro tiene una luminancia relativa de 0; la de la barra clara es 0.8879 y la de la oscura, 0.0152. Contra la barra clara, eso da (0.8879 + 0.05) ÷ (0 + 0.05) = 18.76:1, lo más nítido posible. Contra la barra oscura, da (0.0152 + 0.05) ÷ 0.05 = 1.30:1, por debajo de la línea de advertencia, y el ícono prácticamente se esfuma.

Ver las dos cifras lado a lado es lo que hace visible el problema antes de publicarlo. Darle al logo un cuadrado de fondo sólido propio es una forma de que deje de depender del color de la pestaña; cambia el original y vuelve a soltarlo para ver cómo se mueven las cifras.

Otras formas de hacerlo

Ni macOS ni Windows tienen un generador de favicon integrado. En una Mac, Herramientas → Ajustar tamaño de Preview cambia el tamaño de una imagen, así que puedes crear cada tamaño PNG a partir de una copia de tu original, uno por uno. Eso deja el ICO, el manifiesto y el código del head para otra herramienta, y no te da ninguna comprobación a 16 píxeles.

Cómo comprobar que no se subió nada

Cada tamaño se dibuja en un canvas dentro de tu navegador, y el zip se arma ahí mismo. El código que construye el zip se descarga la primera vez que presionas el botón de descarga, y en el panel Network de las herramientas para desarrolladores aparece como un script que entra; nada sale con tu imagen. También puedes cargar la página, desconectarte y soltar tu logo: la comprobación y las vistas previas aparecen igual.

Siguiente paso

Arrastra tu logo al Favicon generator y lee la cifra de detalle antes que la vista previa. Si tu original es un SVG recién salido de una herramienta de diseño, pásalo antes por el SVG optimiser.