Um favicon (abreviação de "ícone de favoritos") aparece nas abas do navegador, nos favoritos e nas telas iniciais de dispositivos móveis. É um pequeno, mas importante ponto de contato da marca — e, surpreendentemente, sua implementação correta em todos os navegadores e dispositivos é complexa. Veja exatamente como fazer.
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 sua página
- Nos favoritos e no histórico do navegador
- Nas telas iniciais do iOS/Android, quando um usuário salva seu site (ícone de toque da Apple)
- Nos instaladores de PWA, como ícone do aplicativo
- Nos resultados dos mecanismos de busca (às vezes)
Uma configuração completa de favicon requer vários tamanhos e formatos para abranger todos esses contextos.
Tamanhos de favicon necessários
| Tamanho | Finalidade |
|---|---|
| 16×16 px | Aba do navegador (padrão) |
| 32×32 px | Aba do navegador (alta DPI), barra de tarefas |
| 48×48 px | Ícones de sites do Windows |
| 180×180 px | Ícone de toque da Apple (tela inicial do iOS) |
| 192×192 px | Tela inicial do Chrome para Android |
| 512×512 px | Tela inicial de PWA, contextos de alta resolução |
| SVG | Navegadores modernos (escalável infinitamente) |
Passo 1: Comece com uma imagem de origem de alta resolução
Crie ou exporte seu logotipo/ícone com no mínimo 512×512 pixels como um PNG quadrado com fundo transparente. Este será o arquivo base para gerar todos os tamanhos menores.
Dicas para um design compatível com favicon:
- Mantenha a simplicidade — designs complexos não são legíveis em 16×16
- Use alto contraste — fundos claros com ícones escuros ou vice-versa
- Evite linhas finas — elas desaparecem em tamanhos pequenos.
- Teste em 16x16 — reduza o zoom na sua ferramenta de design para verificar a legibilidade.
Etapa 2: Gerar 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 pega sua imagem original e produz um pacote completo:
- Faça o upload da sua imagem PNG de origem com 512×512 (ou maior) pixels.
- Visualize como ficará em cada tamanho.
- Baixe o pacote completo de favicons com todos os tamanhos necessários.
Passo 3: Adicione o HTML
Insira estas tags em <head> do seu HTML:
<!-- Standard favicon -->
<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 (iOS home screen) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<!-- Android / PWA manifest -->
<link rel="manifest" href="/site.webmanifest" />
Etapa 4: Criar o manifesto do aplicativo Web
Para ícones da tela inicial do Android e suporte a PWA, crie um arquivo site.webmanifest :
{
"name": "Your Site Name",
"short_name": "SiteName",
"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 muito pequeno — geralmente inferior a 2 KB
- Compatível com modo escuro — você pode usar consultas de mídia CSS dentro de SVG.
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
Com uma media query para o 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 SVG.
Solução de problemas comuns com o favicon
Favicon não está sendo exibido:
- Verifique se o arquivo existe no caminho especificado em
href - Atualize a página completamente (Ctrl+Shift+R / Cmd+Shift+R) Verifique a guia Rede das Ferramentas de Desenvolvedor do navegador em busca de erros 404 em solicitações de favicon.
O favicon é exibido na versão desktop, mas não na versão mobile:
- Certifique-se de que
apple-touch-iconesteja configurado para iOS. - Certifique-se de que o manifesto da web exista e esteja vinculado para o Android.
O favicon antigo ainda está visível após a atualização:
- Os navegadores armazenam favicons em cache de forma agressiva. Adicione uma string de consulta para evitar o cache:
href="/favicon.png?v=2"
Favicon desfocado ou pixelizado:
- Regenerar a partir de uma imagem de origem com resolução mais alta (mínimo de 512×512)
- Verifique se você está usando o tamanho correto para cada contexto.
Lista de verificação completa do favicon
- Imagem original em 512×512 px (PNG transparente)
- favicon.ico (16×16 + 32×32 dentro do ICO, para IE antigo)
- 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 HTML
<link>em<head>
Use o Gerador de Favicon do PicsSizer para gerar o pacote inteiro a partir de uma única imagem ou consulte o Guia de Tamanhos de Favicon para obter a referência completa.
Perguntas frequentes
- Qual deve ser o tamanho de um favicon?
- O favicon mínimo tem 16×16 pixels para a aba do navegador. No entanto, uma configuração moderna de favicon inclui vários tamanhos: 16×16, 32×32 e 48×48 para navegadores; 180×180 para o ícone de toque da Apple; 192×192 e 512×512 para o manifesto do Android/PWA. Comece com uma imagem de origem de 512×512 e gere todos os tamanhos a partir dela.
- Qual deve ser o formato de um favicon?
- Os navegadores modernos suportam favicons nos formatos ICO, PNG e SVG. A abordagem recomendada é: um favicon SVG para navegadores modernos (infinitamente escalável, arquivo pequeno), um PNG de 32x32 como alternativa e um ícone de toque da Apple em PNG de 180x180. Um arquivo ICO contendo versões de 16x16 e 32x32 é adequado para navegadores mais antigos.
- Por que meu favicon não está aparecendo no navegador?
- Motivos comuns: o arquivo do favicon não está no caminho correto, a tag de link HTML está ausente ou possui o atributo type incorreto, ou o navegador armazenou em cache um favicon antigo. Tente atualizar a página à força (Ctrl+Shift+R ou Cmd+Shift+R) para forçar o navegador a recarregar o favicon.
- Preciso de um arquivo ICO ou posso usar PNG?
- Os navegadores modernos (Chrome, Firefox, Safari, Edge) suportam favicons em PNG. Um arquivo ICO só é necessário para compatibilidade com versões antigas do Internet Explorer. Se você não estiver direcionando o navegador para o IE, um PNG de 32x32 funciona perfeitamente para a aba, e você pode dispensar o arquivo ICO.
- Qual deve ser a aparência de um bom favicon?
- Um bom favicon é uma versão simplificada do seu logotipo ou marca que seja legível em tamanhos de 16x16 e 32x32 pixels. Evite textos pequenos, gradientes complexos e detalhes minuciosos — eles desaparecem em tamanhos reduzidos. Uma única inicial, um ícone simples ou uma forma marcante funcionam melhor.