Zona segura conforme o padrão W3C

Gerador de Ícones Maskable para PWA

Ajuste a zona segura antes que um launcher corte seu ícone PWA.

Posicione a arte sobre um fundo opaco até as bordas, confira o círculo seguro de 80% do diâmetro e exporte PNGs maskable de 192×192 e 512×512. Os formatos de recorte são apenas prévias; os arquivos baixados continuam quadrados.

Zona segura circular de 80%5 visualizações de corteProcessamento local no navegador192+512 PNG

Bancada de calibração maskable/sessão localAguardando arte

Enviar logo ou imagem do ícone

Use um logo ou símbolo centralizado. Imagens com transparência funcionam bem: a cor selecionada preenche todo o fundo opaco.

PNG · JPG · WEBP · SVG / MÁX. 20 MB / 512 PX RECOMENDADO

A geometria que importa

Zona segura de ícone maskable: um círculo com 80% de diâmetro

A especificação do Web App Manifest define a área visível garantida como um círculo centrado no ícone, com raio igual a 40% de sua dimensão menor. Os pixels dentro desse círculo devem permanecer visíveis sob qualquer máscara de agente de usuário; pixels fora dele podem ser cortados.

Dez por cento do espaço da borda descreve os limites externos do círculo, mas não torna automaticamente todos os cantos de um quadrado de 80% seguros. Use a sobreposição para julgar a imagem real.

min(largura, altura)

Raio do lado mais curto: 40%
Diâmetro do círculo garantido: 80%
Distância do círculo à borda: 10%

Como criar um ícone maskable para seu PWA

Três etapas focadas produzem um companheiro maskable dedicado para seus ícones PWA regulares.

01
Faça upload do logotipo ou ícone de sua fonte
Escolha arte PNG, JPG, WebP ou SVG. O navegador lê localmente; nenhuma imagem é enviada para o LogoFoundry.
02
Ajustar escala, preenchimento e zona segura
Ajuste a escala, o preenchimento e um fundo opaco e, em seguida, inspecione as visualizações de círculo, squircle, quadrado arredondado, quadrado e lágrima.
03
Exporte PNGs e atualize o manifest do aplicativo Web
Baixe os dois arquivos PNG e mescle a matriz de ícones gerada em seu arquivo manifest.webmanifest existente.

Ícones maskable versus conjuntos completos de ícones PWA e ícones adaptativos Android

Esses formatos resolvem problemas adjacentes, mas suas estruturas de pacotes e comportamento em tempo de execução são diferentes.

Escopo	Este gerador	Gerador PWA completo	Android nativo adaptativo
Saída primária	2 PNGs maskable opacos	Ícones, manifest, favicon, splash, service worker	Primeiro plano, plano de fundo, camadas monocromáticas opcionais
Configuração	Snippet de ícones de manifest	Conclua o manifest e instale os arquivos	Recursos XML do Android
Comportamento da recorte	O navegador ou sistema operacional aplica a máscara	Inclui quaisquer ícones maskable e regulares	O launcher do Android compõe camadas
Melhor para	Ajuste de zona segura de imagens existentes	Construindo um conjunto completo de ativos PWA instaláveis	Envio de um aplicativo Android nativo

Precisa de ícones regulares, favicons, um manifest completo, telas iniciais do iOS e também arquivos de instalação? Use o PWA Icon Generator completo.

Gerador PWA aberto

Um pacote deliberadamente pequeno

Baixe PNGs de ícones maskable de 192×192 e 512×512

O ZIP contém apenas os arquivos necessários para esta tarefa, com caminhos que correspondem exatamente ao JSON.

192×192 ícone maskable PNG

icons/maskable-icon-192x192.png

Um ícone menor comum de instalação do PWA, renderizado no fundo opaco selecionado.

512 × 512 ícone maskable PNG

icons/maskable-icon-512x512.png

O ícone maskable de alta resolução comumente usado por fluxos de instalação de PWA baseados em Chromium.

Snippet JSON do manifest do aplicativo da Web

manifest-snippet.json

Uma matriz de ícones com valores correspondentes de src, tamanhos, tipo e finalidade. Mescle-o em seu próprio manifest.

manifest-snippet.json

{
  "icons": [
    {
      "src": "/icons/maskable-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/maskable-icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Mantenha ícones regulares separados com a finalidade "qualquer". Este snippet em foco marca os arquivos gerados apenas como "maskable" para que seu preenchimento de segurança não seja reutilizado em todos os contextos de ícones.

Perguntas frequentes sobre ícones maskable

Orientação prática para zonas seguras, fundos opacos, configuração de manifest e teste de dispositivos.

O que é um ícone maskable?

Um ícone maskable é uma imagem de manifest de aplicativo da Web projetada para que um navegador ou sistema operacional possa recortá-la em um formato preferido pela plataforma. Ele usa o valor de propósito manifest maskable e mantém imagens essenciais dentro da zona segura central padronizada.

O que exatamente é a zona segura de ícones 80% maskable?

É um círculo centrado no ícone com diâmetro igual a 80% da menor dimensão do ícone, ou raio de 40%. Os pixels nesse círculo permanecerão visíveis. Não é um quadrado de 80%, então cantos quadrados com essa largura ainda podem ficar fora do círculo seguro.

O preenchimento de 10% garante que meu logotipo esteja seguro?

Não. Dez por cento é a distância de cada borda da tela até a borda externa do círculo com 80% de diâmetro. Uma imagem larga ou quadrada ainda pode cruzar o círculo próximo aos cantos. Inspecione a sobreposição circular tracejada e cada forma de visualização antes de exportar.

Um ícone maskable pode ter um fundo transparente?

A especificação permite que um agente do usuário componha pixels transparentes em uma cor sólida de sua escolha e recomenda evitar a transparência. Este gerador, portanto, coloca a fonte no fundo opaco e sem margens selecionado para obter resultados previsíveis.

Devo arredondar os cantos antes de exportar?

Não. Exporte uma imagem quadrada completa com fundo sem margens. O navegador ou sistema operacional aplica seu próprio círculo, squircle, quadrado arredondado ou outra máscara. As formas nesta ferramenta são prévias e nunca são inseridas no PNG.

Por que esta ferramenta gera arquivos 192×192 e 512×512?

Esses são um par menor e maior amplamente utilizado nas orientações de instalação do PWA baseado em Chromium. Eles são tamanhos práticos voltados para o navegador, e não dimensões exigidas pela especificação de ícones maskable do W3C.

Um ícone deve usar a finalidade "qualquer maskable"?

Um manifest pode tecnicamente conter tokens de múltiplas finalidades, mas os arquivos dedicados geralmente são mais claros. Um ícone maskable inclui espaçamento de segurança que pode fazer com que pareça desnecessariamente pequeno em contextos regulares, portanto, esta ferramenta gera efeitos mascarados e deixa quaisquer ícones comuns para o seu conjunto de PWA.

É o mesmo que um ícone adaptativo nativo do Android?

Não. Um ícone web maskable é uma imagem quadrada referenciada por um manifest de aplicativo web. Um ícone adaptativo nativo do Android é composto por camadas separadas de primeiro e segundo plano, pode adicionar uma camada monocromática e é configurado com recursos do Android.

Como posso testar o ícone exportado no Chrome?

Adicione os arquivos e o snippet ao seu PWA, abra o Chrome DevTools e use Aplicativo → Manifest → Ícones. O Chrome pode mostrar apenas a área segura mínima para que você possa inspecionar o resultado do manifest instalado, além das visualizações aqui.

Minha imagem é carregada em um servidor?

A leitura, a visualização, o redimensionamento, a codificação PNG e o empacotamento ZIP são executados localmente no seu navegador. A LogoFoundry não recebe nem armazena a arte que você escolher.