Um favicon não é mais uma única imagem. Navegadores, celulares e sistemas operacionais pegam, cada um, um tamanho diferente para um espaço diferente — a aba do navegador, um favorito, a tela inicial do iOS, o alternador de apps do Android. Publique um único PNG 32×32 e ele funcionará na aba, mas ficará borrado quando alguém salvar seu site no celular. Publique o conjunto completo e toda superfície recebe um ícone nítido.
Aqui está exatamente de quais tamanhos você precisa, o que cada um faz e por que a lista tem essa cara.
Os tamanhos que importam
A maioria dos sites é coberta por seis tamanhos de PNG mais um .ico legado. Aqui está a referência:
| Tamanho | Formato | Onde é usado |
|---|---|---|
| 16×16 | PNG (no .ico) | Aba do navegador, barra de endereço, favoritos |
| 32×32 | PNG (no .ico) | Abas Retina, atalhos da barra de tarefas do Windows |
| 48×48 | PNG | Ícones de site do Windows, algumas superfícies do Android |
| 180×180 | PNG | Tela inicial do iOS (apple-touch-icon) |
| 192×192 | PNG | Tela inicial do Android, instalação de PWA |
| 512×512 | PNG | Tela de abertura de PWA, lojas de apps, alta densidade |
O arquivo favicon.ico é um contêiner que agrupa os tamanhos pequenos (geralmente 16 e 32, às vezes 48). Navegadores antigos e o Windows o procuram pelo nome na raiz do seu site, então ainda vale publicá-lo mesmo que os navegadores modernos usem PNGs com alegria.
Por que tantos? Um passeio rápido
O motivo da lista ser longa é que o ícone aparece em tamanhos físicos muito diferentes.
16 e 32 são os ícones de aba do dia a dia. 16 é o tamanho clássico; 32 cobre telas de alta densidade ("Retina") onde 16 pareceria mole. Os navegadores escolhem o que couber na densidade de pixels.
48 é uma coisa do Windows — é usado para atalhos de site e aparece mais nítido em alguns lugares que o 32 não cobre bem.
180 é o apple-touch-icon da Apple. Quando alguém toca em "Adicionar à Tela de Início" num iPhone ou iPad, o iOS usa este. Erre e o iOS vai pegar uma captura de tela reduzida ou mostrar um simples bloco com uma letra — nenhum dos dois parece com a sua marca.
192 e 512 são os tamanhos de Progressive Web App, declarados em um arquivo manifest.webmanifest. 192 é o ícone de tela inicial do Android; 512 alimenta a tela de abertura e é reduzido para qualquer outra coisa que o SO precise. Se o seu site é instalável, esses dois são inegociáveis.
Você precisa de algo maior que 512?
Não. 512×512 é o teto prático para favicons web — a especificação do webmanifest e toda plataforma principal param por aí. Se sua arte de origem tem 1024 ou mais, tudo bem como imagem inicial (mais detalhe para reduzir), mas você não publica um favicon de 1024. Qualquer coisa acima de 512 só acrescenta bytes que ninguém usa.
A única regra que importa subindo: comece de uma origem grande e quadrada. Um original de 512×512 ou 1024×1024 reduz de forma limpa para cada tamanho abaixo dele. Comece de uma imagem minúscula e os tamanhos pequenos ficam lamacentos porque nunca houve detalhe suficiente para manter.
Projete para sobreviver ao 16×16
O tamanho mais difícil é o menor. A 16×16, um logotipo detalhado vira um borrão ilegível. Algumas dicas que valem para qualquer site:
- Simplifique. Um logotipo com o nome inteiro não se lê a 16px. Use uma única letra, um monograma ou a parte mais reconhecível da sua marca.
- Mantenha o contraste alto para a forma continuar legível em fundos de aba claros e escuros.
- Deixe um pouco de espaçamento — um ícone que toca as quatro bordas parece apertado na aba.
- Teste pequeno. Reduza o zoom do navegador, ou só olhe a aba de verdade. Se você não consegue dizer o que é de relance, simplifique mais.
Gerando o conjunto inteiro
Você não monta isso à mão. Solte uma imagem quadrada no Gerador de Favicon e ele produz o conjunto completo de uma vez — o favicon.ico, os PNGs de 16/32/48/180/192/512, um webmanifest pronto para usar e o trecho exato de HTML de <head> para colar. Tudo roda no seu navegador: a imagem nunca é enviada e, depois da primeira visita, a ferramenta funciona offline.
O HTML com que você vai terminar
Para referência, uma configuração completa de favicon fica mais ou menos assim no seu <head>:
<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">
<link rel="manifest" href="/site.webmanifest">
O gerador escreve isto para você, então você pode colar direto. Cubra os seis tamanhos mais o .ico e o manifest, e todo navegador, celular e SO recebe o ícone nítido que está pedindo.