Favicon vem de "favorite icon" — o ícone que os navegadores salvam junto com os favoritos. Hoje o conceito foi muito além disso: o favicon aparece em abas do navegador, na barra de endereços, em atalhos na área de trabalho, na tela inicial de celulares iOS e Android, em resultados do Google, e como ícone de Progressive Web Apps (PWAs). Cada contexto exige um tamanho diferente.
O erro mais comum é criar apenas um arquivo favicon.ico de 16×16 pixels e considerar o trabalho feito. Num monitor Retina ou num iPhone, esse ícone vai aparecer borrado. A solução é gerar um conjunto completo de tamanhos — o que parece complicado, mas pode ser feito em segundos com a ferramenta certa.
O que é o arquivo .ico e quando usar
O formato .ico é o formato original de favicon, criado pela Microsoft nos anos 90. Ele tem uma característica especial: pode conter múltiplos tamanhos dentro de um único arquivo — por exemplo, 16×16 e 32×32 ao mesmo tempo. O navegador escolhe o tamanho mais adequado para cada contexto.
O favicon.ico ainda é necessário em 2026 por um motivo específico: navegadores antigos e alguns robôs de busca tentam acessar automaticamente o arquivo em /favicon.ico na raiz do site. Se ele não existir, geram um erro 404 desnecessário nos logs do servidor. Por isso, mesmo que você use PNG moderno para tudo, é recomendável ter um favicon.ico na raiz.
Tabela completa de tamanhos de favicon
Esta é a lista de todos os tamanhos que um favicon completo deve cobrir em 2026:
| Tamanho | Formato | Onde é usado |
|---|---|---|
| 16 × 16 px | .ico / PNG | Aba do navegador (padrão) |
| 32 × 32 px | .ico / PNG | Atalho na área de trabalho (Windows), abas em telas HiDPI |
| 48 × 48 px | .ico / PNG | Atalho no Windows Explorer |
| 57 × 57 px | PNG | iPhone (iOS 1–6, telas não-Retina) |
| 60 × 60 px | PNG | iPhone (iOS 7+, telas não-Retina) |
| 72 × 72 px | PNG | iPad (iOS 1–6, telas não-Retina) |
| 76 × 76 px | PNG | iPad (iOS 7+, telas não-Retina) |
| 96 × 96 px | PNG | Atalho no Chrome (Android) |
| 114 × 114 px | PNG | iPhone Retina (iOS 1–6) |
| 120 × 120 px | PNG | iPhone Retina (iOS 7+) |
| 144 × 144 px | PNG | iPad Retina (iOS 1–6), Windows 8 tile |
| 152 × 152 px | PNG | iPad Retina (iOS 7+) |
| 167 × 167 px | PNG | iPad Pro (iOS 9+) |
| 180 × 180 px | PNG | iPhone 6 Plus e versões mais recentes |
| 192 × 192 px | PNG | Android Chrome, PWA (manifest.json) |
| 512 × 512 px | PNG | Android Chrome splash screen, PWA de alta resolução |
💡 Boa notícia: você não precisa criar cada tamanho manualmente. O Gerador de Favicon do ImageTools gera todos esses arquivos automaticamente a partir de uma única imagem — incluindo o .ico com múltiplos tamanhos e um ZIP com todos os PNGs.
Qual imagem usar como base para o favicon
A imagem de origem precisa ter pelo menos 512×512 pixels — esse é o tamanho máximo necessário, e partir de uma imagem grande garante que os tamanhos menores sejam gerados com qualidade. Usar uma imagem pequena como base resulta em ícones borrados nos tamanhos maiores.
Formatos aceitos como entrada
- PNG com fundo transparente — ideal. O ícone fica limpo em qualquer cor de fundo de aba ou tela inicial.
- PNG com fundo sólido — funciona bem se a cor de fundo combina com o design do seu site.
- JPG — aceito, mas sem suporte a transparência.
- SVG — o melhor ponto de partida se você tiver disponível. Vetorial, qualquer tamanho sem perda.
Dicas de design para favicons
Favicon é um espaço muito pequeno — a versão de 16×16 tem apenas 256 pixels no total. Isso impõe restrições de design que muitos ignoram:
- Use o elemento mais simples da sua marca. O logo completo geralmente não funciona em 16px. Prefira apenas a inicial, um símbolo isolado ou uma versão simplificada do ícone.
- Evite texto fino. Qualquer texto em tamanhos abaixo de 32px vai ficar ilegível.
- Use alto contraste. O favicon compete com dezenas de outras abas abertas — um ícone de baixo contraste desaparece visualmente.
- Fundo de cor sólida funciona melhor que transparente em muitos casos. Isso garante que o ícone se destaque tanto em abas claras quanto escuras.
- Teste o resultado em 16px antes de dar o trabalho por concluído. Um design que parece ótimo em 512px pode ficar irreconhecível em 16px.
Gere seu favicon agora — todos os tamanhos de uma vez
Faça upload da sua imagem e baixe um ZIP com o .ico e todos os PNGs necessários para navegadores, iPhone, Android e PWA. Grátis, sem cadastro.
Criar favicon grátisComo instalar o favicon no seu site
Após gerar os arquivos, você precisa referenciá-los no <head> do HTML. O código completo recomendado para 2026 é:
<!-- Favicon básico para navegadores -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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 (iPhone e iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android e PWA -->
<link rel="manifest" href="/site.webmanifest">O arquivo favicon.ico deve estar na raiz do site (o mesmo diretório do index.html). Os demais arquivos PNG podem ficar na raiz ou em uma subpasta, desde que os caminhos no HTML estejam corretos.
O arquivo site.webmanifest
Para PWAs e para que o Android Chrome reconheça seu ícone corretamente, você precisa de um arquivo site.webmanifest na raiz do site. O conteúdo básico é:
{
"name": "Nome do Seu Site",
"short_name": "Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}📦 O ZIP do Gerador de Favicon já inclui o arquivo site.webmanifest pré-configurado com os caminhos corretos — basta descompactar e fazer o upload dos arquivos para a raiz do seu site.
Como instalar em plataformas específicas
WordPress
No WordPress, o favicon é chamado de "ícone do site". Para configurar: acesse Aparência → Personalizar → Identidade do Site e clique em "Selecionar Ícone do Site". O WordPress cuida automaticamente de gerar os tamanhos necessários a partir da imagem que você enviar — basta usar uma imagem quadrada de pelo menos 512×512 pixels.
Shopify
Em Loja Online → Preferências, role até "Ícone da loja" e faça upload de uma imagem quadrada de pelo menos 512×512 pixels em PNG ou JPG.
Wix
Em Configurações → Identidade da Marca → Favicon. Use uma imagem quadrada em PNG ou JPG.
Squarespace
Em Design → Estilo do Navegador, seção "Favicon". Recomendado: PNG quadrado de 100×100 pixels (o Squarespace faz o restante).
HTML/CSS puro ou frameworks
Coloque todos os arquivos gerados na raiz do projeto e adicione as tags de <link> mostradas acima no <head> de cada página — ou no layout base, se estiver usando um framework como Next.js, Nuxt, ou similar.
Verificando se o favicon está funcionando
Após instalar, abra o site em uma aba do navegador e verifique se o ícone aparece na aba. Se não aparecer imediatamente, tente:
- Limpar o cache do navegador (Ctrl+Shift+R no Windows, Cmd+Shift+R no Mac).
- Abrir em aba anônima — que não usa cache.
- Aguardar alguns minutos, pois navegadores costumam armazenar favicons em cache por períodos variáveis.
- Verificar se o caminho do arquivo no HTML está correto e se o arquivo realmente existe no servidor.