Como Criar um Favicon: Guia Completo para Todo Navegador e Dispositivo

Um favicon (abreviação de "favorites icon") aparece nas abas do navegador, nos favoritos e nas telas iniciais de dispositivos móveis. É um ponto de contato de marca pequeno, mas importante — e é surpreendentemente trabalhoso implementá-lo corretamente em todos os navegadores e dispositivos. Veja exatamente como fazer isso.

O Que É um Favicon?

Um favicon é o pequeno ícone associado a um site. Ele aparece:

• Na aba do navegador, ao lado do título da página
• Nos favoritos e no histórico do navegador
• Nas telas iniciais de iOS/Android quando um usuário salva seu site (Apple touch icon)
• Nos instaladores de PWA como ícone do aplicativo
• Nos resultados de mecanismos de busca (às vezes)

Uma configuração completa de favicon exige múltiplos tamanhos e formatos para cobrir todos esses contextos.

Os Tamanhos de Favicon Necessários

Passo 1: Comece com uma Imagem de Origem em Alta Resolução

Crie ou exporte seu logo/ícone em 512×512 pixels no mínimo como um PNG quadrado com fundo transparente. Essa será sua origem para gerar todos os tamanhos menores.

Dicas para um design compatível com favicon:

• Mantenha simples — designs complexos não funcionam bem em 16×16
• Use alto contraste — fundos claros com ícones escuros, ou vice-versa
• Evite linhas finas — elas desaparecem em tamanhos pequenos
• Teste em 16×16 — reduza o zoom na sua ferramenta de design para verificar a legibilidade

Passo 2: Gere Todos os Tamanhos de Favicon

Em vez de redimensionar manualmente para cada tamanho necessário, use um gerador de favicon. O Gerador de Favicon do PicsSizer recebe sua imagem de origem e produz um pacote completo:

1. Envie seu PNG de origem em 512×512 (ou maior)
2. Visualize como fica em cada tamanho
3. Baixe o pacote completo de favicon com todos os tamanhos necessários

Passo 3: Adicione o HTML

Coloque estas tags no <head> do seu HTML:

<!-- Favicon padrão -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple touch icon (tela inicial do iOS) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- Manifesto do Android / PWA -->
<link rel="manifest" href="/site.webmanifest" />

Passo 4: Crie o Manifesto do Web App

Para ícones de tela inicial do Android e suporte a PWA, crie um arquivo site.webmanifest:

{
  "name": "Nome do Seu Site",
  "short_name": "NomeDoSite",
  "icons": [
    {
      "src": "/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

A Abordagem do Favicon SVG

Para navegadores modernos, um favicon SVG é ideal:

• Escalável infinitamente — nítido em qualquer resolução
• Tamanho de arquivo minúsculo — geralmente menos de 2 KB
• Suporta modo escuro — você pode usar media queries de CSS dentro do SVG

<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

Com uma media query para modo escuro dentro do SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    .icon { fill: black; }
  </style>
  <rect class="icon" width="32" height="32" rx="4" />
</svg>

Todos os navegadores modernos (Chrome, Firefox, Safari 14+, Edge) suportam favicons em SVG.

Solução de Problemas Comuns com Favicon

O favicon não aparece:

• Verifique se o arquivo existe no caminho especificado no href
• Force a atualização do navegador (Ctrl+Shift+R / Cmd+Shift+R)
• Verifique a aba Network das DevTools do navegador para erros 404 nas requisições do favicon

O favicon aparece no desktop, mas não no celular:

• Confirme que o apple-touch-icon está definido para iOS
• Confirme que o manifesto web existe e está vinculado para Android

O favicon antigo continua aparecendo após a atualização:

• Os navegadores fazem cache agressivo de favicons. Adicione uma query string para forçar a atualização do cache: href="/favicon.png?v=2"

O favicon está borrado ou pixelado:

• Gere novamente a partir de uma imagem de origem com resolução maior (mínimo de 512×512)
• Verifique se você está usando o tamanho certo para cada contexto

Checklist Completo do Favicon

• Imagem de origem em 512×512 px (PNG transparente)
• favicon.ico (16×16 + 32×32 dentro do ICO, para o IE legado)
• favicon-16x16.png
• favicon-32x32.png
• apple-touch-icon.png (180×180)
• android-chrome-192x192.png
• android-chrome-512x512.png
• favicon.svg (opcional, mas recomendado)
• site.webmanifest
• Tags <link> de HTML no <head>

Use o Gerador de Favicon do PicsSizer para gerar o pacote completo a partir de uma única imagem, ou veja o Guia de Tamanhos de Favicon para a referência completa.