O Guia Definitivo de Favicons em 2025: Formatos, Tamanhos e Melhores Práticas

É um quadradinho minúsculo de 16x16 pixels, mas é a cara do seu site.

O Favicon (Ícone de Favoritos) é crucial para a experiência do usuário. Ele ajuda a galera a identificar sua aba no meio de dezenas de páginas abertas, dá um ar profissional ao seu site e até impacta indiretamente no SEO ao melhorar a taxa de cliques.

Mas em 2025, lidar com favicons ficou surpreendentemente complexo. Ainda devemos usar .ico? Preciso de um 32x32 ou um 192x192? E o Modo Escuro?

Este guia cobre tudo o que você precisa saber para implementar o setup de favicon perfeito.

1. A Batalha dos Formatos: ICO vs. PNG vs. SVG

O Clássico: .ico

Por anos, favicon.ico foi o único padrão. É um formato "container" único que pode guardar várias resoluções (16x16, 32x32, 48x48) num só arquivo.

• Prós: Roda em qualquer navegador, incluindo versões antigas do IE.
• Contras: Mais chato de criar do que PNGs.

O Padrão Moderno: .png

Hoje em dia, PNG é o formato queridinho para favicons. Suporta transparência alfa e é super fácil de gerar.

• Prós: Alta qualidade, fácil de criar.
• Contras: Você precisa de vários arquivos para tamanhos diferentes.

O Futuro: .svg

Favicons SVG são um divisor de águas. Eles escalam infinitamente e, o mais importante, suportam media queries CSS. Isso significa que você pode mudar a cor do seu favicon baseado no tema do sistema do usuário (Modo Claro/Escuro).

• Prós: Escala infinita, suporte a Modo Escuro.
• Contras: Suporte parcial em navegadores muito antigos (precisa de um fallback).

2. Checklist de Tamanhos Essenciais

Você não precisa mais gerar 20 arquivos diferentes. Aqui está a lista enxuta e moderna para 2025:

• 16x16: Para abas do navegador (desktop).
• 32x32: Para telas de alta densidade (Retina) e barras de tarefas.
• 180x180: Para Apple Touch Icon (tela inicial do iPhone/iPad).
• 192x192: Para tela inicial do Android Chrome.
• 512x512: Para telas de splash de PWA (Progressive Web Apps).

3. O Setup HTML Perfeito

Pare de copiar código de 2015. Aqui está a implementação HTML limpa e moderna:

<!-- 1. SVG para navegadores modernos (com suporte a Modo Escuro!) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- 2. Fallback PNG para Safari e outros -->
<link rel="icon" href="/favicon-32x32.png" type="image/png">

<!-- 3. Apple Touch Icon (Tela inicial do iPhone) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- 4. Manifesto de Web App (Android e PWA) -->
<link rel="manifest" href="/site.webmanifest">

Dica Pro: Coloque um arquivo favicon.ico no seu diretório raiz (/favicon.ico) como garantia para ferramentas e bots antigos, mesmo se você não linkar ele no seu HTML.

4. Suporte a Modo Escuro com SVG

Essa é a feature mais legal dos favicons modernos. Você pode fazer seu ícone se adaptar ao tema do usuário.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; } /* Padrão (Modo Claro) */
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; } /* Modo Escuro: muda pra branco! */
    }
  </style>
  <path d="..." />
</svg>

Agora seu logo preto não vai sumir numa aba de navegador escura!

5. Troubleshooting: Por que meu favicon não aparece?

• Cache do Navegador: Navegadores fazem cache de favicons agressivamente. Tente abrir seu site em aba Anônima ou adicione uma query string de versão (ex: href="/favicon.svg?v=2").
• Caminho Errado: Garanta que o caminho seja relativo à raiz (/) ou correto em relação ao arquivo HTML.
• Resultados de Busca do Google: O Google demora semanas para atualizar o favicon nos resultados de busca. Garanta que seu favicon seja um múltiplo de 48px quadrado (48x48, 96x96, 144x144) para melhor compatibilidade com o Google.

Conclusão

Um favicon quebrado ou pixelado grita "projeto inacabado". Tirar 10 minutos para configurar isso corretamente adiciona uma camada de polimento que os usuários confiam subconscientemente.

Precisa gerar todos esses arquivos a partir de um único logo?
Você pode usar nosso Gerador de Favicon para criar instantaneamente os arquivos ICO, PNG e site.webmanifest com um preview de como eles ficam nos navegadores e no Google.