Menu

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

USESDEFRITBR
Faça uma pergunta
Você já reparou na presença de um ícone, à esquerda do URL, na barra de endereços do seu navegador em certos sites? 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, Pixia, etc.); com um 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).

Como 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ê. Por conta disso, a plataforma Logaster oferece a criação gratuita de uma logomarca para seu website e, na sequência, sugere diversas opções de Favicons que tenham semelhanças com a logo criada. Assim, você pode escolher uma das alternativas e promover algumas 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 a logomarca criada caso seu objetivo seja obter apenas o Favicon.

Para a maioria dos navegadores

Para começar, crie uma imagem no formato PNG ou GIF (usar formatos padrão). Também podemos usar formatos mais raros (veja o link no final da página). Você também pode escolher diferentes tamanhos, como 16x16 ou 32x32 (em pixels).

No Internet Explorer

Como sempre, o IE não respeita os padrões e não utiliza as imagens com o formato correto. Para este navegador, use uma imagem ou formato ICO (ou BMP) e no tamanho 16x16.

Para criar um Favicon animado ou apenas um arquivo ICO

Esta ferramenta ajudará a criar facilmente um arquivo ICO, bem como animar seu Favicon. Clique no botão Percorrer e escolha uma imagem do seu computador. Você também pode adicionar o texto que aparecerá depois do ícone, o que criará automaticamente um ícone animado.

Para terminar, também é possível gerar um ícone animado sem texto, marcando a caixa Animated Favicon. Valide e clique no botão Generate Favicon.ico (Gerar Favicon.ico) para ter uma visão geral do seu Favicon.

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.

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. Vejamos 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: © Pixabay.
Jean-François Pillou

Jean-François Pillou - Fundador do CCM
Mais conhecido como Jeff, Jean-François Pillou é o fundador do CommentCaMarche.net. Ele também é CEO do CCM Benchmark e diretor digital do Grupo Figaro.

Mais informações sobre a equipe do CCM

Veja também