Os tamanhos de favicon hoje se resumem a cinco arquivos: um favicon.ico de 32×32, um ícone SVG, um Apple touch icon de 180×180 e dois PNGs no web app manifest, de 192×192 e 512×512, um deles maskable. Todo o resto, como ícones Apple de 57×57, blocos do Windows ou PNGs de tamanhos extras, é legado e pode ser removido.
A tabela de tamanhos
| Arquivo | Tamanho | Usado por | Observações |
|---|---|---|---|
favicon.ico | 32×32 (pode conter também 16 e 48) | Todos os navegadores, leitores de RSS, qualquer coisa que peça /favicon.ico | Mantenha na raiz do site, mesmo que o HTML declare outros ícones. |
favicon.svg | Qualquer, viewBox quadrado | Abas no Chrome, Edge e Firefox | Nítido em qualquer tamanho e pode trocar de cor no modo escuro. |
favicon-96x96.png | 96×96 | Google Search | Opcional se o Apple touch icon estiver declarado; o Google lê os dois. |
apple-touch-icon.png | 180×180 | Telas iniciais de iPhone e iPad, Google Search | Fundo opaco. O iOS arredonda os cantos sozinho. |
| Ícone do manifest | 192×192 | Tela inicial do Android | Listado em icons no web app manifest. |
| Ícone do manifest | 512×512 | Prompt de instalação, tela de abertura | Os critérios de instalação do Chrome pedem um ícone de 192 e um de 512. |
| Ícone maskable | 512×512 | Ícones adaptáveis do Android | "purpose": "maskable", logo dentro do círculo central de 80%. |
Abas do navegador: favicon.ico e SVG
Uma aba mostra o ícone com 16 pixels CSS, que são 32 pixels de dispositivo em uma tela de alta densidade. Por isso a imagem de 32×32 dentro do favicon.ico é a mais importante. Se quiser, adicione 16 e 48 ao mesmo arquivo; os navegadores escolhem a mais próxima.
Um ícone SVG cobre todos os tamanhos de uma vez. Ele também pode ter uma media query prefers-color-scheme, de modo que um logo escuro fique claro em abas escuras. Declare primeiro o ICO com sizes="32x32" e depois o SVG: os navegadores que aceitam SVG usam o SVG, os demais recorrem ao ICO.
Google Search
As diretrizes de favicon do Google pedem um ícone quadrado de pelo menos 8×8 pixels e recomendam um maior que 48×48. Os formatos aceitos são BMP, GIF, ICO, PNG, JPEG, PPM e TIFF. O SVG não está nessa lista, então um site só com SVG não dá ao Google nada que ele possa usar. O Google lê tanto rel="icon" quanto rel="apple-touch-icon", de modo que um Apple touch icon de 180×180 declarado já atende à recomendação de tamanho. Se quiser um arquivo dedicado, um PNG de 96×96 funciona.
iPhone e iPad
O iOS usa o Apple touch icon quando alguém adiciona o seu site à tela inicial. 180×180 é o tamanho dos iPhones atuais (60 pontos em escala 3×); os iPads o reduzem sem problema, então um arquivo basta. Áreas transparentes ficam pretas na tela inicial, por isso dê ao ícone um fundo sólido. Sem o ícone, o iOS usa uma captura da página ou uma letra sobre um bloco liso.
Android e web apps instaláveis
O Android e o Chrome leem os ícones do web app manifest. O ícone de 192×192 vai para a tela inicial; o de 512×512 aparece na caixa de instalação e na tela de abertura.
Um ícone maskable é uma imagem separada de 512×512 cuja arte preenche o quadrado inteiro. O Android a recorta no formato que o celular usa: círculo, squircle ou quadrado arredondado. Mantenha o logo dentro de um círculo centralizado com diâmetro de 80% da imagem e ele sobrevive a qualquer máscara. Sem um ícone maskable, o Android reduz o seu ícone comum e o coloca sobre um círculo branco.
O HTML
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">E a parte de ícones do site.webmanifest:
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Sirva o manifest como application/manifest+json e cada ícone com o seu tipo de imagem real. Um servidor que responde a /favicon.ico com uma página HTML e status 200 quebra o ícone, mesmo que a aba de rede pareça normal. Aplicações de página única costumam fazer isso.
Tamanhos que você pode descartar
- Apple touch icons de 57, 60, 72, 76, 114, 120, 144 e 152 px. O iOS reduz o de 180 px.
mstile-*.png,browserconfig.xmle as tagsmsapplication-*. Serviam aos blocos do Windows 8 e 10.- O
mask-icondo Safari. O Safari 12 e posteriores usam o favicon comum nas abas fixadas. - Links separados de PNG 16×16 e 32×32 quando o
favicon.icojá contém os dois.
Verifique o seu conjunto
O Favicon Checker baixa todos os arquivos acima do seu site, mede o tamanho e o formato reais e mostra como os ícones aparecem em abas, no Google, no iOS e no Android.