¿Alguna vez has anclado una aplicación web a la pantalla de inicio de tu Android y has visto cómo tu logo se encogía hasta convertirse en un pequeño 'sello' dentro de un círculo blanco? Eso es lo que llamamos la 'caja blanca de la vergüenza'. Ocurre porque Android usa iconos adaptativos que cambian de forma según el tema del dispositivo. Si no proporcionas un maskable icon favicon, el sistema fuerza tu icono dentro de un contenedor seguro, haciendo que parezca poco profesional.

En 2026, los usuarios esperan que las PWA se sientan como apps nativas. Fíjate en Spotify o Slack; sus iconos llenan toda la forma perfectamente. Ellos logran esto usando el propósito maskable en su manifiesto. Vamos a arreglar tu icono hoy mismo para que luzca igual de pulido.

Requisitos previos para una configuración pro

Antes de tocar código, necesitas una imagen fuente. Recomiendo un PNG de 512x512 píxeles. Aunque amamos los SVG para las pestañas del navegador (mira nuestra guía de favicon SVG), el manifiesto de Android sigue siendo más fiable con PNGs para la pantalla de inicio. Tu imagen debe tener un fondo de color sólido; la transparencia es tu enemiga aquí porque el sistema la rellenará con cualquier color.

Paso 1: La regla del 80% de zona segura

El error más común es poner elementos importantes en los bordes. Un icono maskable es básicamente una imagen con 'sangrado'. El sistema recortará los bordes para ajustarlo a un círculo o cuadrado. Para que tu logo no quede 'decapitado', mantén todo el contenido crítico dentro del 80% central de la imagen. Si tu logo cabe en un círculo imaginario en el centro, estás a salvo.

Paso 2: Genera tus recursos

No necesitas recortar cinco tamaños a mano. Puedes usar Mzu favicondl para asegurar que tu imagen base esté bien formateada, pero para el icono maskable, asegúrate de añadir un margen del 10% del color de fondo en Figma antes de exportar. Si dudas de tu icono actual, revisa nuestra guía de auditoría de favicons.

Paso 3: Actualiza tu manifest.json

Aquí es donde ocurre la magia. Debes decirle al navegador que este icono está diseñado para ser recortado. Sin el atributo 'purpose': 'maskable', el navegador le añadirá ese horrible borde blanco. Aquí tienes el código exacto:

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

El propósito 'any' se usa para el selector de tareas, mientras que 'maskable' es el que Android usará para la pantalla de inicio. Si usas frameworks modernos, nuestra guía de favicon para Next.js te ayudará con la integración.

Paso 4: Verificación con DevTools

No despliegues a ciegas. Abre tu sitio en Chrome, pulsa F12 y ve a la pestaña Application. Haz clic en Manifest y busca la casilla 'Show only the minimum safe area for maskable icons'. Si tu logo se ve completo dentro del círculo, lo has logrado.

Errores comunes a evitar

El error más frecuente es usar un fondo transparente. Cuando el sistema recorta un PNG transparente, suele rellenar el fondo con un gris o blanco genérico que arruina tu marca. Usa siempre un fondo sólido. Y no olvides enlazar tu manifiesto en el <head>: <link rel='manifest' href='/manifest.json'>.

Configurar un maskable icon favicon es uno de esos pequeños detalles que separan a los aficionados de los profesionales. Solo toma diez minutos pero asegura que tu marca se vea impecable en millones de dispositivos Android. Si ya terminaste con el móvil, usa Mzu favicondl para generar un set de iconos estándar para escritorio que combine con tu nueva imagen móvil.