Mejor tamaño de favicon en 2026

Las pestañas del navegador en pantallas de densidad estándar utilizan 16×16 píxeles. Este es el tamaño de favicon más pequeño y el que los usuarios ven con más frecuencia: se encuentra en la pequeña pestaña encima del contenido de la página en todo momento. Un ícono de 16×16 que conserve la legibilidad requiere formas llamativas, alto contraste y sin detalles finos. Las líneas finas, el texto pequeño y los logotipos complejos se convierten en manchas ilegibles con este tamaño.

El tamaño de 32×32 píxeles es la dimensión de favicon más importante para los navegadores modernos. Se utiliza para la pestaña del navegador en pantallas Retina/HiDPI (representadas con una densidad de 2x desde un tamaño lógico de 16 píxeles), para la barra de marcadores y para los íconos de sugerencia de la barra de direcciones. Chrome solicita 32×32 de forma más agresiva y la Búsqueda de Google utiliza al menos un icono de 32×32 para sus favicons de resultados de búsqueda.

El tamaño de 48 × 48 píxeles sirve para Windows Explorer en la vista de 'iconos medianos' y algunos motores de búsqueda lo utilizan para miniaturas de resultados. La recomendación oficial de Google para la elegibilidad de favicon de búsqueda es un mínimo de 48 × 48 píxeles, una relación de aspecto cuadrada y accesibilidad pública a través de HTTP. Siempre incluya 48 × 48 dentro de su archivo .ico de varios tamaños para cumplir con este requisito.

El tamaño de 64×64 píxeles es útil en Windows Explorer en la vista de iconos grandes y para algunos entornos de inicio de aplicaciones. Incluirlo en su archivo .ico agrega un tamaño de archivo mínimo y garantiza la cobertura de cualquier superficie que solicite tamaños entre 48 y 128 píxeles. La mayoría de los generadores .ico de varios tamaños incluyen 64 de forma predeterminada.

Los tamaños de 128×128 y 256×256 píxeles se utilizan dentro de archivos .ico para los mosaicos del menú Inicio Windows y los accesos directos de alta resolución. En 256 × 256, debe usar la compresión PNG dentro del archivo .ico en lugar de la codificación BMP: una entrada BMP de 256 × 256 sin comprimir por sí sola agrega aproximadamente 256 KB al archivo .ico, mientras que comprimido con PNG se reduce a menos de 30 KB.

El tamaño de 180 × 180 píxeles es la dimensión apple-touch-icon utilizada por iOS. Cuando un usuario toca 'Agregar a la pantalla de inicio' en Safari, iOS busca `<link rel='apple-touch-icon' tamaños='180x180' href='/apple-touch-icon.png'>` y usa esa imagen como ícono de la pantalla de inicio. Sin esto, iOS recurre a una captura de pantalla de baja calidad de su página. Este es el tamaño de mayor prioridad para los sitios móviles primero.

Se requiere el tamaño de 192 × 192 píxeles en el manifiesto de la aplicación web (site.webmanifest) para el mensaje de instalación PWA de Android Chrome. Cuando un usuario agrega su sitio a su pantalla de inicio Android, Chrome lee el manifiesto y usa el ícono de 192 × 192 para el iniciador de aplicaciones y el tono de notificación. El icono debe ser cuadrado, formato PNG y accesible en la URL declarada.

El tamaño de 512 × 512 píxeles es el otro ícono de manifiesto requerido, que se usa para la pantalla de presentación PWA que aparece mientras la aplicación se carga después de iniciar la pantalla de inicio, y para la vista previa de instalación del sistema operativo Chrome. También es el tamaño de imagen de origen recomendado al generar todos los demás tamaños: comenzar desde 512 × 512 garantiza que cada variante reducida conserve los bordes nítidos.

La configuración mínima viable de favicon que cubre prácticamente a todos los usuarios es: un favicon.ico de varios tamaños que contiene fotogramas de 16, 32, 48 y 64 píxeles, más un apple-touch-icon.png de 180×180, más un site.webmanifest con entradas PNG de 192×192 y 512×512. Esta combinación maneja navegadores estándar, marcadores, instalaciones de pantalla de inicio iOS e instalaciones Android PWA.

Agregar un favicon SVG junto con .ico y PNG prepara su ícono para el futuro. SVG procesa en cualquier densidad (un solo archivo sirve para monitores de 96 ppp, pantallas 4K y cualquier cosa intermedia) y puede cambiar de color según la preferencia de combinación de colores del usuario. Chrome, Edge, Firefox y Safari 15+ admiten favicons SVG a partir de 2026, lo que los convierte en una adición segura.

Los errores comunes en el tamaño de favicon incluyen: usar solo un PNG de 32 × 32 sin un .ico (roto en navegadores heredados y accesos directos Windows), omitir el 180 apple-touch-icon (roto en instalaciones iOS) y omitir 512 × 512 del manifiesto (el mensaje de instalación de Android muestra un ícono genérico). El favicon generator genera el conjunto completo automáticamente a partir de una imagen fuente, eliminando todos estos espacios.

El impacto SEO de los tamaños de favicon es indirecto pero real. La Búsqueda de Google muestra favicons junto a los resultados de búsqueda y aplica un requisito de tamaño mínimo de 48×48 píxeles. Los sitios sin un favicon de tamaño adecuado y accesible públicamente pueden ver un ícono de globo terráqueo genérico en los resultados de búsqueda en lugar de su marca, una pequeña pero notable diferencia de señal de confianza para los clics de búsqueda orgánica.

Para que los íconos estén completos con grado PWA, agregue íconos enmascarables a su manifiesto web. Un ícono enmascarable tiene un relleno de zona segura de aproximadamente el 10% en todos los lados, lo que garantiza que cuando Android aplica una máscara circular o de ardilla al ícono, el logotipo central nunca se recorta. Genere una versión enmascarable separada usando la opción de exportación enmascarable del generador y declarela con `'purpose': 'maskable'` en la matriz de iconos del manifiesto.

Al elegir una imagen de origen para la generación de favicon, priorice SVG sobre PNG y PNG sobre JPG. SVG produce la salida más nítida en todos los tamaños. PNG-32 (con alfa) conserva la transparencia. JPG carece de soporte de transparencia e introduce artefactos de compresión que aparecen en tamaños pequeños. Consulte la guía best favicon format para ver la comparación completa de formatos.