Tamaños de favicon para pantalla de inicio móvil: Guía 2026

Guardas tu web app favorita en la pantalla de inicio del iPhone esperando ver tu logo pulido. En lugar de eso, obtienes una captura diminuta de toda la página — pixelada e ilegible. El culpable no es tu diseño. Es que enviaste los tamaños de favicon incorrectos para los requisitos de pantalla de inicio móvil.

Las pantallas de inicio móviles tratan tu sitio como una app instalada. Eso significa que necesitan una imagen cuadrada y de alta resolución que escale desde miniaturas pequeñas hasta launchers grandes sin descomponerse.

Lo que significa realmente 'icono de pantalla de inicio móvil'

Un favicon (la pestaña del navegador) de 16x16 o 32x32 píxeles es una bestia completamente distinta de un icono de pantalla de inicio móvil. El icono de la pestaña vive en un rectángulo diminuto y compite con otras siete pestañas. Un icono de pantalla de inicio ocupa un espacio de 60–120 píxeles en una rejilla de apps, a menudo con esquinas redondeadas, sombras y máscaras del propio sistema operativo.

Cuando un usuario toca 'Añadir a pantalla de inicio' en Safari o 'Instalar app' en Chrome, el sistema operativo busca declaraciones HTML específicas. Si no encuentra los tamaños correctos, recurre a una captura de pantalla de tu página (iOS) o al favicon estándar (Android). Ninguna de las dos opciones se ve profesional.

Por qué los tamaños de favicon estándar fallan aquí

La mayoría de los desarrolladores aprenden que un archivo ICO de 32x32 es 'suficiente' para favicons. Ese archivo funciona bien para pestañas, marcadores y barras de direcciones. Pero en el momento en que iOS necesita un icono de pantalla de inicio, espera un Apple Touch Icon bastante más grande.

El archivo ICO de 32x32 técnicamente es cuadrado, pero carece de la densidad de píxeles que necesita un launcher de pantalla de inicio Retina. iOS lo escala hacia arriba y obtienes ese emborronamiento que los usuarios asocian con web apps 'inconclusas'.

Dos ecosistemas móviles, dos reglas de tamaño

Los requisitos de pantalla de inicio móvil se dividen en dos bandos, cada uno con su propia especificación.

iOS: el Apple Touch Icon

El comportamiento documentado por Apple consiste en buscar una etiqueta HTML <link rel='apple-touch-icon'> que apunte a un PNG cuadrado. El iOS moderno (iOS 8+) trata el tamaño 180x180 como el estándar de facto para las pantallas de inicio del iPhone. Cualquier cosa más pequeña hará que iOS lo rechace o lo escale hacia arriba, con la pérdida de calidad que cabe esperar.

Para el iPad, históricamente necesitabas varios tamaños. Hoy puedes enviar un único PNG de 180x180 y cubrirá la mayoría de los dispositivos actuales — la estrategia del apple touch icon 180x180 funciona porque iOS reduce imágenes más grandes de forma limpia.

Android: el Web App Manifest

Android se apoya en el Web App Manifest, definido por el W3C. Según la especificación del Web App Manifest, el miembro icons acepta un array de objetos de imagen con atributos explícitos sizes, type y purpose.

Los dos tamaños que Android espera de forma consistente son:

• 192x192 — para el launcher de la pantalla de inicio y la mayoría de los drawers de apps
• 512x512 — para la splash screen y el listado de Play Store si publicas tu PWA

Si además quieres un icono con 'purpose': 'maskable' que sobreviva a las formas adaptativas de Android (círculos, squircles, cuadrados redondeados), necesitas un PNG de 512x512 con un safe zone ya integrado.

La configuración mínima para pantalla de inicio móvil

• 180x180 PNG — Apple Touch Icon (cubre iPhone y iPad)
• 192x192 PNG — launcher de pantalla de inicio en Android
• 512x512 PNG — splash de Android, Play Store, variantes maskable
• SVG favicon — opcional, para pestañas y soporte de modo oscuro
• 32x32 ICO — fallback legacy para navegadores de escritorio antiguos

Implementación en HTML

Este es un stack mínimo y funcional. Colócalo dentro de tu <head>:

<link rel='apple-touch-icon' href='/icons/apple-touch-icon-180.png' sizes='180x180'>
<link rel='icon' type='image/svg+xml' href='/icons/favicon.svg'>
<link rel='icon' type='image/png' href='/icons/favicon-96.png' sizes='96x96'>
<link rel='manifest' href='/site.webmanifest'>

Tu site.webmanifest debe declarar ambos tamaños de Android:

{
  'icons': [
    { 'src': '/icons/icon-192.png', 'sizes': '192x192', 'type': 'image/png' },
    { 'src': '/icons/icon-512.png', 'sizes': '512x512', 'type': 'image/png' },
    { 'src': '/icons/icon-maskable.png', 'sizes': '512x512', 'type': 'image/png', 'purpose': 'maskable' }
  ]
}

La sintaxis rel='icon' sigue el HTML living standard, por eso usamos los atributos type y sizes en lugar de formatos legacy.

Buenas prácticas

1. Diseña primero a 512x512. Empezar por el tamaño más grande te da un downscaling limpio a 180, 192 y 96.
2. Usa PNG, no JPEG. Los iconos de pantalla de inicio necesitan transparencia para las máscaras del sistema operativo. Los JPEG imponen un fondo sólido.
3. Olvídate de la etiqueta precomposed. apple-touch-icon-precomposed está obsoleta — iOS dejó el renderizado con brillo hace años.
4. Valida el manifest. Un error tipográfico en sizes rompe silenciosamente las instalaciones en Android. Usa la pestaña Application de Chrome DevTools para verificarlo.
5. Aplica cache-busting de forma agresiva. Los sistemas operativos móviles cachean los iconos de pantalla de inicio durante semanas. Una URL versionada (p. ej. ?v=2) fuerza la actualización tras un rediseño.

Si necesitas inspeccionar lo que un sitio está sirviendo en este momento, la guía del favicon tester para todos los navegadores explica paso a paso cómo verificarlo en DevTools. Para generar el paquete en sí, Mzu favicondl puede exportar los cinco archivos con un solo clic.

Los tamaños de favicon para pantalla de inicio móvil no consisten en generar docenas de archivos. Se trata de enviar los tres o cuatro PNG correctos, declararlos bien en HTML y en el manifest, y comprobar que el sistema operativo realmente pueda encontrarlos.