O favicon é o pequeno ícone que aparece nas abas do navegador, nos favoritos e nos atalhos da tela inicial. Para acertar, é preciso gerar vários tamanhos e vinculá-los corretamente no HTML – algo simples quando você conhece os requisitos.

O que é um favicon?

"Favicon" vem de "favorites icon". No início era um ícone de 16×16 pixels para os favoritos do Internet Explorer. Navegadores e dispositivos modernos pedem vários tamanhos:

| Arquivo | Tamanho | Uso |
|------|------|----------|
| favicon.ico | 16×16, 32×32 | Abas do navegador, barra de tarefas do Windows |
| favicon-16x16.png | 16×16 | Ícones pequenos de aba |
| favicon-32x32.png | 32×32 | Abas padrão |
| apple-touch-icon.png | 180×180 | Atalho na tela inicial do iOS |
| android-chrome-192x192.png | 192×192 | Tela inicial do Android |
| android-chrome-512x512.png | 512×512 | Tela de abertura do Android, PWA |

Gerando todos os tamanhos com o ZapFile

Abra o gerador de favicon do ZapFile
Envie uma imagem quadrada (de preferência PNG, com pelo menos 512×512 pixels)
Gere os tamanhos
Baixe o ZIP com todos os tamanhos e o arquivo .ico

Adicionando os favicons ao site

Adicione estas tags na seção do seu HTML:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Para Progressive Web Apps (PWA), adicione também um arquivo site.webmanifest:

{
  "name": "Your App",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Criando um bom favicon

Mantenha simples

Em 16×16 pixels, logos complexos ficam irreconhecíveis. Use a inicial da marca, um ícone simplificado ou um bloco de cor sólida.

Use alto contraste

O favicon aparece em interfaces claras e escuras. Teste as duas. Um fundo sólido na cor da marca com um símbolo branco funciona nos dois modos.

Comece em 512×512

Gere a partir da fonte de maior resolução. O ZapFile reduz com nitidez a partir de 512 px, mas ampliar a partir de 16 px dá resultado borrado.

Favicons SVG (navegadores modernos)

Navegadores baseados em Chromium suportam favicons SVG, que ficam perfeitos em qualquer tamanho. Adicione junto aos PNG/ICO:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Erros comuns

Usar uma imagem de origem em baixa resolução: comece sempre com 512 px ou mais
Oferecer só o .ico: dispositivos modernos precisam dos tamanhos PNG; só com ICO, iOS e Android ficam sem um ícone adequado
Esquecer o cache: depois de atualizar o favicon, os navegadores guardam o antigo com insistência. Acrescente um parâmetro de versão (favicon.ico?v=2) durante o desenvolvimento

Resumo

Favicons precisam de vários tamanhos para navegadores, iOS, Android e PWA
Comece com um PNG quadrado de 512×512 e gere todos os tamanhos de uma vez
O gerador de favicon do ZapFile cria todos os tamanhos necessários e o arquivo ICO em segundos

Como criar um favicon para o seu site (todos os tamanhos)