Subes un icono precioso de 512×512 a tu sitio, pero la pestaña del navegador sigue mostrando una mancha borrosa. La solución no es un archivo más grande, sino un favicon ICO con varios tamaños: 16, 32 y 48 píxeles empaquetados en un único contenedor.
Ese único archivo .ico hace algo en lo que la mayoría de los desarrolladores nunca piensan: darle al navegador la cuadrícula de píxeles exacta que necesita en cada situación. Las pestañas quieren 16×16. Las pantallas Hi-DPI quieren 32×32. La barra de tareas de Windows y las jump lists quieren 48×48. Si sirves un solo tamaño, el sistema operativo lo escala — normalmente mal.
Qué significa realmente «múltiples tamaños» en un archivo ICO
Un archivo ICO es un contenedor, no una imagen. Piensa en él como un archivo zip que guarda varios frames PNG o BMP, cada uno con sus propias dimensiones. La especificación HTML define la relación del icono en rel='icon' como la forma estándar en que los navegadores descubren y solicitan estos recursos.
Cuando empaquetas tres tamaños — 16, 32 y 48 — en un solo archivo, le das al navegador tres opciones en una única petición HTTP. Elige la coincidencia más cercana a su contexto de renderizado. Sin escalado, sin aliasing, sin amasijo de píxeles.
Por qué estos tres tamaños concretos
Cada número corresponde a una superficie real de UI donde se muestra tu icono:
- 16×16 — la pestaña del navegador y la barra de marcadores en pantallas estándar-DPI. Es el tamaño que los usuarios miran el 90% del tiempo. Cada píxel importa aquí.
- 32×32 — pestañas Retina y Hi-DPI, los accesos directos de la página Nueva pestaña de Chrome y la mayoría de los menús de marcadores. En una pantalla 2×, el sistema operativo toma este frame para un renderizado nítido.
- 48×48 — sitios anclados en la barra de tareas de Windows, mosaicos del menú Inicio e iconos de acceso directo del escritorio. Google también toma de este rango para los favicons de los resultados de búsqueda.
Omitir 16 significa pestañas borrosas. Omitir 32 significa pestañas retina borrosas. Omitir 48 significa un acceso directo de escritorio pixelado. El trío cubre los tres contextos de renderizado más comunes sin desperdiciar bytes en frames que nadie va a solicitar.
Cómo eligen los navegadores qué tamaño renderizar
Los navegadores modernos siguen una jerarquía predecible cuando un ICO contiene varios tamaños:
- Comprueban los tags link buscando un atributo
sizesexplícito que coincida con la superficie de renderizado. - Escanean el contenedor ICO buscando el frame cuyas dimensiones coincidan exactamente con la superficie objetivo.
- Eligen el frame disponible más grande y lo reducen si no existe una coincidencia exacta.
- Recurren al escalado por vecino más cercano como último recurso.
Chrome y Firefox prefieren el frame disponible más grande en pantallas Hi-DPI y lo reducen. Safari suele elegir la coincidencia literal de píxeles. Por eso un archivo que contiene exactamente 16, 32 y 48 se verá más nítido en todos los navegadores que uno que contenga 16, 24 y 64: porque el navegador rara vez tiene que reescalar.
Diseñar para la restricción de 16 píxeles
Un icono de 16×16 te da 256 píxeles para comunicar tu marca. Es brutal. El truco es silueta primero, detalle nunca:
- Olvídate de los degradados: se convierten en ruido a esta escala.
- Usa trazos de 1 píxel alineados a la cuadrícula (evita el renderizado subpixel de 0.5px).
- Mantén los caracteres a una sola letra o marcas geométricas simples.
- Prueba entrecerrando los ojos: si la forma desaparece, simplifica aún más.
Los tamaños 32 y 48 son más permisivos, pero deben verse como el mismo icono con mayor fidelidad, no como un dibujo diferente. Empieza con el diseño de 16×16 y escala hacia arriba: si la versión 32 necesita detalles nuevos, probablemente tu diseño de 16 era demasiado escaso desde el principio.
Construir el contenedor: un patrón práctico
La mayoría de las herramientas modernas, incluido el constructor de ICO con múltiples tamaños en Mzu favicondl, te permiten subir un único PNG en alta resolución y exportar un contenedor con los tamaños que elijas. Una configuración HTML mínima se ve así:
<link rel='icon' href='/favicon.ico' sizes='16x16 32x32 48x48'>
<link rel='icon' type='image/svg+xml' href='/icon.svg'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>El atributo sizes es una pista, no un requisito: los navegadores analizan los frames reales dentro del ICO para elegir la mejor coincidencia. Incluirlo ayuda a los validadores y a las herramientas de accesibilidad a verificar tu intención.
Errores comunes que debes evitar
Algunos errores confunden incluso a desarrolladores con experiencia:
- Servir solo 32×32: se ve bien en retina, horrible en pestañas estándar.
- Usar un ICO con un solo tamaño: anula el propósito del formato contenedor.
- Omitir 48×48: rompe la fidelidad de los sitios anclados en Windows.
- Comprimir los frames con códecs con pérdida: los frames ICO deben permanecer como PNG o BMP sin pérdida.
Para profundizar en cómo mantener el tamaño del archivo ligero una vez construido, consulta nuestra guía de optimización del tamaño del favicon ICO.
Uniendo todo
El trío 16, 32, 48 no es arbitrario: se mapea directamente a las tres superficies de renderizado que más importan: pestañas estándar, pestañas Hi-DPI y barras de tareas del escritorio. Empaqueta esos tres tamaños en un solo ICO y cubrirás aproximadamente el 95% de las peticiones reales de favicon con un único fetch HTTP. Añade un fallback SVG para los navegadores modernos, un Apple Touch Icon para iOS, y el icono de tu sitio estará listo para lo que le depare el sistema operativo.