Tamaños de favicon explicados

El favicon de 16×16 píxeles es el estándar web original. Se utiliza en las pestañas del navegador en pantallas estándar (96 ppp), en la barra de herramientas de marcadores en todos los navegadores de escritorio y en algunas listas del historial del navegador. Debido a que 16×16 es un lienzo extremadamente ajustado, el diseño de tu favicon debe reducirse a su forma más simple: una sola forma, letra o marca abstracta. Cualquier cosa más compleja resultará ilegible.

El tamaño de 32×32 píxeles duplica el de 16×16 y ofrece pestañas del navegador retina/HiDPI con una densidad 2x, íconos de marcadores con un DPI alto e íconos de sugerencias de la barra de direcciones en Chrome. Los navegadores modernos solicitan 32×32 con mucha más frecuencia que 16×16, ya que las pantallas de alta densidad se han convertido en la mayoría de los dispositivos. Si solo pudieras publicar un tamaño, 32×32 sería la opción más impactante.

El tamaño de 48 × 48 píxeles es el tamaño de visualización de los 'iconos medianos' del Explorador Windows y es el mínimo requerido por la Búsqueda de Google para la elegibilidad de favicon en los fragmentos de resultados de búsqueda. Los sitios cuyo favicon no cumple con el mínimo de 48 × 48 aparecen con un ícono de globo terráqueo genérico junto a su URL en los resultados de Google en lugar de su marca. Incluya siempre 48 × 48 en su paquete .ico.

El tamaño de 64×64 píxeles se utiliza en la vista de iconos grandes del Explorador Windows y en algunos entornos de escritorio Linux. Incluirlo en su archivo .ico de varios tamaños agrega una sobrecarga insignificante pero garantiza una representación limpia en administradores de archivos y entornos de shell. Muchas herramientas generadoras de favicon incluyen 64 de forma predeterminada como parte del paquete .ico estándar.

El tamaño de 128 × 128 píxeles sirve mosaicos de aplicaciones de la Tienda Windows y miniaturas de la barra de tareas de alta densidad. Es menos necesario para favicons web puros, pero es importante si su sitio está empaquetado como PWA o si los usuarios lo fijan como una aplicación Windows. Incluirlo dentro de .ico con compresión PNG mantiene el tamaño del archivo razonable.

El tamaño de 256 × 256 píxeles es el marco .ico estándar más grande. Se utiliza para los accesos directos del escritorio Windows, los resultados de búsqueda del menú Inicio Windows y algunos contextos de aplicaciones instaladas. Con esta resolución, debe utilizar la compresión PNG dentro del contenedor .ico en lugar de BMP: una imagen BMP 256 × 256 sin comprimir agrega 256 KB al archivo .ico innecesariamente.

El tamaño de 180×180 píxeles es exclusivo para iOS apple-touch-icon. Cuando un usuario de iPhone o iPad toca 'Agregar a la pantalla de inicio', Safari recupera la imagen declarada en `<link rel='apple-touch-icon' tamaños='180x180' href='/apple-touch-icon.png'>`. Este tamaño cubre todos los modelos de iPhone actuales (iPhone 6 Plus y posteriores usan 180×180 con una densidad 3x; los modelos más antiguos usan 120×120 y 152×152; un solo archivo de 180 los cubre todos con elegancia).

El tamaño de 192 × 192 píxeles es el ícono mínimo requerido en el manifiesto de una aplicación web (site.webmanifest) para el mensaje de instalación PWA de Android Chrome. Cuando los usuarios agregan un PWA a su pantalla de inicio Android, Chrome muestra el ícono de 192 × 192 en el iniciador y el ícono de la aplicación en el selector de aplicaciones recientes. Sin este tamaño en el manifiesto, el mensaje de instalación PWA muestra un icono genérico o no se activa en absoluto.

El tamaño de 512 × 512 píxeles es el segundo ícono de manifiesto requerido. Chrome lo usa para la pantalla de presentación PWA que se muestra mientras la aplicación se carga después de iniciar la pantalla de inicio, y para la vista previa del cuadro de diálogo de instalación en el sistema operativo Chrome de escritorio. También es el tamaño de fuente ideal para generar todas las variantes más pequeñas: comenzar desde 512 × 512 garantiza que cada salida reducida conserve bordes nítidos y colores precisos.

Los tamaños entre 512 × 512 y el muy grande 1024 × 1024 se utilizan principalmente para íconos de aplicaciones nativas en macOS y envíos de iOS App Store, no para favicons web. Sin embargo, si planea convertir su presencia web en una aplicación nativa utilizando un contenedor (Electron, Capacitor, Tauri), necesitará 1024 × 1024 para el proceso de revisión de la App Store. Guarde este archivo maestro junto con su paquete de favicon.

Los favicons SVG son independientes de la resolución y cubren todas las densidades con un solo archivo. Un navegador que admita favicons SVG (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) preferirá el SVG a cualquier tamaño de ráster porque se representa perfectamente a 1x, 2x, 3x o cualquier DPI personalizado. La desventaja es que no todos los contextos admiten SVG: los accesos directos de Windows, los lectores de RSS y las herramientas más antiguas aún necesitan el respaldo .ico.

Es importante comprender la relación entre los tamaños y el contenedor .ico. Un archivo .ico no es una sola imagen, es un archivo de varias imágenes. Cada cuadro dentro es una imagen rasterizada separada de un tamaño diferente. El navegador lee el directorio ICO, identifica qué marco coincide mejor con el tamaño que necesita y decodifica solo ese marco. Es por eso que un archivo .ico puede servir igualmente bien para pestañas de 16, 32, 48 y 64 px.

El conjunto mínimo recomendado para un sitio web de producción en 2026 es: favicon.ico con marcos de 16, 32, 48 y 64 px; apple-touch-icon.png a 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg para navegadores modernos; y un site.webmanifest que hace referencia a los PNG 192 y 512. El favicon generator produce este conjunto completo a partir de una carga de una única fuente con un solo clic.

Comprobar si todos los tamaños de favicon se muestran correctamente es sencillo con el favicon tester. Ingrese la URL de su sitio y el evaluador intentará recuperar su favicon.ico, verificará las etiquetas de enlace en su encabezado HTML y mostrará una vista previa de cada tamaño. Los tamaños faltantes se marcan con recomendaciones prácticas.