¿Alguna vez has notado cómo sitios como GitHub o Stripe se ven impecables cuando los guardas en la pantalla de inicio de Android, mientras que tu propio proyecto aparece como un icono diminuto dentro de un círculo blanco genérico? Esa diferencia visual suele deberse a un archivo favicon site.webmanifest ausente o mal configurado.

En 2026, simplemente soltar un favicon.ico en tu directorio raíz es como ir a una boda en chanclas. Funciona, pero se nota que no seguiste el protocolo. El manifiesto web es un archivo JSON que le dice al navegador cómo debe verse tu 'app' en el dispositivo del usuario. Ya hablamos sobre la Guía de Favicon para Web App Manifest, pero hoy nos enfocaremos específicamente en la implementación técnica de site.webmanifest.

Anatomía de un site.webmanifest perfecto

Antes de escribir código, necesitas tus recursos. No puedes usar un icono de 16x16 y esperar milagros. Los dispositivos modernos exigen imágenes nítidas de 192x192 y 512x512 píxeles.

Crea un archivo llamado site.webmanifest en tu carpeta raíz con esta estructura recomendada para 2026:

{
  'name': 'Mi Proyecto Increíble',
  'short_name': 'Proyecto',
  'icons': [
    {
      'src': '/android-chrome-192x192.png',
      'sizes': '192x192',
      'type': 'image/png'
    },
    {
      'src': '/android-chrome-512x512.png',
      'sizes': '512x512',
      'type': 'image/png'
    },
    {
      'src': '/maskable-icon-512x512.png',
      'sizes': '512x512',
      'type': 'image/png',
      'purpose': 'maskable'
    }
  ],
  'theme_color': '#ffffff',
  'background_color': '#ffffff',
  'display': 'standalone'
}

Paso 1: Define tus iconos correctamente

La clave está en el array icons. Fíjate en purpose: 'maskable'. Esto es obligatorio en 2026. Android usa diferentes formas para los iconos (círculos, cuadrados). Si no proporcionas un icono adaptable (maskable), el sistema pondrá tu logo dentro de un borde blanco feo. Un icono adaptable debe tener margen alrededor del logo para que pueda recortarse sin perder su esencia.

Paso 2: Enlaza el manifiesto en tu HTML

Añade esta línea dentro del <head> de tu HTML:

<link rel='manifest' href='/site.webmanifest'>

Te recomiendo ponerlo cerca del principio para que el navegador lo detecte cuanto antes. Para más detalles sobre la estructura del head, mira nuestras Mejores Prácticas de Favicon en 2026.

Errores comunes a evitar

Configurar el favicon site.webmanifest puede parecer un detalle menor, pero es lo que separa a los profesionales de los aficionados. Con herramientas como Mzu favicondl, puedes generar todos estos tamaños automáticamente y centrarte en lo que realmente importa: tu código.