O que é um favicon?
Um favicon (favorite icon) é o pequeno ícone que aparece em abas do navegador, favoritos, entradas do histórico e atalhos da área de trabalho. É um dos primeiros elementos visuais que os visitantes percebem no seu site. A ausência de favicon sinaliza um site pouco profissional ou inacabado.
Os favicons evoluíram de simples ícones de 16x16 pixels para um conjunto complexo de tamanhos necessários para diferentes dispositivos e contextos. Sites modernos precisam de vários formatos de favicon para cobrir todos os casos de uso.
O formato ICO para favicons
ICO é o formato original de favicon e continua sendo o mais universalmente suportado. Um único arquivo ICO (favicon.ico) contém várias imagens em diferentes tamanhos (16x16, 32x32, 48x48, etc.), permitindo que navegadores e sistemas operacionais selecionem automaticamente o tamanho mais apropriado.
Quando um navegador solicita /favicon.ico, ele recebe um único arquivo contendo todos os tamanhos necessários. Não é preciso marcação HTML adicional — os navegadores procuram favicon.ico no diretório raiz automaticamente.
Requisitos modernos de favicon (2026)
| Arquivo | Tamanho | Finalidade |
|---|---|---|
| favicon.ico | 16x16 + 32x32 | Navegadores antigos, atalhos do Windows |
| apple-touch-icon.png | 180x180 | Favorito na tela inicial do iOS |
| icon-192.png | 192x192 | Chrome Android, manifest PWA |
| icon-512.png | 512x512 | Splash screen PWA, diálogo de instalação |
| favicon.svg | Escalável | Navegadores modernos, escala infinita, modo escuro |
Como criar um favicon a partir de PNG
- Comece com uma imagem quadrada — de pelo menos 512x512 pixels. Use seu logo ou uma versão simplificada dele.
- Use PNG com transparência — um fundo transparente garante que seu favicon fique limpo em qualquer tema do navegador (claro ou escuro).
- Envie para o conversor de PNG para ICO — ele gera um único favicon.ico com seis tamanhos: 256, 128, 64, 48, 32 e 16 pixels.
- Teste em tamanhos pequenos — visualize seu favicon em 16x16. Designs complexos podem exigir simplificação para tamanhos de exibição minúsculos.
Transparência em favicons
Origem PNG = favicon transparente. Se sua imagem de origem tem fundo transparente, o ICO preservará essa transparência. Isso é importante para favicons que precisam ficar bem tanto em temas claros quanto escuros do navegador.
Origem JPG = fundo sólido. JPG não suporta transparência, então um favicon gerado a partir de JPG sempre terá uma cor de fundo sólida. Use PNG sempre que possível. Se o seu logo só existe em JPG, aprenda a deixar o fundo de um JPG transparente antes de criar o favicon.
Boas práticas
- Mantenha simples: favicons são exibidos a 16x16 pixels. Logos complexos ficam ilegíveis. Use uma marca simplificada ou uma única letra.
- Teste no tamanho real: visualize seu favicon em uma aba do navegador antes de publicar. O que parece ótimo em 512x512 pode ficar irreconhecível em 16x16.
- Garanta contraste: teste em temas claros e escuros do navegador. Seu favicon deve ser visível contra qualquer fundo.
- Use origem vetorial: se você tiver uma versão SVG do seu logo, ela produzirá resultados mais nítidos em todos os tamanhos.
Implementação HTML
Adicione estas linhas ao <head> do seu HTML para suporte completo de favicon:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Início rápido: no mínimo, coloque um favicon.ico (com tamanhos 16x16 e 32x32) no diretório raiz do seu site. Os navegadores o encontram automaticamente sem nenhuma marcação HTML.
ICO vs PNG vs SVG: qual formato de favicon usar
| Formato | Funciona em | Use para |
|---|---|---|
| favicon.ico | Todos os navegadores, inclusive os antigos; encontrado em /favicon.ico sem nenhum HTML | O fallback que todo site deve ter |
| PNG | Todos os navegadores modernos via <link rel="icon" type="image/png"> |
apple-touch-icon (180×180) e ícones do manifesto de web app (192 e 512) |
| SVG | Chrome, Edge e Firefox; versões antigas do Safari o ignoram | Um ícone nítido em qualquer tamanho, com cores de modo escuro via CSS |
Um conjunto mínimo comum é favicon.ico, icon.svg, apple-touch-icon.png e os dois PNGs do manifesto. Dispense o SVG quando o seu logo tiver detalhes finos que se desfazem em 16 px; desenhe um ícone simplificado em vez disso.