Tamanhos de Favicon (2025): O que incluir + boas práticas

Por que ICO + PNG + SVG

O ICO agrupa vários bitmaps para o navegador/SO escolher o tamanho mais próximo; o PNG cobre touch icons e fallbacks; o mask icon SVG garante aparência nítida em abas fixadas do Safari. Juntos, entregam compatibilidade e qualidade.

Tamanhos recomendados

• Favicon clássico: 16×16, 32×32 (ICO). Ative <em>HQ 16px</em> se seu ícone tiver traços finos.
• Desktop alta densidade: 48×48, 64×64 (ICO)
• Windows/legado: 128×128, 256×256 (ICO)
• Apple Touch: 180×180 (PNG)
• Mask icon: SVG

Exportação

Use a exportação "pacote de favicon" no IcoSmith para obter manifest, tags e PNGs automaticamente. Veja também as <a>boas práticas</a>.

Nuances Apple/Android

• Apple Touch prefere um PNG único 180×180; o iOS aplica cantos arredondados.
• Android depende do Web App Manifest; inclua ícones 192/512 <em>maskable</em> (purpose: any maskable).
• Defina theme-color para controlar a cor da barra de status.

Por que esses tamanhos?

UIs de desktop ainda exibem favicons de 16–32 px; contextos de alta densidade se beneficiam de 48–64 px. Windows e superfícies legadas consultam 128–256 px do ICO. Dispositivos Apple esperam um touch icon dedicado 180×180.

Checklist de testes

• Aba, favoritos e taskbar em Chrome/Edge/Safari/Firefox.
• Instalação na tela inicial em Android/iOS com o manifest gerado.
• Verifique cache (max‑age longo) e ausência de 404 no DevTools.

Matriz de testes

• Windows + Chrome/Edge: aba e pino na taskbar.
• macOS + Safari: aba e aba fixada (mask icon).
• Android/iOS: atalho na tela inicial (touch icon/manifest).

Tudo junto (o que publicar)

• Raiz: /favicon.ico (multi‑tamanho).
• Head: links para favicon.svg e favicon.ico; Apple Touch 180×180; manifest com PNG 192/512.
• Safari pinned tab: safari-pinned-tab.svg + theme-color.
• Cache: max‑age longo; versionar nomes (favicon-v2.ico) ao atualizar.