Pesquisar «tamanho favicon» ainda devolve listas de quinze ficheiros herdadas de 2014. Na prática, seis dimensões bastam hoje para abranger separadores, resultados de pesquisa, iOS, Android e PWA. Saiba quais e porquê.
Tabela dos tamanhos a gerar
Cada linha corresponde a uma utilização documentada do pacote proposto. A tabela privilegia um conjunto pequeno e interoperável em vez de uma coleção de variantes antigas.
| Ficheiro | Dimensões | Para que serve |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Separadores, favoritos, navegadores antigos, robôs de indexação |
| favicon.svg | vetorial, quadrado | Navegadores modernos, nítido em todos os tamanhos, suporta o modo escuro |
| favicon-96x96.png | 96×96 | Resultados de pesquisa Google em dispositivos móveis |
| apple-touch-icon.png | 180×180 | Ecrã principal iOS e iPadOS, sem transparência |
| web-app-manifest-192x192.png | 192×192 | Ecrã principal Android, declarado no manifesto web |
| web-app-manifest-512x512.png | 512×512 | Ecrã de arranque das PWA, versão «maskable» |
Porquê 16, 32 e 48 no mesmo .ico
O formato ICO é um contentor: um único ficheiro pode incluir várias imagens, e o navegador escolhe a que corresponde à apresentação. É exatamente o que se pretende, pois o contexto altera o tamanho necessário.
16×16 serve para o separador num ecrã normal. 32×32 oferece uma variante para ecrãs de alta densidade e outras interfaces do navegador. 48×48 completa o contentor e também respeita o múltiplo de 48 pedido pelo Google para os favicons dos resultados de pesquisa.
Gerar um .ico que só contém 16×16 é o erro mais frequente: num ecrã Retina, o ícone é ampliado e fica sempre desfocado.
180×180 para iOS, 192 e 512 para Android
O iOS não lê o manifesto web para obter o ícone do ecrã principal: procura uma etiqueta apple-touch-icon. Basta um tamanho, 180×180, que abrange todos os iPhone e iPad recentes. O próprio sistema reduz a imagem para dispositivos mais antigos.
O Android usa o manifesto web. Bastam duas entradas: 192×192 para o ícone do ecrã principal e 512×512 para o ecrã de arranque quando o site é instalado como aplicação. A versão de 512 deve ser declarada com purpose «maskable», ou seja, desenhada para permitir um recorte circular ou quadrado com cantos arredondados.
Num ícone maskable, mantenha o essencial do desenho nos 80% centrais. Tudo o que ultrapassar essa zona pode ser cortado, consoante o fabricante do telemóvel.
Que imagem de origem usar
O melhor ponto de partida é um SVG: pode ser redimensionado sem perda para todos os tamanhos acima. Em alternativa, use um PNG quadrado com pelo menos 512×512 píxeis, para que até o ícone de arranque Android seja gerado por redução, nunca por ampliação.
Um logótipo horizontal com texto não funciona em 16×16: nesse tamanho, uma palavra torna-se uma mancha com três píxeis de altura. Extraia o símbolo ou recomece com uma ou duas letras sobre um fundo contrastante.
Por fim, verifique o contraste sobre fundos claros e escuros: um logótipo preto desaparece num separador com tema escuro. É precisamente este problema que a variante escura do favicon SVG resolve.
Os tamanhos de que já não precisa
Os geradores antigos ainda produzem ficheiros para integrações históricas, como os mosaicos Windows com mstile-150x150.png e browserconfig.xml. Acrescente-os apenas se os seus requisitos de compatibilidade incluírem expressamente estas interfaces.
A longa série apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 e 152x152 vem de uma época em que o iOS não sabia redimensionar. Uma única imagem de 180×180 substitui todas elas.
Remover declarações sem utilização simplifica o repositório e o HTML. Ainda assim, verifique os navegadores e plataformas que pretende suportar antes de eliminar uma integração existente.
Fontes primárias
Perguntas frequentes
Ainda é preciso um favicon.ico?
Sim, mas apenas na raiz do site. Os navegadores modernos preferem SVG, mas muitos robôs, agregadores e clientes de correio ainda pedem /favicon.ico sem ler o HTML. O ficheiro ocupa poucos quilobytes: mantenha-o.
Que tamanho deve ter o favicon nos resultados Google?
O Google pede um ícone cujo lado seja um múltiplo de 48 píxeis e apresenta geralmente 48×48. Um PNG de 96×96 ou um SVG resolve facilmente. O ícone deve estar acessível aos robôs e não pode ser bloqueado pelo robots.txt.
O meu favicon pode ser retangular?
Tecnicamente sim, visualmente não. Todos os contextos de apresentação reservam um quadrado: uma imagem retangular ficará deformada ou centrada com faixas vazias. Comece sempre com um quadrado, acrescentando margens à volta do símbolo se necessário.