Pular para o conteúdo principal
DevTools by Decussi
  • Ferramentas
  • Dados
  • Segurança
  • Rede
  • Texto
  • Data
  • Web
  • Dev
  • SEO
  • Brasil
Ferramentas
  1. Início
  2. /Ferramentas
  3. /Web
  4. /Gerador de Favicon

Gerador de Favicon – Pacote completo a partir de uma imagem

Envie uma imagem e receba favicon.ico, os PNGs em todos os tamanhos, o apple-touch-icon e o manifest, prontos para colar no projeto.

Arraste um arquivo aqui ou escolha acima. O ideal é uma imagem quadrada de 512×512 px ou maior (PNG com transparência ou SVG) — assim nenhum tamanho precisa ser ampliado.

Preciso mesmo de todos esses arquivos?

Não. Em 2026, quatro arquivos cobrem praticamente todo o público: favicon.ico, favicon.svg (se você tiver vetor), apple-icon-180x180.png e android-icon-192x192.png com o manifest.json. O resto é conveniência ou compatibilidade com sistemas antigos.

  • Os nove tamanhos de apple-icon existem por causa de iPhones e iPads sem retina. Desde o iOS 8, um único 180×180 é redimensionado pelo sistema.
  • ms-icon e browserconfig.xml servem aos tiles do Windows 8/10, lidos só por IE 11 e Edge Legacy — ambos fora de suporte.
  • apple-icon-precomposed impedia o iOS 6 de aplicar brilho no ícone. Não faz mais nada.
  • android-icon de 36 a 144 eram densidades de tela antigas. O Chrome atual usa apenas o que está no manifest, por isso o manifest gerado aqui referencia só 192, 512 e o maskable.

Em compensação, os geradores clássicos deixam de fora três coisas que hoje importam: o PNG de 512×512 (exigido pelo Chrome para instalar a PWA e montar a splash), o ícone maskable (sem ele o Android encolhe seu ícone dentro de um círculo branco) e o favicon em SVG. Os três entram neste pacote.

Como usar esta ferramenta

  1. Escolha a imagem de origem, de preferência quadrada
  2. Confira a prévia nos diferentes tamanhos
  3. Baixe o pacote gerado
  4. Cole no projeto as tags HTML indicadas

Sobre esta ferramenta

O que é

Favicon é o ícone que aparece na aba do navegador, nos favoritos e no atalho de tela inicial. Cada contexto pede um tamanho e um formato, e por isso um site precisa de vários arquivos, não de um só.

Quando usar

  • Publicar um site novo com identidade visual completa
  • Atualizar o ícone após uma mudança de marca
  • Adicionar suporte a atalho de tela inicial no celular
  • Gerar os ícones exigidos pelo manifest de um PWA
  • Substituir o favicon padrão do framework

Perguntas frequentes

Qual tamanho a imagem de origem deve ter?
De preferência quadrada e com pelo menos 512×512 pixels, para que os tamanhos menores sejam gerados sem perda visível de nitidez.
Ainda preciso do favicon.ico?
Sim. Navegadores antigos e alguns agregadores ainda buscam /favicon.ico na raiz, então vale manter o arquivo além dos PNGs.
Para que serve o apple-touch-icon?
É o ícone usado quando alguém adiciona o site à tela inicial no iOS. Sem ele, o sistema gera uma miniatura da página, que costuma ficar ruim.

Ferramentas relacionadas

  • 🎨Conversor de Cores
  • ◐Contraste WCAG
  • 🖼Conversor de Imagem
  • 🖼Imagem ↔ Base64
DevTools

Ferramentas para desenvolvedores, em português. Sem cadastro e sem instalação.

Criado e mantido por Decussi

Ferramentas

  • Todas as ferramentas
  • Dados
  • Segurança
  • Rede
  • Texto
  • Data
  • Web
  • Dev
  • SEO
  • Brasil

Referência

  • Consulta rápida
  • Guias
  • Códigos HTTP
  • Cron
  • Checagens de SEO

Desenvolvedores

  • API e devs
  • llms.txt
  • ai.txt
  • Sitemap

Newsletter

Receba novidades e novas ferramentas no seu email.

Sugira uma ferramenta

Tem uma ideia? Envie sua sugestão.