Gerador de ícones para PWA
Prepare os arquivos do seu aplicativo web
Ícones, favicon, telas de abertura do iOS e manifest em um só pacote. Sua imagem é processada no navegador.
Arraste seu logo para cá
PNG · SVG · WebP · JPG · Recomendado: 512 × 512 px ou mais
Os ícones e a configuração do seu PWA
Prepare o conjunto no navegador, com controle sobre plataformas, cores e arquivos.
Sem upload da imagem
Ícones e telas de abertura são gerados localmente. Seu logo não é enviado ao servidor.
Arquivos para iPhone e iPad
Gere Apple Touch Icons e telas de abertura em retrato e paisagem para as resoluções incluídas na ferramenta.
Prévia em seis máscaras
Confira se o símbolo continua legível em círculos, quadrados arredondados e outros recortes.
Versões para fundos escuros
Prepare um fundo escuro e escolha entre manter, inverter ou substituir o logo. Confira os arquivos e o suporte do navegador antes de publicar.
HTML para copiar
Baixe as referências ao manifest, aos ícones e às telas de abertura, com os caminhos usados no pacote.
Manifest configurável
Defina nome, cores, idioma, identificador, capturas de tela e atalhos. Revise o resultado antes de instalar no projeto.
O que este gerador oferece
Compare os recursos com fluxos que dependem de upload e plataformas de criação de PWA.
| Recurso | Este gerador | Geradores com upload | Plataformas PWA |
|---|---|---|---|
| No navegador, sem upload | |||
| Telas de abertura do iOS | |||
| Prévia maskable em seis formas | |||
| Versões para modo escuro | |||
| Pacote de favicon: ICO, SVG e Safari | |||
| Manifest com identificador, capturas e atalhos | |||
| Código HTML para copiar | |||
| Interface em português do Brasil | |||
| Grátis e sem cadastro |
✓ Disponível · ~ Parcial ou pago · ✗ Indisponível
A comparação resume categorias de ferramentas. Recursos específicos variam conforme o produto.
Quer entender os requisitos? Guia de ícones PWA e áreas seguras(inglês)
Como gerar os ícones do seu PWA
Configure, confira as prévias e baixe os arquivos para integrar ao projeto.
1. Escolha seu logo
Abra um PNG, SVG, WebP ou JPG. Recomendamos uma imagem quadrada de pelo menos 512 × 512 px. Ela é processada no navegador.
2. Configure nome, cores e plataformas
Preencha o nome do aplicativo, escolha as cores e ative os arquivos de Android, iOS e navegador que você precisa.
3. Confira as prévias
Veja os recortes maskable e as telas de abertura. Mantenha o desenho principal dentro da área segura.
4. Baixe e instale
Baixe o ZIP com os arquivos selecionados, manifest, modelo de service worker e código HTML. Revise os caminhos antes de publicar.
Tamanhos e formatos de ícones PWA
Cada plataforma usa os arquivos de uma forma.
Um PWA pode ser usado no Android, no iOS e no computador. A tabela explica os principais arquivos deste gerador e onde eles entram no projeto.
| Arquivo | Tamanho | Uso |
|---|---|---|
| Ícone PWA (any) | 72–512 px (8 tamanhos) | Ícones declarados no manifest. Inclui 192 × 192 e 512 × 512 px para os fluxos de instalação. |
| Ícone maskable | 192 e 512 px | Permite recortes adaptativos. O desenho principal deve ficar dentro do círculo de área segura. |
| Apple Touch Icon | 180×180 px | Ícone do atalho adicionado à tela inicial do iPhone ou iPad. |
| Favicon | ICO de 16 / 32 / 48 px + SVG | Identifica o site em abas e favoritos. A versão SVG depende da imagem de origem. |
| Tela de abertura iOS | Várias resoluções e orientações | Imagem referenciada por apple-touch-startup-image para a abertura de aplicativos web instalados. |
O que vem no pacote PWA
O ZIP reflete as plataformas e opções que você ativou.
icons/
Oito tamanhos PNG e, quando Android está ativo, versões maskable de 192 e 512 px. O tamanho em bytes depende da imagem.
favicon/
Arquivo ICO com várias resoluções e imagens PNG. Com uma origem SVG, também inclui o favicon vetorial.
splash/
Telas de abertura para as resoluções e orientações previstas, quando iOS e essa opção estão ativos.
manifest.json
Nome, ícones, cores e as opções configuradas, como idioma, identificador, capturas e atalhos.
service-worker.js
Modelo de service worker. Revise as regras e os caminhos de cache para o seu aplicativo antes de publicar.
install-snippet.html
Tags para o head: manifest, cores, ícones e referências às telas de abertura escolhidas.
Dúvidas sobre ícones para PWA
Entenda os arquivos e o que ainda precisa ser configurado no seu projeto.
Quais tamanhos de ícone devo preparar para um PWA?
Inclua ícones de 192 × 192 e 512 × 512 px no manifest. Esta ferramenta também gera outros tamanhos comuns e, quando Android está ativado, versões maskable. Confira as opções e os arquivos antes de instalar.
O que é um ícone maskable?
É um ícone preparado para receber diferentes recortes sem perder o desenho principal. Mantenha a parte importante do logo dentro do círculo de área segura e use um fundo que preencha toda a imagem. Confira as seis prévias para identificar cortes.
Para que serve o manifest.json?
Ele descreve seu aplicativo web: nome, ícones, cores, URL inicial e modo de exibição. O navegador usa essas informações em recursos como a instalação. O gerador prepara o arquivo; você ainda precisa hospedá-lo e conferir os caminhos no seu projeto.
Como preparar a tela de abertura do PWA no iPhone?
Ative iOS e Incluir telas de abertura. O pacote terá imagens para as resoluções cadastradas e as tags apple-touch-startup-image correspondentes. Instale as tags e teste no dispositivo: telas de abertura não corrigem falhas no carregamento do aplicativo.
O que é o identificador do manifest?
O campo id identifica seu PWA. Mantenha-o estável entre atualizações, mesmo se mudar a URL inicial. A ferramenta sugere um identificador que você pode editar; guarde o valor escolhido para as próximas versões.
O pacote pode incluir um favicon SVG?
Sim. Quando a imagem de origem é SVG, a ferramenta também prepara a versão vetorial do favicon. Os arquivos ICO e PNG continuam no pacote quando a opção Web / navegador está ativa.
Preciso de todas as telas de abertura do iOS?
Cada imagem atende a uma resolução e orientação. O conjunto gerado ajuda a cobrir os dispositivos previstos pela ferramenta. Confira o pacote e teste nos aparelhos que seu aplicativo atende; você pode desativar essa opção se não precisar dela.
Meu logo é enviado para um servidor?
Não. A imagem é lida no navegador, onde os ícones e as telas são gerados. O logo não é enviado a um servidor por este gerador.
Isso também gera os ícones de um app nativo?
Esta ferramenta prepara arquivos para aplicativos web: manifest, favicons, ícones e telas de abertura. Para um projeto nativo, use o Gerador de ícones de apps ou as ferramentas específicas de Xcode e Android.
Quais arquivos de favicon vêm no pacote?
Com Web / navegador ativado, o pacote inclui favicon.ico com 16, 32 e 48 px e imagens PNG. Se a origem for SVG, inclui também a versão vetorial. Os Apple Touch Icons fazem parte das opções de iOS.
Posso usar o gerador sem cadastro?
Sim. Escolha seu logo, configure o PWA e baixe os arquivos. Não é necessário criar uma conta, e os ícones não recebem marca-d’água.
O pacote transforma meu site em PWA automaticamente?
Não. Ele prepara os arquivos de ícone, o manifest, exemplos de HTML e um modelo de service worker. Você precisa integrar e revisar esses arquivos, servir o projeto adequadamente e testar a instalação e o comportamento offline nos navegadores desejados.
Ferramentas relacionadas
Quer saber mais?
Guia de ícones PWA: tamanhos e áreas seguras(inglês)