Gerar favicons

Por que um ícone virou nove arquivos

Cada arquivo do conjunto existe porque algo específico o lê e não lê mais nada. O favicon.ico com 16, 32 e 48 ainda é o que o navegador procura por padrão na raiz do site, e o que muito software antigo verifica primeiro. favicon-16x16.png e favicon-32x32.png são o que os navegadores atuais preferem para a aba, porque um PNG no tamanho exato é melhor do que um redimensionado. O apple-touch-icon.png de 180 pixels é o que o iOS coloca na tela inicial — sem suporte a transparência, por isso ele é aplicado sobre um fundo sólido em vez de chegar com cantos pretos. android-chrome-192x192.png e 512x512.png são o que um progressive web app instalado usa como ícone no launcher e na tela de abertura, declarados no site.webmanifest.

Servir um único PNG grande para todos funciona mal em todo lugar e é o atalho mais comum. O navegador baixa meio megabyte para desenhar dezesseis pixels, o iOS ignora as regras de transparência e coloca seu logotipo em um quadrado preto, e o ícone do launcher é cortado pela máscara que a plataforma aplica. O conjunto é trabalhoso justamente porque cada consumidor tem suas exigências.

O trecho de HTML importa tanto quanto as imagens. Os navegadores não encontram a maioria desses arquivos sozinhos — só o favicon.ico na raiz é achado por convenção —, então são as tags link que fazem a conexão, e o manifest precisa da sua própria. O trecho usa caminhos relativos à raiz, que funcionam sem alterações desde que os arquivos fiquem na raiz do site; se você colocá-los em uma subpasta, os caminhos no trecho e no manifest precisam ser ajustados.

Pense primeiro nos 16 pixels. Nesse tamanho cabe uma forma e talvez duas cores — sem texto, sem degradê, sem detalhes finos e, com certeza, sem o logotipo escrito por extenso. Uma imagem quadrada, marcante e de alto contraste, com pelo menos 512 pixels, ou um SVG, gera o conjunto mais limpo; a pré-visualização mostra a versão de 16 px com honestidade, sem maquiagem, porque é ela que vai decepcionar você depois. Imagens que não são quadradas recebem margens transparentes até ficarem quadradas, sem ser recortadas nem esticadas.

Quando você precisa de outra coisa

O conjunto gerado aqui é o núcleo prático moderno. Se você precisa de toda a cauda longa — imagens de bloco do Windows, o ícone de máscara para abas fixadas do Safari, o browserconfig da Microsoft, os tamanhos antigos da Apple —, o RealFaviconGenerator cobre tudo isso e ainda verifica seu site publicado depois, algo realmente útil que esta ferramenta não consegue fazer.

Em um pipeline de build, gerar ícones à mão é simplesmente o tipo errado de trabalho. favicons, pwa-asset-generator e os plugins de frameworks baseados em sharp produzem o conjunto inteiro a partir de um arquivo de origem a cada deploy, então os ícones não ficam desatualizados quando o logotipo muda — o que, na prática, sempre acontece.