PWA Icon Generator (Grátis, Rápido e Privado)

Make your PWA look native on all platforms with correct icon sizes and maskable padding.

Privacidade em primeiro lugar

  • Os arquivos nunca saem do seu navegador
  • Sem upload para o servidor
  • Processado localmente no seu dispositivo

O que é um Ícone PWA e por que é necessário um 'Ícone Maskable'?

É o símbolo visual da sua web app quando esta é 'instalada' no ambiente de trabalho ou ecrã de início. Ao contrário das webs padrão, as PWAs definem-se através de um ficheiro manifest.json, onde se especifica o 'tamanho de ícone PWA' (tipicamente 192x192 e 512x512). No entanto, os 'Ícones Maskable' do Android mudaram o jogo. Estes têm uma 'zona segura' designada ao redor do logótipo, permitindo que o sistema o recorte em diferentes formas sem cortar a sua marca. O nosso gerador gere ambas as variantes instantaneamente, garantindo que a sua PWA está tão polida visualmente como qualquer aplicação nativa das lojas oficiais.

Por que escolher o Gerador de Ícones PWA do Pixes.app?

Conformidade com Google Chrome e W3C: Ajustamos cada nome de ícone e tamanho segundo os últimos padrões para uma pontuação completa do Lighthouse.. Elimine os erros de 'Ícone PWA em falta' nos seus testes automatizados.

Suporte de Manifest.json Incluído: Não lhe damos apenas imagens; geramos o código JSON para identificá-las.. Copie e cole e salte toda a documentação técnica.

Rápido e Simples: Sem taxas, sem registo e sem e-mails. Apenas resultados de alta qualidade em segundos.. Acelere o seu ciclo de desenvolvimento com a nossa ferramenta otimizada.

3 Passos para um Pack de Ícones PWA Profissional

Sem dores de cabeça por codificações ou ficheiros de manifesto. Aprenda a completar o seu projeto de ícones PWA a partir do navegador.

  1. Carregue o seu Ícone Mestre (512x512): Escolha a sua imagem de maior resolução, preferencialmente 512x512 em formato PNG. Clique em 'Selecionar imagem'.
  2. Geração de Ícones Maskable e Padrão: Uma vez carregado, a nossa ferramenta gera as versões 192x192 (Geral), 512x512 (Splash Screen) e 'maskable-icon-512x512' simultaneamente.
  3. Copie o Bloco de Manifesto e Descarregue: Geramos o array de 'icons' que necessitará de colar no seu ficheiro manifest.json. Clique em 'Copiar Código' e descarregue o set completo num ZIP.

Dicas Especialistas para Ícones PWA

Melhore a sua Pontuação Lighthouse: O Google Lighthouse espera ícones 192x192 e 512x512, além de pelo menos um 'maskable'. A nossa ferramenta oferece este set exato para garantir uma pontuação de 100/100.

Escolha de Fundo de Splash Screen: Escolha um ícone com fundo transparente PNG para que se integre perfeitamente com o seu ajuste de 'background_color' no manifesto.

Margem de Logótipo (Zona Segura): Garanta que o seu logótipo está centrado com pelo menos 10% de margem. O Pixes.app gere isto por si automaticamente.

Para quem é o nosso Gerador de Ícones PWA?

Desenvolvedores Frontend e Full-Stack: Ao converter projetos React, Vue ou Angular para PWA, não perca tempo com ícones. Obtenha o set pronto para o manifesto em segundos.

📱 Startups Mobile-First: Antes de lançar apps nativas, teste o seu branding com um set de ícones de PWA perfeitamente escalonado.

🛒 Empresas de E-Commerce e SaaS: Incentive os utilizadores a 'Adicionar ao ecrã de início' com um ícone que represente a qualidade da sua marca.

Projetos focados em Privacidade: Como todo o processamento é do lado do cliente, os seus ativos confidenciais nunca saem do seu computador.

Como usar esta ferramenta

  1. Escolha a sua imagem de maior resolução, preferencialmente 512x512 em formato PNG. Clique em 'Selecionar imagem'.
  2. Uma vez carregado, a nossa ferramenta gera as versões 192x192 (Geral), 512x512 (Splash Screen) e 'maskable-icon-512x512' simultaneamente.
  3. Geramos o array de 'icons' que necessitará de colar no seu ficheiro manifest.json. Clique em 'Copiar Código' e descarregue o set completo num ZIP.

Ferramentas relacionadas

Perguntas frequentes (FAQ)

Qual o formato de ficheiro melhor para PWA?
O formato PNG é o padrão obrigatório. Os PNG transparentes são os melhores para a compatibilidade.
O que é um ícone 'Maskable'?
Permite que o Android dê forma ao seu ícone em várias formas sem cortar o seu logótipo.
Quais os ícones que devo adicionar ao meu manifest.json?
Pelo menos o de 192x192 e 512x512. A nossa ferramenta dá-lhe o bloco de código completo.
Por que o meu ícone PWA não aparece após a instalação?
Costuma dever-se a um caminho incorreto no manifest.json. Garanta que os caminhos coincidem com a estrutura de pastas do seu projeto.