¿Te ha pasado que instalas una PWA en tu móvil Android y el icono de tu marca aparece borroso o deformado en la pantalla de inicio? Te aviso ya: el problema no es tu teléfono, son tus web app manifest icons 192 512. Android no adivina nada ni hace magia por ti; lee estrictamente tu archivo manifest.json y coge el recurso que mejor encaje. Si te equivocas con las dimensiones o no respetas los márgenes de la imagen, el resultado va a ser un desastre visual.

Si pasas el audit de Lighthouse de Google, verás que te suspende directamente la PWA si no encuentra un icono PNG de 192x192 y otro de 512x512 en tu manifest. No son números que han puesto a lo loco. El icono de 192px es el estándar que se usa para el acceso directo en el home, mientras que el de 512px es el que utiliza Android para montar el splash screen de tu app. Necesitas ambos, y tienen que estar perfectamente configurados.

No te voy a aburrir con el ecosistema general de las PWA en este post; si necesitas un repaso completo, échale un ojo a nuestra Web App Manifest Favicon Guide. Aquí nos vamos a centrar de lleno en los iconos de 192 y 512 píxeles: por qué fallan, cómo generarlos sin morir en el intento y el JSON exacto que tienes que poner para que funcionen.

Prerrequisitos: Deja bien tu imagen de origen

Antes de redimensionar nada, necesitas un archivo de origen de alta calidad. Por favor, no cojas un favicon de 16x16 y intentes escalarlo. Necesitas un archivo SVG vectorial o un PNG que sea como mínimo de 1024x1024 píxeles.

Si solo tienes el logo rasterizado, verás que al escalarlo a 512px se queda hecho un puré. Por eso en 2026 trabajar desde SVG es el estándar profesional. Escala de forma infinita sin perder ni un ápice de nitidez. Si tu logo depende de un texto minúsculo, lo vas a pasar mal; lee nuestros Favicon Design Tips para entender por qué simplificar tu marca es crítico en formatos tan pequeños.

Paso a paso: Generando y configurando los iconos

Vamos a la implementación real. Puedes usar el editor de imágenes que quieras, pero vamos a usar herramientas CLI estándar y configuración JSON pura para que puedas automatizarlo en tu pipeline de build.

Paso 1: Exportar los PNG de 192 y 512

Abre tu SVG de origen en tu editor favorito (Figma, Sketch o Adobe XD). Exporta dos archivos PNG distintos. Llámalos exactamente icon-192.png y icon-512.png. Los nombres importan y mucho, porque hacen que tu manifest sea legible y fácil de debuguear.

Si usas herramientas de build como Vite o Webpack, puedes automatizar esto con un plugin. Pero para un site estático rápido, con que los dejes caer en tu directorio /public/icons/ ya funciona perfecto.

Paso 2: Escribir el JSON del Manifest

Ahora abre tu archivo manifest.json. Tienes que declarar ambos iconos de forma explícita en el array de icons. Aquí tienes la configuración exacta que puedes copiar y pegar:

{
  "name": "My Awesome App",
  "short_name": "Awesome",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

Fíjate en el campo purpose. Si lo pones a any, le dices al navegador que este icono se puede usar en cualquier contexto. Ya hablaremos de los iconos maskable en la sección de errores comunes, porque ahí es donde la mayoría de devs se atascan.

Paso 3: Enlazar el Manifest en tu HTML

Tu manifest no va a hacer nada si el navegador no sabe que existe. Añade esta única línea en el <head> de tu documento HTML:

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

Y ya está. Cuando hagas deploy, los dispositivos Android leerán este archivo y cogerán automáticamente los iconos correctos de 192px y 512px.

Errores comunes al configurar los iconos de 192 y 512

Dejar el JSON bien es solo la mitad del trabajo. La mayoría de devs suspende el audit de Lighthouse por errores de diseño o de configuración muy sutiles. Aquí van los tres problemas que más veo en las code reviews.

Error 1: Olvidarse de la trampa del 'purpose' Maskable

Android 8+ introdujo los adaptive icons. Si quieres que tu icono tenga un look nativo y rellene las formas circulares o de squircle en diferentes launchers, necesitas un icono maskable. Ojo, que no puedes simplemente poner purpose: "maskable" en los PNG de 192 y 512 que ya tienes.

Los iconos maskable requieren un fondo de color que ocupe todo el canvas (full-bleed) con tu logo colocado dentro de una zona segura (el 80% interior del canvas). Si tu logo toca los bordes, el launcher de Android lo recortará de forma horrible. Tienes que exportar versiones separadas diseñadas específicamente con padding, y declararlas así:

{
  "src": "/icons/maskable-192.png",
  "sizes": "192x192",
  "type": "image/png",
  "purpose": "maskable"
}

En realidad puedes tener múltiples entradas de 192x192 en tu manifest siempre y cuando su purpose sea distinto. Te recomiendo tener uno any y otro maskable tanto para el tamaño 192 como para el 512.

Error 2: Servir el MIME Type equivocado

Si tus iconos no cargan en el móvil pero en el escritorio van bien, revisa las cabeceras de tu servidor. Hay servidores web estrictos que por defecto sirven los PNG como application/octet-stream en lugar de image/png.

Android Chrome es especialito con los MIME types en el manifest. Si el campo type de tu JSON no coincide con la cabecera Content-Type del servidor, el SO va a rechazar el icono sin decir ni pío. Asegúrate de que tu configuración de Nginx o Apache mapea correctamente los archivos .png.

Error 3: Usar un icono de 512px con exceso de detalle

El hecho de tener un canvas de 512x512 no significa que debas meter todo el manifiesto de tu empresa ahí dentro. Cuando Android escala ese icono de 512px para una notificación o un acceso directo pequeño, todo ese detalle se convierte en manchas borrosas.

Fíjate cómo gestiona Cabify el icono de su PWA. Usan una marca simple y de alto contraste sobre un fondo sólido. Se ve nítido tanto a 512px en un splash screen como escalado a 48px en la barra de notificaciones. Mantenlo simple.

Verificando tu configuración

No hagas un deploy y rece para que funcione. Tienes que verificar que tus iconos del manifest están funcionando. Abre Chrome DevTools, ve a la pestaña de Application y haz clic en Manifest. Ahí deberías ver tus iconos de 192 y 512 renderizados claramente en la sección de 'Icons'.

Si aparecen ahí sin el icono de imagen rota, lo has hecho bien. Si quieres sacar rápidamente un icono de 192 o 512 de otro site para ver cómo han estructurado su padding, puedes usar Mzu favicondl para descargar los archivos manifest exactos y comparar su configuración con la tuya.

Configurar bien tus web app manifest icons 192 512 te lleva unos diez minutos si tienes el archivo de origen correcto. Salta el ensayo-error, exporta los tamaños exactos, declara los MIME types correctos y tu PWA se verá nativa en cualquier dispositivo Android.