Ícone Maskable: Zonas de Segurança e o Campo purpose
Um ícone maskable é um ícone de PWA desenhado para preencher todo o seu quadrado, de modo que a plataforma possa recortá-lo no formato que usar (círculo, squircle, quadrado arredondado) sem cortar nada importante. Você mantém o logotipo dentro de uma zona de segurança de aproximadamente os 80 por cento internos, um círculo centralizado cujo diâmetro é 80 por cento da largura do ícone, e deixa o fundo sangrar até as quatro bordas. Você o declara no web app manifest com "purpose": "maskable".
O problema que ele resolve
Os launchers do Android aplicam uma máscara de formato a todo ícone de app para que a tela inicial fique consistente, e o formato varia por dispositivo e por launcher: círculo em um, squircle em outro, quadrado arredondado em um terceiro. Um ícone web comum entregue a esse sistema é encolhido em uma caixa branca arredondada ou, pior, recortado através do logotipo.
Um ícone maskable é criado para esse recorte. A arte se estende até cada borda, e o conteúdo relevante fica bem para dentro, de modo que qualquer uma dessas máscaras cai sobre o fundo em vez de sobre a marca. É a mesma ideia dos ícones adaptativos do Android, expressa como uma imagem mais uma declaração.
Como declarar um
"icons": [
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]Entregue ambos. O ícone de purpose padrão é usado onde a plataforma não recorta; o maskable é usado onde ela recorta.
Zona de segurança por tamanho de ícone
| Tamanho do ícone | Diâmetro da zona de segurança (80%) | Margem livre por borda |
|---|---|---|
| 192x192 | 154px | 19px |
| 384x384 | 307px | 38px |
| 512x512 | 410px | 51px |
Perguntas frequentes sobre ícone maskable
Posso simplesmente adicionar espaçamento ao meu ícone existente?
Essa é a maior parte do trabalho, mas o espaçamento precisa ser fundo preenchido em vez de transparência. Uma margem transparente não dá ao launcher nada para recortar, e você acaba com um logotipo pequeno em um bloco branco liso.
Como verifico se a zona de segurança está correta?
Sobreponha um círculo centralizado a 80 por cento da largura do ícone e confirme que nada com que você se importa cruza esse círculo, depois instale o PWA em um dispositivo Android e olhe o launcher. O DevTools do Chromium também pré-visualiza os ícones do manifest no painel Application.
O iOS usa ícones maskable?
Não. O iOS pega o ícone da Tela de Início da tag de link apple-touch-icon e aplica sua própria máscara fixa de cantos arredondados, então o purpose maskable não tem efeito ali.