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 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 nosso conversor — selecione ICO como formato de saída. O conversor gera automaticamente um ICO multi-resolução.
- 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.
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.