Algumas palavras de agradecimento nunca são demais.

Favicon: o ícone do seu site na barra de endereço

Última modificação: 30 de setembro de 2019 às 11:58 por Bruna de França.

O Favicon é um ícone que fica na barra de endereços do seu navegador, que pode ser a logomarca da sua empresa ou serviço. Veja aqui como criá-lo.

Como criar o Favicon
- Formato e dimensões
Criar logo e Favicon para seu site
Como colocar o Favicon online
Se seu ícone for animado (GIF)
Observação

Você já reparou na presença de um ícone, acima do URL, na aba do navegador? Ele se chama Favicon e é muito simples instalá-lo no seu próprio site.

Como criar o Favicon

Você pode criá-lo com um software de desenho (Gimp, ou Pixlr, por exemplo), com software especializado (IconEdit32 ou IconWare) ou um website que transforme uma imagem em Favicon:

FavIcon from Pics (em inglês);
FavIcon generator (em inglês);
Favikon (em inglês).

Peguemos como exepmo a primeira ferramenta. Nela você pode criar um Favicon a partir de uma imagem do PC. Na página inicial, clique no botão Escolher arquivo, selecione a imagem desejada e clique em Generate Favicon.ico.

O ícone será criado e você terá algumas opções para personalizá-lo. É possível adicionar o texto que aparecerá depois do Favicon, criar um ícone animado, aditar cor de fundo, etc.

Agora, basta baixar o arquivo zipado no seu computador. Depois de descompactar o arquivo baixado, copie o arquivo favicon.ico no seu site. Se você baixou um ícone animado, o arquivo ZIP também vai ter uma pasta extra, com o seu favicon animado. Se for o caso, copie animated_favicon1.gif no seu site.

Formato e dimensões

Para a maioria dos navegadores, opte por uma imagem no formato PNG ou GIF (outros formatos também podem ser aceito). Você também pode escolher diferentes tamanhos, como 16x16 ou 32x32, medidas em pixels.

Como sempre, o Internet Explorer possui padrões diferentes dos demais navegadores e não os formatos mais comuns. Para esse navegador, use uma imagem ou formato ICO (ou BMP) no tamanho 16x16.

Criar logo e Favicon para seu site

Em geral, o Favicon guarda relação com a logomarca da sua empresa ou do serviço oferecido por você. Caso ainda não tenha um logo, a plataforma Logaster oferece a criação gratuita de logomarca e, na sequência, sugere diversas opções de Favicons que tenham semelhanças com o logo criado. Assim, você pode escolher uma das alternativas e promover alterações, como a combinação de cores, por exemplo.

A logomarca criada pode ser baixada de graça em baixa resolução. Para obtê-la em alta resolução e alguns outros benefícios, o serviço é pago. Não é preciso baixar o logo criado caso seu objetivo seja obter apenas o Favicon.

Como colocar o Favicon online

Depois disso, você deverá colocar o Favicon no seu site e indicar o caminho com o link nas tags do cabeçalho head. Veja um exemplo com uma imagem no formato PNG:

<link rel="icon" type="imagem/png" href="/imagens/meufavicon.png" />

Dependendo do formato, o atributo tipo mudará:

Formato PNG: imagem/png;
Formato GIF : imagem/gif;
Formato JPEG (extensão JPG ou JPEG): imagem/jpeg.

Se você tiver um ícone que não respeita os padrões, o atributo rel também muda:

<link rel = "shortcut icon" type = "imagem/x-icon" href = "/imagens/icone_ie.ico"/>

Também é possível colocar um arquivo favicon.ico na raiz da página, para que alguns navegadores o usem automaticamente, mas isso não é padrão.

Se seu ícone for animado (GIF)

Insira a seguinte tag:

<link rel="icon" href="/imagens/animated_favicon1.gif" type="imagem/gif">

Observação

Se você usar um ícone com formato padrão e um outro com formato ICO, evite colocar este último na raiz, os navegadores só irão exibi-los se não encontrarem a imagem PNG.

Foto: © John Schnobrich - Unsplash.