Ícones de PWA: Torne Seu App Instalável
O prompt de instalação não é uma escolha de design, é um checklist. Esqueça o ícone de 192 ou o de 512 e o navegador se recusa silenciosamente a oferecer a instalação. Aqui está o conjunto exato.
O prompt de instalação depende dos ícones
Um navegador só oferece instalar um PWA quando o manifest atende a um conjunto de requisitos, e os ícones são um deles. Especificamente, o array de icons precisa incluir ao menos um PNG 192x192 e um 512x512. Esqueça qualquer um e o prompt nunca dispara, sem nenhum erro que o usuário perceba.
O 192 é o ícone do launcher. O 512 alimenta a tela de splash e telas de maior densidade. Ambos precisam ser PNGs reais nessas dimensões exatas, não uma imagem esticada por CSS.
Torne-o instalável
- 1
Exporte os dois PNGs obrigatórios
Crie icon-192.png em 192x192 e icon-512.png em 512x512. Estes são os dois que o prompt de instalação verifica.
- 2
Adicione uma versão maskable
Exporte um 512x512 com sua marca centralizada dentro da zona segura e com padding ao redor, depois marque como purpose: maskable para que o Android possa recortá-la em círculo, squircle ou quadrado arredondado.
- 3
Liste todos eles no manifest
Coloque cada ícone no array icons do manifest com seu src, sizes, type e purpose. Veja o código abaixo para o formato exato.
- 4
Vincule o manifest e o apple-touch-icon
Adicione <link rel="manifest" href="/manifest.json"> e um <link rel="apple-touch-icon"> separado no seu head. O iOS lê o segundo, não o manifest.
- 5
Verifique o prompt
Abra seu site no Chrome, confira se o controle de instalação aparece, e confirme que o manifest não tem erros no painel application do dev tools do navegador.
O array de icons do manifest
{
"name": "Your App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1a1a1a",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}O 192 e o 512 com purpose any satisfazem o requisito de instalação. A entrada maskable permite que o Android recorte o ícone sem cortar sua marca.
Por que o maskable é separado
Os launchers do Android recortam ícones para qualquer formato que o tema do dispositivo usar. Um ícone normal que preenche todo o quadrado tem seus cantos cortados. Um ícone maskable tem sua marca centralizada em uma zona segura com padding, para que o launcher possa recortar as bordas sem tocar na parte importante.
Você ainda mantém um ícone purpose any junto com o maskable. Superfícies que não recortam (a aba, o alternador de tarefas) usam a versão any para que ela não fique com padding extra.
Perguntas frequentes
Por que o prompt de instalação do meu PWA não aparece?
A causa mais comum ligada a ícones é a falta de um PNG 192x192 ou 512x512 no array icons do manifest. Ambos são obrigatórios. Verifique também se o manifest está vinculado e servido, e se o app está em HTTPS com um service worker.
De quais tamanhos de ícone um PWA precisa?
Um PNG 192x192 e um 512x512 no manifest são obrigatórios para o prompt de instalação. Adicione uma versão maskable de 512x512 para Android e um apple-touch-icon de 180x180 para iOS.
Preciso de um ícone maskable?
Para Android, sim. Sem um, o launcher recorta seu ícone full-bleed e corta os cantos. Um ícone maskable mantém sua marca dentro de uma zona segura para que ela sobreviva a qualquer formato.
O manifest define o ícone da tela inicial do iOS?
Não. O iOS ignora os icons do manifest no Adicionar à Tela de Início. Ele usa o link tag apple-touch-icon, então você precisa de um no seu head mesmo que o manifest esteja completo.