O que é manifest.json?
Um guia simples sobre web application manifests e como eles dão vida aos progressive web apps.
Entendendo o manifest
Um web application manifest, definido na especificação W3C Web Application Manifest, é um arquivo de texto JSON que fornece informações sobre uma aplicação web.
O uso mais comum de um web application manifest é fornecer as informações que o navegador precisa para instalar um progressive web app (PWA) em um dispositivo, como o nome e o ícone do app.
Um web application manifest contém um único objeto JSON cujas chaves de nível superior são chamadas de members.
Por que o manifest.json importa
| Benefício | O que ele faz |
|---|---|
| Instalação de PWA | O manifest permite que os navegadores solicitem aos usuários a instalação do seu web app no dispositivo, fazendo-o parecer uma aplicação nativa. |
| Referências de ícones | O manifest informa aos navegadores quais arquivos de ícone usar em diferentes contextos: telas iniciais, splash screens e launchers de app. |
| Metadados do app | Ele fornece informações essenciais como o nome do seu app, as cores de tema, o modo de exibição e a URL de início, para uma experiência consistente. |
O desafio dos ícones
Criar um manifest.json completo exige gerar e referenciar ícones em múltiplos tamanhos. Cada tamanho cumpre um propósito específico entre diferentes plataformas e contextos.
Para que serve cada tamanho
| Tamanho | Propósito |
|---|---|
| 192x192 | Ícones padrão da tela inicial do Android |
| 512x512 | Splash screens de alta resolução e Android |
| 96x96 | Atalhos de desktop e Google TV |
| 32x32 | Abas do navegador e favoritos |
| 16x16 | Barra de endereços e suporte a navegadores legados |
Os mesmos tamanhos, em escala real
Como o Favicon Tools ajuda
Criar manualmente todos os tamanhos de ícone necessários e manter um arquivo manifest.json pode ser demorado e sujeito a erros. O Favicon Tools automatiza o processo.
Quando você usa o Favicon Tools para gerar seus favicons, escrevemos automaticamente um manifest.json completo que referencia todos os tamanhos de ícone de que você precisa:
O que o manifest gerado cobre
| Grupo de ícones | Tamanhos | O que cobre |
|---|---|---|
| Ícones do Android | 192x192, 512x512 | Atalhos da tela inicial e splash screens |
| Favicons padrão | 16x16, 32x32, 96x96 | Abas do navegador e favoritos |
| Apple touch icons | Todos os tamanhos necessários | Dispositivos iOS |
| Tiles do Windows | Tamanhos de tile | Integração com o Menu Iniciar da Microsoft |
Exemplo de manifest.json
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}Este manifest inclui todas as referências de ícone essenciais necessárias para a instalação do PWA e a exibição correta em diferentes plataformas. O Favicon Tools o gera automaticamente junto com todos os arquivos de ícone referenciados.
Geração com um clique
Envie sua imagem de origem uma vez e o Favicon Tools gera todos os tamanhos de ícone de que você precisa, mais um arquivo manifest.json completo, tudo em um único pacote para download.
Sem precisar redimensionar imagens manualmente, criar vários arquivos ou escrever JSON à mão. Tudo pronto para colocar no seu projeto.
Sempre atualizado
Quando você regenera seus favicons após um rebrand ou uma atualização de design, o manifest.json é atualizado com as referências de ícone corretas.
Isso evita que seu manifest saia de sincronia com seus arquivos de ícone reais, que é o que produz referências quebradas e ícones faltando.