O que é um favicon?
Um favicon (abreviação de “favorite icon”) é o pequeno ícone exibido nas abas do navegador, favoritos, histórico e outros elementos da interface. É um dos elementos mais visíveis da marca do seu site.
Onde os favicons aparecem
- Abas do navegador — Local principal, visível quando o usuário tem várias abas abertas
- Barra de favoritos — Quando o usuário salva o site como favorito
- Histórico — Na lista de histórico do navegador
- Barra de endereço — Alguns navegadores mostram o favicon ao lado da URL
- Tela inicial do celular — Quando o usuário adiciona o site à tela inicial
- Resultados de busca — O Google mostra favicons nos resultados no mobile
- Plataformas sociais — Algumas usam favicons nas pré-visualizações de links
Por que isso importa?
- Reconhecimento de marca — Os usuários identificam o site pelo ícone ao trocar de abas
- Profissionalismo — Sem favicon, aparece o ícone padrão do navegador, com cara de incompleto
- Impacto em SEO — O Google exibe favicons nos resultados mobile; a ausência chama atenção negativamente
- Usabilidade — Com 10+ abas abertas, favicons são a única forma de identificar cada aba
- Confiança — Usuários associam favicons a sites estabelecidos e confiáveis
Como corrigir
Favicon básico (mínimo)
<link rel="icon" href="/favicon.ico" />Configuração moderna de favicon (recomendada)
<!-- SVG favicon (scalable, supports dark mode) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<!-- PNG fallback for older browsers -->
<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 (for iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Web App Manifest (for Android) -->
<link rel="manifest" href="/site.webmanifest" />Boas práticas
Dicas de design
- Mantenha simples — Em 16x16px, detalhes se perdem. Use formas simples e cores fortes
- Torne reconhecível — Deve ser identificável de relance, mesmo em tamanho minúsculo
- Use as cores da marca — Consistência com a identidade visual
- Teste em tamanhos pequenos — Desenhe em 512x512, mas sempre teste em 16x16 e 32x32
- Considere o modo escuro — Favicons SVG podem se adaptar ao esquema de cores do usuário:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
rect { fill: #4f46e5; }
@media (prefers-color-scheme: dark) {
rect { fill: #818cf8; }
}
</style>
<rect width="32" height="32" rx="8" />
</svg>Comparação de formatos
| Formato | Prós | Contras |
|---|---|---|
| SVG | Escalável, suporta modo escuro | Não suportado em todos os navegadores |
| PNG | Suporte universal, nítido em tamanhos definidos | Precisa de vários tamanhos |
| ICO | Suporte legado, pode conter vários tamanhos | Arquivo maior |
Ferramentas para criar favicons
- RealFaviconGenerator — Gera todos os arquivos de favicon e o HTML necessários
- Figma — Desenhe em 512x512 e exporte em vários tamanhos
- Favicon.io — Gere a partir de texto, imagem ou emoji