Imagem → Ícone

Gere favicon e ícones PWA

O .zip inclui:

favicon-16.png16×16
favicon-32.png32×32
favicon-48.png48×48
apple-touch-icon.png180×180
icon-192.png192×192
icon-512.png512×512
manifest.jsonPWA
head-snippet.html<head>

Como funciona

Imagem → Ícone — Gere favicon e ícones PWA. Todo o processamento acontece no seu navegador — sem upload, sem cadastro, sem e-mail. Grátis para sempre.

Última atualização: 2026-05-06

Editor's note

Construímos isso porque todo framework quer um tamanho de favicon diferente, a Apple não para de inventar tamanhos novos, e o manifest do PWA precisa das suas próprias variantes de 192 e 512 px. Na manhã em que contamos vinte e oito arquivos de ícone separados no projeto Multilities decidimos que nunca mais faríamos na mão. O ZIP que esta ferramenta cospe é exatamente o pacote que jogamos em public/ em um site novo — qualquer coisa menor deixa um 404 no manifest de alguém dois meses depois e um ícone de tela inicial do iOS que fica borrado nos prints.

A pré-visualização do recorte central existe porque ficávamos alimentando a ferramenta com logos altos e nos surpreendíamos quando o 16×16 perdia o topo da letra. Agora você vê o recorte antes de confirmar. Não adicionamos remoção de fundo nem máscara de cantos arredondados de propósito — são decisões de design que devem morar no arquivo de origem, não serem chutadas por um utilitário. Traga um PNG quadrado e limpo e o resto é mecânico.

Sobre Imagem → Ícone

Imagem → Ícone transforma um único PNG de origem em um conjunto completo de favicon e ícones PWA, incluindo o manifest.json e o snippet HTML de cabeçalho necessário para conectar tudo. É um gerador de favicon e produtor de ícones PWA com um clique, voltado a desenvolvedores que preferem pular o passo manual com ImageMagick.

Solte seu logotipo e a ferramenta o recorta centralizado em um quadrado, gera cada tamanho exigido (16, 32, 48, 180, 192, 512), zipa tudo junto com um manifest e entrega um snippet HTML pronto para colar no seu <head>.

A geração acontece no seu navegador, então branding ainda não lançado nunca sai da sua máquina. A saída é um .zip limpo que você pode commitar direto na pasta public/ do seu projeto.

Como usar Imagem → Ícone

Arraste um PNG quadrado para a área de upload — imagens quadradas funcionam melhor, idealmente com fundo transparente.
Confira a pré-visualização recortada ao centro para garantir que seu logotipo não fica cortado; fontes não quadradas são recortadas automaticamente.
Clique em Generate icon set & download .zip e aguarde um instante enquanto cada tamanho é renderizado.
Descompacte o arquivo na pasta public/ (ou static/) do seu projeto.
Cole o snippet HTML de head incluído no seu <head> e referencie o manifest.json a partir da tag <link> apropriada.
Faça hard-refresh em uma janela anônima para confirmar que o novo favicon e ícone de instalação PWA aparecem.

Casos de uso comuns

Iniciar um novo site quando você tem o logotipo em PNG, mas não tem tempo para exportar 8 tamanhos diferentes manualmente.
Adicionar suporte a PWA a um app existente — os ícones de 192 e 512 px atendem aos requisitos do manifest sem ajustes.
Atualizar o favicon após um rebrand sem incomodar o time de design pedindo re-exportações.
Produzir Apple touch icons (180 px) para que atalhos da tela inicial do iOS fiquem nítidos.
Gerar conjuntos de ícones consistentes para vários ambientes (staging, produção) a partir de um único arquivo de origem.

Dicas e erros comuns

Comece com uma origem em alta resolução (pelo menos 512×512) para que os tamanhos reduzidos permaneçam nítidos.
Use fundo transparente — fundos opacos parecem estranhos dentro das máscaras de cantos arredondados do iOS.
Teste o favicon visitando seu site em uma janela anônima; navegadores cacheiam favicons agressivamente.
Se o seu logotipo tem traços muito finos, eles podem desaparecer em 16×16 — desenhe uma marca simplificada para tamanhos minúsculos, se necessário.

Perguntas frequentes

Quais tamanhos o conjunto gerado inclui?

16, 32, 48 (favicons), 180 (Apple touch icon), 192 e 512 (PWA). Mais um manifest.json e um snippet HTML para colar no seu projeto.

E se minha origem não for quadrada?

Recortamos automaticamente no centro como quadrado. Para melhor resultado, use uma imagem quadrada com o conteúdo principal centralizado.

Que formato funciona melhor como origem?

PNG com fundo transparente. Para SVG, passe primeiro pela nossa ferramenta SVG → PNG.

Ainda preciso de um arquivo .ico separado em 2026?

Navegadores modernos usam favicons PNG referenciados via <link rel="icon" type="image/png"> sem problemas. O legado /favicon.ico só é necessário se você dá suporte a versões muito antigas do IE. Mesmo assim, muitos times mantêm um por garantia.

Por que meu ícone PWA aparece com fundo branco em vez de transparente?

Algumas plataformas (notoriamente o iOS) achatam a transparência sobre branco. Desenhe o ícone assumindo que um fundo sólido aparecerá, ou forneça uma variante de ícone maskable no seu manifest com a safe zone correta.

Posso gerar ícones a partir de um SVG?

Converta o SVG primeiro em PNG de alta resolução com nossa ferramenta SVG → PNG (tente 1024 px de largura), depois alimente esse PNG no Imagem → Ícone. Passar pelo PNG garante que cada tamanho seja rasterizado de forma idêntica.