UTILS.
100% no navegador
📱

Gerador de Web App Manifest (PWA)

Gere um web app manifest (manifest.json) válido para PWA com ícones, cores de tema e modo de exibição, mais a tag link rel=manifest pronta para colar.

— a saída aparece aqui —
— a saída aparece aqui —

Sobre esta ferramenta

O Gerador de Web App Manifest cria um manifest.json válido para um Progressive Web App a partir de um formulário simples, depois entrega as tags HTML complementares para colar no <head> da sua página. Tudo é montado no seu navegador e nada é enviado — você pode copiar o JSON, baixá-lo como manifest.json, ou copiar as tags link e meta.

Um web app manifest é o arquivo JSON que permite que um site seja instalado na tela inicial e iniciado como um app nativo. Esta ferramenta monta as chaves padrão — name, short_name, description, start_url, scope, display (standalone, fullscreen, minimal-ui ou browser), orientation, theme_color, background_color e um array icons — descartando qualquer campo que você deixar em branco para que a saída fique limpa. Cada tamanho de ícone que você marca vira uma entrada com seu src, sizes e type (derivado da extensão do arquivo), e o purpose opcional permite marcar ícones como maskable. O resultado é serializado com JSON.stringify com indentação de dois espaços, então é legível e compatível com os padrões.

Use o placeholder {size} no caminho do ícone (por exemplo /icons/icon-{size}.png) e ele é substituído por cada dimensão, como 192x192 e 512x512. No mínimo, um manifest deve incluir um name, um start_url, um modo display e ao menos um ícone de 192px e um de 512px, que são os padrões aqui. Referencie-o na sua página com a tag <link rel="manifest"> gerada e adicione a meta theme-color para a UI do navegador.

Perguntas frequentes

O que é um web app manifest?
É um arquivo JSON que descreve seu Progressive Web App — seu nome, ícones, cores e como ele deve iniciar — para que os navegadores possam oferecer instalá-lo na tela inicial e abri-lo em uma janela de aparência de app.
Quais campos são obrigatórios?
Um manifest útil precisa ao menos de name (ou short_name), um start_url, um modo display e ícones de 192x192 e 512x512. Este gerador preenche esses por padrão; outros campos são opcionais e omitidos quando deixados em branco.
O que 'maskable' significa para ícones?
Ícones maskable têm um preenchimento seguro para que as plataformas possam recortá-los em círculos, squircles ou quadrados arredondados sem cortar seu logo. Defina o purpose como 'maskable' ou 'any maskable' para ícones projetados com essa zona segura.
Como instalo o manifest no meu site?
Salve o JSON como manifest.json, faça o upload para o seu site, depois adicione as tags <link rel="manifest" href="/manifest.json"> e meta theme-color geradas ao <head> de cada página.

Mais ferramentas