Por que um ícone vira seis arquivos
O favicon começou em 1999 como um único favicon.ico de 16×16 que o Internet Explorer procurava na pasta raiz de um site. Desde então, cada plataforma que mostra o ícone de um site passou a pedir o próprio tamanho, e o conjunto cresceu:
- 16 px: a aba do navegador e a lista de favoritos em telas comuns.
- 32 px: abas em telas de alta densidade e a barra de tarefas do Windows quando um site é fixado.
- 48 px: atalhos na área de trabalho do Windows e algumas listagens de sites.
- 180 px: o Apple touch icon, usado quando alguém adiciona o site à tela de início de um iPhone ou iPad.
- 192 px e 512 px: ícones da tela inicial do Android e a tela de abertura de um web app instalado, declarados no web manifest.
O ZIP contém favicon.ico com os três tamanhos pequenos dentro, apple-touch-icon.png, icon-192.png, icon-512.png e um site.webmanifest que aponta para os dois ícones do Android. O arquivo recebe o nome do arquivo de origem, então logo.svg gera logo.favicon.zip.
Como o conjunto é gerado
Cada tamanho é desenhado diretamente a partir do arquivo original, num quadrado transparente próprio. Se a imagem não for quadrada, ela é redimensionada para caber e centralizada, com espaço transparente nos lados menores. Um SVG é rasterizado do zero em cada tamanho, então o ícone de 16 px recebe a mesma precisão vetorial do de 512 px; uma imagem raster é reduzida com a suavização do navegador.
O arquivo ICO guarda as três imagens como dados PNG dentro do contêiner ICO, uma variante suportada desde o Windows Vista e por todos os navegadores atuais. Ela mantém a transparência total e normalmente é muito menor que o antigo formato ICO baseado em bitmap.
Toda a renderização acontece com a Canvas API no seu navegador. São aceitas origens de até 20 MB em PNG, JPG, WebP ou SVG.
Criando um logotipo que sobrevive a 16 pixels
Em 16×16 existem só 256 pixels no total. Um logotipo detalhado vira uma mancha borrada nesse tamanho, e esse é um problema de design que nenhuma configuração de exportação resolve. O que funciona:
- Use um símbolo, não o logotipo completo. Uma letra, um monograma ou o símbolo do logotipo sem o nome.
- Formas grossas e poucas cores. Traços mais finos que cerca de 1/16 da largura desaparecem no menor tamanho.
- Preencha o quadrado. Corte as margens vazias na origem antes de gerar; um logotipo flutuando em muito espaço transparente fica minúsculo na aba.
- Confira os dois temas. As barras de abas dos navegadores podem ser claras ou escuras. Um ícone preto sobre fundo transparente some numa barra escura; um contorno claro ou uma forma de cor sólida por trás ajuda.
Se a versão de 16 px continuar confusa, pode valer a pena preparar uma origem simplificada à parte, gerar o conjunto a partir dela e manter os PNGs maiores da versão detalhada.
Peculiaridades das plataformas que vale conhecer
Apple touch icons transparentes
O iOS não mostra transparência nos ícones da tela de início; as áreas transparentes são preenchidas, normalmente com preto. Como o gerador mantém a transparência, um logotipo sobre fundo transparente ganha um quadrado escuro em volta num iPhone. Para um resultado limpo, use uma origem com cor de fundo sólida ou exporte o logotipo com o fundo antes de soltá-lo aqui.
Completando o web manifest
O site.webmanifest incluído lista só os dois ícones. Para um site que deve poder ser instalado como app, abra-o num editor de texto e acrescente pelo menos name, short_name, start_url, display (por exemplo standalone) e theme_color. Sem eles, os navegadores recorrem ao título da página e não oferecem a instalação.
Cache teimoso
Os navegadores guardam favicons em cache de forma agressiva, às vezes por dias e independentemente do cache da página. Se o ícone antigo continuar aparecendo depois que você enviar os novos arquivos, abra diretamente a URL do ícone e recarregue, ou acrescente um parâmetro de versão como ?v=2 aos links do ícone no seu HTML.
Escolhendo o arquivo de origem
Um SVG quadrado é a origem mais prática, porque é desenhado com nitidez em 512 px por menor que seja a arte original. Se você tem um logotipo vetorial em outro formato, exporte como SVG ou como PNG de pelo menos 512×512. Para um logotipo raster que só existe em tamanho pequeno, ampliá-lo antes com o ampliar imagem dá ao ícone de 512 px bordas mais limpas do que simplesmente esticar. Um logotipo com um nome largo fica melhor se for reduzido ao símbolo com o cortar imagem antes de gerar, em vez de deixá-lo encolher até virar uma linha fina no meio do quadrado.