Categoria: Desenvolvimento
Gerador de Web App Manifest
Gere um manifest.webmanifest para aplicativos web instaláveis
Preencha o nome do seu app, URL inicial, modo de exibição, cores de tema e de fundo e a lista de ícones, e obtenha um arquivo JSON manifest.webmanifest pronto para uso que torna um site instalável como Progressive Web App. Feito localmente no seu navegador.
{
"name": "LocalTools",
"short_name": "LocalTools",
"start_url": "/",
"display": "standalone",
"theme_color": "#1f6f4a",
"background_color": "#faf8f3",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Um web app manifest é o arquivo JSON que informa ao navegador como o seu site deve se comportar quando instalado: seu nome e ícone na tela inicial, a cor da barra de status, se ele abre em uma janela independente ou em uma aba de navegador comum, e onde começa. Sem ele, "Adicionar à tela inicial" ou não é oferecido, ou recai para um simples favorito em vez de uma experiência parecida com um app.
Como usar
- Digite o nome do seu app, o nome curto e a URL inicial.
- Escolha um modo de exibição, cor de tema e cor de fundo.
- Liste seus ícones, um por linha, como um caminho e tamanho, por exemplo "/icon-192.png 192x192".
- Copie o JSON para um arquivo manifest.webmanifest e vincule-o a partir do <head> da sua página com <link rel="manifest" href="/manifest.webmanifest">.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Quais tamanhos de ícone eu preciso?
- No mínimo um PNG 192x192 e um 512x512 cobrem a maioria dos prompts de instalação e usos de ícone de app; adicione mais tamanhos se quiser ícones mais nítidos em plataformas específicas.
- Qual a diferença entre theme_color e background_color?
- theme_color tinge a interface do navegador (como a barra de endereço ou barra de status) ao redor do seu app; background_color é exibido brevemente como fundo da tela de splash enquanto o app carrega, antes que seu próprio conteúdo seja pintado.
- Ainda preciso disso se não estou criando um PWA?
- Um manifest também melhora como o ícone e o nome de um site aparecem quando um visitante o adiciona aos favoritos ou à tela inicial, mesmo sem suporte completo a offline/service worker.