Ícones PWA: evitar cortes e pequenos quadrados brancos
Aplicações web instaladas usam ícones do manifesto. O lançador pode aplicar uma máscara de forma.
Preparar os recursos
Comece com PNG 192×192 e 512×512, verificando cada plataforma. Caminhos relativos dependem do URL do manifesto. O máximo de 256px do IcoJet não substitui um PNG 512px.
Desenhar a versão maskable
Mantenha o essencial no círculo central com raio de 40% da largura. Prolongue o fundo até às bordas. Use purpose="maskable" apenas num desenho preparado e validado para isso.
Testar a instalação
Inspecione manifesto e máscara no navegador, depois instale no dispositivo previsto. Verifique versões normais e adaptáveis. Compare uma instalação antiga com uma nova antes de alterar o desenho.
{
"icons": [
{
"src": "/icons/app-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/app-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/app-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}Fontes e leitura adicional
MDN — Manifest icons ↗web.dev — Web app manifest ↗