¿Qué es un icono maskable?

Los iconos adaptivos de Android recortan tu icono a una forma definida por el sistema (círculo, squircle, cuadrado redondeado). Un icono `purpose: maskable` incluye padding de safe zone alrededor del logo para que el recorte no corte los bordes. Genera variantes maskable en 192/512 con ~20% padding alrededor del logo.

¿Necesito manifest.json y meta tags Apple ambos?

Sí si quieres install-to-home-screen en iOS. Apple tiene soporte parcial de manifest (theme_color, iconos vía `apple-touch-icon`) pero ignora la mayoría. La meta `apple-mobile-web-app-capable` es lo que realmente hace que iOS trate tu sitio como app standalone.

Constructor de Manifest PWA

Desarrollo

Un manifest PWA le dice a navegadores y sistemas operativos cómo instalar y presentar tu web app: icono de lanzamiento, color de splash, full-screen vs chrome de navegador, orientaciones soportadas, scope de deep-link. Este constructor genera un `manifest.json` cumplidor de spec con los campos que realmente necesitas, incluyendo un set de iconos default sensato (192px y 512px, con variantes maskable para safe area de Android). La salida también incluye el `<link rel="manifest">` más meta tags Apple-específicas `apple-mobile-web-app-*`, porque Apple aún no implementó soporte completo de manifest y necesitas ambos para installability cross-platform. Todo es editable; el JSON se regenera al tipear.

—

NameShort name (pantalla inicio)

Descripción

Start URLScope

Modo displayOrientación

Theme color

Background color

LangDirecciónCategorías

Iconos

Path base de iconos

manifest.json

{
  "name": "My App",
  "short_name": "MyApp",
  "description": "A progressive web app",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "productivity",
    "utilities"
  ],
  "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"
    }
  ]
}

HTML head (link + meta Apple)

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#0ea5e9" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="MyApp" />
<link rel="apple-touch-icon" href="/icons/icon-180.png" />

Sirve manifest.json con `Content-Type: application/manifest+json`. La auditoría PWA de Lighthouse marcará campos faltantes.

Cómo usar

Pon name + short_name (short_name aparece en la pantalla de inicio — manténlo bajo 12 caracteres). Pon start_url donde la app debería abrir al lanzarla.
Elige un modo display: `standalone` (sin UI de navegador, recomendado) es el más común. `fullscreen` esconde la status bar; `minimal-ui` mantiene un shell de navegador delgado.
Añade iconos. Los defaults cubren Android (192/512), variantes maskable para iconos adaptivos. Copia el JSON a `manifest.json`, el HTML a tu `<head>`.

Preguntas frecuentes

¿Qué es un icono maskable?: Los iconos adaptivos de Android recortan tu icono a una forma definida por el sistema (círculo, squircle, cuadrado redondeado). Un icono `purpose: maskable` incluye padding de safe zone alrededor del logo para que el recorte no corte los bordes. Genera variantes maskable en 192/512 con ~20% padding alrededor del logo.
¿Necesito manifest.json y meta tags Apple ambos?: Sí si quieres install-to-home-screen en iOS. Apple tiene soporte parcial de manifest (theme_color, iconos vía `apple-touch-icon`) pero ignora la mayoría. La meta `apple-mobile-web-app-capable` es lo que realmente hace que iOS trate tu sitio como app standalone.