A resposta direta: não existe um único tamanho de favicon. A aba do navegador quer 16×16, sua gêmea de alta densidade quer 32×32, atalhos do Windows querem 48×48, telas de início do iOS querem 180×180, e o Android quer 192×192 e 512×512. O jeito clássico de cobrir os três primeiros é um único arquivo ICO; o resto são PNGs mais algumas linhas de marcação. Este guia é o mapa completo: cada tamanho, onde é usado e o código exato para servi-lo.
A tabela de tamanhos
| Tamanho | Usado por | Formato |
|---|---|---|
| 16×16 | Abas do navegador, barra de endereço, histórico | ICO |
| 32×32 | Abas de alta densidade, telas retina | ICO |
| 48×48 | Atalhos da área de trabalho do Windows, ícones de instalação | ICO |
| 180×180 | Tela de início do iOS (apple-touch-icon) | PNG |
| 192×192 | Tela de início do Android, gaveta de apps do Chrome | PNG |
| 512×512 | Splash screens do Android, instalação de PWA | PNG |
Seis tamanhos cobrem todo contexto mainstream. Tudo abaixo explica por que cada linha existe e onde moram os casos de borda.
ICO: três tamanhos num arquivo só
O contêiner ICO é o formato original de favicon, e seu único superpoder é guardar várias resoluções num único arquivo. Um favicon.ico bem construído carrega 16, 32 e 48; o navegador ou o sistema lê o diretório no topo do arquivo e escolhe a entrada que cabe. O layout byte a byte desse diretório está no nosso mergulho técnico no formato ICO.
A razão para criar os tamanhos pequenos à mão em vez de deixar um renderizador reduzir seu logotipo: em 16×16 existem 256 pixels no total. A redução automática borra formas finas até virar mingau; uma versão desenhada, ou ao menos retocada, para aquele tamanho continua reconhecível. Arraste sua fonte para o PNG para ICO e os tamanhos padrão são empacotados para você.
Dois fatos tornam o ICO inevitável mesmo em 2026. Todo navegador já lançado o lê. E navegadores pedem /favicon.ico automaticamente para qualquer página que não declara nada — leitores de feed, previews de link e crawlers também procuram ali. Um favicon.ico na raiz é cobertura de graça.
Favicons PNG e o atributo sizes
Navegadores modernos aceitam favicons PNG declarados por tamanho:
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
O atributo sizes é o que permite ao navegador escolher antes de baixar — sem ele, todos os arquivos declarados podem ser baixados e o vencedor escolhido depois. PNGs são menores que ICOs na mesma resolução e mais simples de gerar, mas só funcionam onde o navegador entende as declarações. Navegadores antigos as ignoram por completo, e é por isso que o PNG complementa o ICO em vez de substituí-lo.
apple-touch-icon: 180×180
Quando alguém salva seu site na tela de início do iOS, o Safari procura por apple-touch-icon.png. O tamanho padrão é 180×180; o iOS reduz para contextos menores e — isso surpreende — arredonda os cantos sozinho e pode adicionar um fundo. Envie uma imagem quadrada com fundo opaco; regiões transparentes serão compostas sobre preto em versões antigas do iOS.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
O arquivo também é buscado por padrão em /apple-touch-icon.png mesmo sem a tag, mesma convenção do favicon.ico.
Android e Chrome: 192 e 512 via manifest
O Chrome no Android lê os ícones do web app manifest. Dois tamanhos importam: 192×192 para o ícone da tela de início e 512×512 para splash screens e prompts de instalação.
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Referencie o manifest uma vez nas suas páginas:
<link rel="manifest" href="/site.webmanifest" />
Favicons SVG: promissores, ainda não suficientes
Um favicon SVG escala de um único arquivo para todo contexto, e Chromium e Firefox o suportam há anos:
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
O resistente é o Safari, que ainda ignora favicons SVG — seu único mecanismo parecido é o mask-icon, um SVG monocromático para abas fixadas com cor de tema:
<link rel="mask-icon" href="/icon-mask.svg" color="#1a1a1a" />
SVG é um ótimo aprimoramento progressivo em camadas sobre o ICO e os PNGs. Ainda não é um substituto.
A configuração completa do head
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
Seis arquivos, seis linhas, todo contexto coberto. O sizes="any" na linha do ICO avisa aos navegadores que o contêiner guarda várias resoluções, para que escolham em vez de assumir 16×16.
Gerando os arquivos
Comece de uma fonte quadrada com 512×512 ou mais, depois: PNG para ICO ou WebP para ICO para o contêiner, PNGs redimensionados para 180/192/512, e o manifest ligado à mão. O fluxo completo do logotipo cru ao ícone publicado está em como criar um favicon. Tudo nos conversores roda localmente no seu navegador — o único upload envolvido é você subindo os arquivos para o seu próprio servidor.
