O que é um ícone maskable?

Ícones adaptativos do Android cortam seu ícone numa forma definida pelo sistema (círculo, squircle, quadrado arredondado). Um ícone `purpose: maskable` inclui padding de safe zone ao redor do logo para que o corte não corte as bordas. Gere variantes maskable em 192/512 com ~20% padding ao redor do logo.

Preciso de manifest.json e meta tags Apple ambos?

Sim se quer install-to-home-screen no iOS. Apple tem suporte parcial a manifest (theme_color, ícones via `apple-touch-icon`) mas ignora a maioria. A meta `apple-mobile-web-app-capable` é o que realmente faz iOS tratar seu site como app standalone.

Construtor de Manifest PWA

Desenvolvimento

Um manifest PWA diz a navegadores e sistemas operacionais como instalar e apresentar seu web app: ícone de lançamento, cor de splash, full-screen vs chrome de navegador, orientações suportadas, scope de deep-link. Este construtor gera um `manifest.json` que cumpre spec com os campos que você realmente precisa, incluindo um set de ícones default sensato (192px e 512px, com variantes maskable para safe area do Android). A saída também inclui o `<link rel="manifest">` mais meta tags Apple-específicas `apple-mobile-web-app-*`, porque a Apple ainda não implementou suporte completo a manifest e você precisa de ambos para installability cross-platform. Tudo é editável; o JSON se regenera ao digitar.

—

NameShort name (tela inicial)

Descrição

Start URLScope

Modo displayOrientação

Theme color

Background color

LangDireçãoCategorias

Ícones

Path base de ícones

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" />

Sirva manifest.json com `Content-Type: application/manifest+json`. Auditoria PWA do Lighthouse marcará campos faltantes.

Como usar

Defina name + short_name (short_name aparece na tela inicial — mantenha sob 12 caracteres). Defina start_url para onde o app deveria abrir ao lançar.
Escolha um modo display: `standalone` (sem UI de navegador, recomendado) é o mais comum. `fullscreen` esconde a status bar; `minimal-ui` mantém uma shell de navegador fina.
Adicione ícones. Os defaults cobrem Android (192/512), variantes maskable para ícones adaptativos. Copie o JSON para `manifest.json`, o HTML para seu `<head>`.

Perguntas frequentes

O que é um ícone maskable?: Ícones adaptativos do Android cortam seu ícone numa forma definida pelo sistema (círculo, squircle, quadrado arredondado). Um ícone `purpose: maskable` inclui padding de safe zone ao redor do logo para que o corte não corte as bordas. Gere variantes maskable em 192/512 com ~20% padding ao redor do logo.
Preciso de manifest.json e meta tags Apple ambos?: Sim se quer install-to-home-screen no iOS. Apple tem suporte parcial a manifest (theme_color, ícones via `apple-touch-icon`) mas ignora a maioria. A meta `apple-mobile-web-app-capable` é o que realmente faz iOS tratar seu site como app standalone.