Se você tiver instalado um App Web Progressivo (PWA) em um smartphone Android recente, talvez o ícone do app tenha um plano de fundo branco. O Android 8.0 introduziu ícones adaptativos, que mostram ícones de apps em várias formas nos modelos de dispositivos. Ícones que não usam esse formato têm fundo branco.
![Ícones do PWA em círculos brancos no Android](https://web.dev/static/articles/maskable-icon/image/pwa-icons-white-circles-7fce0dc6ce82f.png?authuser=3&hl=pt-br)
Os ícones mascaráveis são um novo formato de ícone do Chrome e do Firefox que permitem que seu Progressive Web App use ícones adaptativos e oferecem mais controle sobre a aparência do ícone.
![Ícones do PWA cobrindo todo o círculo no Android](https://web.dev/static/articles/maskable-icon/image/pwa-icons-covering-entir-011491639007f.png?authuser=3&hl=pt-br)
Os ícones atuais estão prontos?
Como os ícones mascaráveis precisam oferecer suporte a várias formas, é necessário fornecer uma imagem opaca com padding que o navegador possa cortar no formato e tamanho necessários para qualquer navegador ou plataforma.
A especificação de ícones mascaráveis inclui uma "zona de segurança mínima" padronizada que todas as plataformas respeitam. As partes importantes do ícone, como o logotipo, precisam estar dentro de uma área circular no centro dele com um raio igual a 40% da largura. A borda externa de 10% pode ser cortada em algumas plataformas.
Você pode verificar quais partes dos ícones estão dentro da zona segura usando o Chrome DevTools. Com o Progressive Web App aberto, inicie o DevTools e navegue até o painel Application. Na seção Ícones, você pode optar por Mostrar apenas a área segura mínima para ícones mascaráveis. Isso corta os ícones para que apenas a área segura fique visível. Se seu logotipo estiver visível dentro dessa área segura, ele estará pronto.
![Painel "Applications" no DevTools exibindo ícones do PWA com bordas cortadas](https://web.dev/static/articles/maskable-icon/image/applications-panel-devto-a75aad0ea167e.png?authuser=3&hl=pt-br)
Para testar o ícone mascarável com várias formas do Android, use o Maskable.app do Tiger Oakes. Abra um ícone, e o Maskable.app permite testar várias formas e tamanhos e compartilhar a visualização com sua equipe.
Como faço para adotar ícones mascaráveis?
Para criar um ícone mascarável com base em um ícone atual, use o Editor Maskable.app. Faça upload do ícone, ajuste a cor e o tamanho e exporte a imagem.
![Captura de tela do Maskable.app Editor](https://web.dev/static/articles/maskable-icon/image/maskableapp-editor-scree-fdc82299dbabb.png?authuser=3&hl=pt-br)
Depois de criar um ícone mascarável e testá-lo no DevTools, é necessário atualizar
o manifesto do app da Web para que ele aponte para o novo recurso. O manifesto do app da Web fornece informações sobre o app em um arquivo JSON e inclui uma matriz icons
.
O campo purpose
informa ao navegador como o ícone precisa ser usado. Por padrão,
os ícones têm a finalidade "any"
. No Android, esses ícones são redimensionados em um segundo plano
branco.
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
Para tornar um ícone mascarável, defina o valor purpose
como "maskable"
para indicar
que ele precisa ser usado com máscaras de ícones. Isso remove o plano de fundo branco e
oferece mais controle sobre a aparência do ícone. Você também pode especificar várias
finalidades separadas por espaço (por exemplo, "any maskable"
) se quiser que o
ícone mascarável seja usado sem máscara em outros dispositivos.
Agradecimentos
Esta página foi revisada por Joe Medley.