O favicon é o pequeno ícone que aparece nas abas do navegador, nos favoritos, no histórico e — cada vez mais — nos resultados de busca. Apesar do tamanho reduzido, ele tem um papel significativo no reconhecimento de marca e na profissionalidade do site. Um favicon ausente ou quebrado faz o site parecer inacabado.

O Que É um Favicon e Por Que Importa

A palavra "favicon" é abreviação de "favorites icon" — originou-se como o ícone mostrado ao lado de um site na lista de favoritos do Internet Explorer. Hoje, favicons aparecem em muitos mais lugares:

  • Abas do navegador: A localização principal. Usuários com muitas abas dependem dos favicons para identificar sites rapidamente.
  • Barra de favoritos: Quando um usuário favorita seu site, o favicon aparece ao lado do título.
  • Ícones na tela inicial: Em dispositivos móveis, quando o usuário adiciona seu site à tela inicial, o apple-touch-icon (ou ícone PWA) é usado.
  • Resultados do Google: O Google exibe favicons ao lado das URLs nos resultados de busca, aumentando a presença visual da marca.
  • Histórico do navegador: Favicons ajudam os usuários a encontrar sites visitados anteriormente.

Todos os Tamanhos de Favicon Necessários

Diferentes navegadores, sistemas operacionais e dispositivos esperam diferentes tamanhos de favicon. Aqui está a lista completa que você precisa:

Favicons de Navegador

  • 16 × 16 pixels: O tamanho clássico de favicon usado nas abas do navegador.
  • 32 × 32 pixels: Usado na barra de tarefas do Windows, abas de alta resolução e atalhos.
  • 48 × 48 pixels: Usado para atalhos de site do Windows e alguns contextos de navegador.

Apple Touch Icon

180 × 180 pixels: O apple-touch-icon usado quando usuários iOS adicionam seu site à tela inicial. A Apple aplica automaticamente cantos arredondados e sombra sutil.

Ícones PWA (Progressive Web App)

  • 192 × 192 pixels: Usado pelo Android Chrome para "Adicionar à Tela Inicial" e no app launcher.
  • 512 × 512 pixels: Usado na tela de splash do PWA e no alternador de apps do Android.

O Código HTML Necessário

Adicione estas linhas na seção <head> do seu HTML:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Dicas para Criar um Bom Favicon

  • Mantenha simples. Em 16 pixels, detalhes finos desaparecem. Use formas ousadas, uma única letra, ou uma versão simplificada do seu logo.
  • Use alto contraste. O favicon precisa ser reconhecível contra temas claros e escuros do navegador.
  • Comece com canvas quadrado. Favicons são sempre quadrados. Se seu logo é horizontal, use apenas o símbolo ou primeira letra.
  • Teste no tamanho real. Projete em 512 × 512 para detalhes, mas visualize frequentemente em 16 × 16 e 32 × 32.
  • Use as cores da sua marca. Use sua cor primária para reconhecimento instantâneo. Se não tem certeza sobre cores, você pode extrair sua paleta de um asset existente.

Gere Todos os Tamanhos de Favicon de Uma Imagem

Faça upload de uma única imagem e receba todos os tamanhos necessários: 16x16, 32x32, 180x180 apple-touch-icon, 192x192 e 512x512 PWA. Mais o código HTML pronto.

Abrir Gerador de Favicon

Frequently Asked Questions

Qual formato de arquivo devo usar para o favicon?

Use PNG para todos os tamanhos modernos de favicon. O formato .ico só é necessário para compatibilidade com Internet Explorer, o que raramente é uma preocupação hoje. Favicons SVG são suportados por navegadores modernos e escalam perfeitamente, mas você ainda precisa de PNGs para dispositivos Apple e manifestos PWA.

Preciso de todos os tamanhos de favicon?

No mínimo, forneça um PNG 32x32 para abas do navegador, um PNG 180x180 para Apple touch icon, e um PNG 192x192 para Android. Adicione o 512x512 se seu site é um PWA. Navegadores podem redimensionar ícones, mas tamanhos dedicados sempre ficam mais nítidos.

Como testo meu favicon?

Abra seu site no Chrome, Firefox e Safari e verifique a aba do navegador. Para Apple touch icon, adicione a página à tela inicial do iPhone. Para Android, use a opção "Adicionar à Tela Inicial" do Chrome. Use o DevTools para confirmar que os arquivos corretos carregam. Limpe o cache se as mudanças não aparecerem — navegadores cacheiam favicons agressivamente.