Um favicon não é mais uma imagem – é um conjunto de pelo menos seis a dez ativos de tamanho, além de um contêiner ICO, um manifesto da web e várias linhas de HTML. Acertar todos eles é essencial para um site que pareça sofisticado nas guias do navegador, dispositivos Apple, telas iniciais do Android, blocos do menu Iniciar do Windows e telas de inicialização do PWA. As seções abaixo abordam por que os favicons modernos precisam de vários tamanhos, as diferenças entre os formatos de ícone PNG, ICO e SVG e o HTML específico e as peças de manifesto que fazem com que tudo funcione corretamente em todas as plataformas.
Por que os favicons modernos precisam de vários tamanhos
A era dos favicons de arquivo único terminou por volta de 2010, quando o iOS e o Android começaram a promover sites como cidadãos de primeira classe da tela inicial. Hoje, diferentes plataformas solicitam tamanhos diferentes para contextos diferentes, e servir o tamanho errado produz resultados visivelmente ruins – duplicação de pixels borrados em telas retina, arte cortada nas telas iniciais do iOS ou ícones totalmente ausentes nos blocos do menu Iniciar do Windows. A cobertura mínima definida para um site moderno: 16 × 16 para guias do navegador (o caso de uso original do favicon), 32 × 32 para marcadores do navegador e guias retina, 48 × 48 para atalhos da área de trabalho do Windows, 180 × 180 para telas iniciais do iOS (ícone do Apple Touch, cortado automaticamente em um quadrado arredondado), 192 × 192 para telas iniciais do Android (não cortadas, use fundos transparentes ou sólidos intencionalmente) e 512×512 para telas iniciais do PWA na primeira inicialização. Cada tamanho é um arquivo PNG independente, em vez de uma única imagem dimensionada - em 16x16, a reamostragem padrão do navegador produz ícones suaves e pastosos que não são lidos corretamente. Esta ferramenta gera todos os tamanhos como um PNG independente; como a API do Canvas faz uma nova amostra automaticamente de cada destino, a arte de origem simples e de alto contraste é especialmente útil nos tamanhos menores. O custo é de algumas dezenas de kilobytes de recursos adicionais, o que é insignificante em comparação com a melhoria visual.
PNG vs ICO vs SVG: quando usar qual
Três formatos de favicon coexistem em navegadores modernos, e cada um tem casos de uso específicos que são importantes para uma implementação completa. PNG é a escolha moderna padrão: ele suporta transparência, é renderizado universalmente e os navegadores podem selecionar entre várias tags `` em tamanhos diferentes. Use PNG para cada ícone por tamanho em seu HTML. ICO é um formato legado que agrupa vários tamanhos em um arquivo contêiner e continua importante por um motivo específico: os navegadores solicitam automaticamente `/favicon.ico` na raiz do site, independentemente de você incluir uma tag `` em seu HTML. Coloque um ICO de vários tamanhos contendo imagens 16×16, 32×32 e 48×48 na raiz do seu site como um substituto definitivo para que mesmo as páginas que não incluem links de favicon ainda obtenham um ícone adequado. Os favicons SVG são uma adição mais recente (o Chrome os suportou em 2021) que teoricamente resolve o dimensionamento de vários tamanhos fornecendo gráficos vetoriais - mas o suporte SVG em navegadores ainda é inconsistente para renderização de ícones, e o iOS Safari em particular ainda não os suporta. Use SVG como um aprimoramento opcional por meio de uma tag de link `type="image/svg+xml"`, mas sempre envie PNGs e um ICO como conjunto canônico. Prática recomendada: use PNG para seu conjunto principal de favicons, inclua um favicon.ico na raiz para substituto legado e sem marcação e, opcionalmente, adicione SVG como aprimoramento progressivo para navegadores que o suportam.
As peças HTML e de manifesto que unem tudo
Os ícones gerados são inúteis sem o HTML correto e as tags de manifesto apontando os navegadores para eles. O bloco HTML mínimo para cobertura completa: `` e semelhante para outros tamanhos, `` para telas iniciais do iOS, `` para o manifesto do aplicativo da web e `
` mais `` para blocos do Windows. Esta ferramenta gera tudo isso na guia Snippet HTML para que você possa colar o bloco completo diretamente no cabeçalho da página. O arquivo `site.webmanifest` em si é um documento JSON com campos para nome do aplicativo, short_name (para ícones com espaço de texto limitado), matriz de ícones (caminhos + tamanhos + tipos MIME), theme_color (influencia o cromo da interface do usuário do navegador), background_color (usado na tela inicial do PWA), display (`"autônomo"` para aparência semelhante ao PWA) e start_url. Sem este manifesto, o Chrome no Android não oferecerá o prompt de instalação do PWA “Adicionar à tela inicial” com seu ícone personalizado – ele retornará ao padrão do navegador. A guia Manifesto nesta ferramenta gera automaticamente um manifesto correto a partir do seu conjunto de ícones e opções de design.