Transforme o seu logótipo em favicon.ico e num conjunto completo de ícones

O favicon é o ícone do site que o navegador desenha no separador, junto ao título da página, na barra de marcadores e no histórico. A definição enciclopédica descreve-o como o ícone que surge antes do endereço na barra de endereços ou no separador de uma página aberta [1]. No separador dispõe de um lado com pouco mais de uma dezena de píxeis, ou seja, menos espaço do que ocupa uma única letra desta frase.

O apple-touch-icon é essa mesma imagem preparada para o iPhone e o iPad. Chega ao ecrã principal quando alguém guarda o seu site como atalho. O seu lado mede 180 píxeis, porque o sistema o desenha num tamanho próximo do de uma aplicação normal.

Os dois maiores ícones do conjunto, de 192 e 512 píxeis, servem as aplicações web. O Android recorre a eles ao criar um atalho e durante a instalação, e encontra-os através do ficheiro de manifesto, isto é, do documento no qual um site declara o seu nome, as suas cores e precisamente essa lista de ícones [2].

Carregue o logótipo no campo Adicionar imagem base, clique em Gerar favicon e transfira seis ficheiros: favicon.ico e os ícones PNG com lados de 16, 32, 180, 192 e 512 píxeis. A imagem é processada pelo navegador no seu próprio computador, e os ficheiros terminados são guardados diretamente no disco.

O ficheiro favicon.ico é aqui mais do que uma única imagem. O formato ICO é um recipiente para várias versões do mesmo desenho, e o gerador coloca três lá dentro: 16, 32 e 48 píxeis. O navegador ou o sistema escolhe do ficheiro o tamanho adequado ao lugar onde vai desenhar o ícone. O separador do navegador recorre ao mais pequeno e o atalho no ambiente de trabalho a um maior.

Os nomes dos ficheiros correspondem ao que os modelos de sites e as documentações procuram: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png e android-chrome-512x512.png. Coloque-os no servidor tal como saem do gerador.

Hoje o ícone em formato SVG funciona nos navegadores de computador: o Chrome e o Edge leem-no a partir da versão 80 e o Firefox a partir da 41. No iPhone e no iPad, o Safari fá-lo a partir da versão 26 [5]. Por isso o SVG rende melhor como complemento do conjunto, ao lado dos ficheiros ICO e PNG.

A Google lê o favicon dos resultados da pesquisa a partir de ficheiros ICO, PNG, JPEG, GIF, BMP, TIFF e PPM [3]. O conjunto deste gerador entra duas vezes nessa lista: uma com o favicon.ico, outra com os ícones PNG. Se já tem o seu próprio ficheiro SVG, mantenha-o na secção head ao lado deles — assim cada um destes lugares encontra um formato que consegue ler.

A Google mostra o ícone do site ao lado do respetivo nome nos resultados, tanto no telemóvel como no computador. Para o obter precisa de acesso a duas coisas: o Googlebot de imagens tem de conseguir rastrear o próprio ficheiro do ícone, e o Googlebot normal, a página inicial [3]. Mantenha por isso o diretório com o ícone fora das regras de bloqueio do ficheiro robots.txt.

Depois de substituir o ficheiro é preciso alguma paciência: a documentação diz claramente que voltar a rastreá-lo demora de alguns dias a algumas semanas [3]. A Google assinala ainda que a presença do favicon nos resultados depende da sua decisão, mesmo quando todas as diretrizes estão cumpridas.

O próprio ícone pertence à camada de apresentação do resultado, e é assim que a documentação do motor de pesquisa o descreve. Onde atua realmente é no reconhecimento: na coluna de resultados e entre uma dezena de separadores abertos, é muitas vezes o único elemento de cor pelo qual alguém distingue o seu site dos restantes.