Tocas el menú de tres puntos en Android Chrome, pulsas "Add to Home Screen" y aparece en tu launcher un placeholder genérico con la primera letra. El navegador ignoró el favicon que diseñaste con cuidado. Esta guía resuelve exactamente ese escenario dentro del flujo favicon for android add to home screen.

Android Chrome no lee tu etiqueta estándar <link rel='icon'> cuando alguien instala tu sitio. Lee tu web app manifest. Si el manifest falta, está mal formado o no incluye las entradas de icono correctas, el acceso directo en la pantalla de inicio de Android recurre a una captura de pantalla o a un glifo genérico.

Requisitos previos

Necesitas tres cosas antes de tocar una sola línea de código:

Paso a paso: configura tu favicon para Add to Home Screen en Android

1. Exporta dos tamaños de icono desde tu arte original

Android Chrome prefiere un icono 192×192 para el diálogo de instalación y un icono 512×512 para la splash screen que aparece brevemente tras añadir el acceso directo. Exporta ambos como PNG. La especificación manifest del W3C los define como los dos valores sizes obligatorios para iconos con purpose: 'any'. Consulta W3C Web App Manifest: icons member para el esquema formal.

2. Crea una variante maskable para launchers adaptativos

Los launchers de Android recortan los iconos cuadrados en círculos, squircles o cuadrados redondeados según el dispositivo. Un PNG 512×512 normal verá sus esquinas cortadas. Crea una versión maskable: el arte completo se sitúa dentro de una zona segura que cubre el 80% central del canvas, y el 20% restante actúa como padding transparente que el launcher puede recortar sin perder detalle.

Guárdalo como icon-maskable-512.png. Para profundizar en el cálculo de la zona segura, consulta nuestra guía de iconos maskable.

3. Escribe el manifest.json

Coloca esto en la raíz de tu sitio y ajusta las rutas:

{
  "name": "Your App Name",
  "short_name": "Short",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

El campo purpose marca la diferencia entre un favicon for android add to home screen que se ve nítido y uno que parece recortado sin criterio. La especificación del manifest define 'any' para iconos estándar y 'maskable' para iconos diseñados para sobrevivir al recorte del launcher.

4. Enlaza el manifest desde cada página

Android Chrome no descubrirá tu manifest a menos que haya una etiqueta <link> en el head de cada página desde la que el usuario pueda instalar. Añade esto:

<link rel='manifest' href='/manifest.json'>

Colócala junto a las declaraciones del favicon, no dentro del body. Los navegadores ignoran las etiquetas link que aparecen después de que se cierre el head.

5. Define el theme color para que la barra superior combine

Ya que estás en el head, añade un theme color a juego para que la barra superior de Chrome se tiña cuando se abra el sitio desde la pantalla de inicio:

<meta name='theme-color' content='#000000'>

6. Prueba el flujo real de instalación

Abre tu sitio en Android Chrome en un dispositivo físico. Abre el menú de tres puntos y toca "Add to Home screen". La vista previa del diálogo debe mostrar tu icono 192×192, no una letra ni una captura. Confirma y revisa el launcher: el icono debe llenar su forma sin recortar detalles importantes.

Si ves el icono equivocado, pasa a la siguiente sección.

Errores habituales específicos de Android

Cómo verificar tu trabajo

Usa un favicon checker online para confirmar que tu manifest se puede parsear y que los PNG se cargan por HTTPS. Mzu favicondl puede exportar los PNG de 192×192 y 512×512 desde un único archivo fuente y producir la variante maskable correspondiente, lo que te ahorra un paso manual en Figma. Después, recorre el flujo de instalación en al menos un dispositivo Pixel y un Samsung: las formas de sus launchers difieren notablemente, que es justo por qué importa la variante maskable.

Configurar un favicon for android add to home screen se reduce a un manifest.json bien declarado con una entrada 192×192, una entrada 512×512 maskable y una etiqueta <link rel='manifest'> en cada página. Si te saltas la variante maskable, tu icono se recortará. Si te saltas el manifest por completo, Android hará una captura de tu página. Haz bien esos tres archivos y el acceso directo en la pantalla de inicio del usuario parecerá siempre haber estado ahí.