Gerador de ícone maskable para PWA

Importe seu logotipo, escolha um fundo e gere um ícone maskable compatível com o padrão dos Progressive Web Apps: o logotipo continua bem visível mesmo quando o sistema recorta o ícone em círculo, quadrado arredondado ou qualquer outra forma.

Arraste e solte seu logotipo aqui ou clique para procurar (de preferência transparente, 15 MB no máximo).

Como funciona

Um ícone maskable precisa preencher todo o quadrado, inclusive as bordas (ao contrário de um ícone comum com margens transparentes), pois o sistema operacional aplica depois a sua própria forma de recorte (círculo, quadrado arredondado, gota...) por cima. O círculo tracejado exibido na pré-visualização representa a zona de segurança padrão (cerca de 80% do diâmetro): qualquer logotipo colocado dentro dela permanece visível, seja qual for a forma de recorte aplicada pelo dispositivo do usuário.

Preciso fornecer também um ícone comum (não maskable)?

Sim, é recomendável declarar os dois tipos de ícone no arquivo manifest do seu PWA (uma entrada com "purpose": "any" e outra com "purpose": "maskable"), pois alguns sistemas não aplicam recorte e exibem o ícone "any" como ele é.

Por que gerar 192x192 e 512x512 ao mesmo tempo?

O tamanho 192x192 é o mínimo recomendado para o ícone da tela inicial na maioria dos dispositivos Android, enquanto o 512x512 é usado na tela de abertura (splash screen) e em contextos que exigem maior resolução, como as lojas de aplicativos.

Processamento 100% local: a composição do ícone é feita inteiramente no seu navegador, e seu logotipo nunca é enviado a um servidor.