Adicionando um favicon ao seu site

Colaboração: Rubens Queiroz de Almeida

Data de Publicação: 07 de agosto de 2012

Favicon é uma abreviação para Favorite Icon. Quando nós visitamos um site, na barra de endereços, no canto esquerdo, aparece uma pequena imagem. Esta imagem é um pequeno logotipo do site:

Para a dicas-l, até hoje, eu (e mais 55 milhões de sites sobre softwarelivre) usava uma imagem de um pequeno pinguim. Eu resolvi então criar algo mais em linha com a identidade visual do site e procurei por um site que gerasse, gratuitamente, um novo favicon para mim, usando o logotipo criado para o site alguns anos atrás por Ricardo Burile.

No endereço FreeFavIcon você consegue criar seu favicon gratuitamente. Além de um favicon estático, você também tem a opção de criar uma imagem animada, que exibirá o seu logotipo e uma mensagem que ficará sendo exibida no espaço reservado ao ícone.

Basta fazer o upload da imagem e o site se encarrega de criar tudo o mais para você. Ao final do processo, você recebe instruções para baixar um arquivo zip contendo todos os arquivos:

  unzip favicon_19636e04b992329b6b381abcdc584d05.zip
  Archive:  favicon_19636e04b992329b6b381abcdc584d05.zip
  replace favicon.ico? [y]es, [n]o, [A]ll, [N]one, [r]ename: A
    inflating: favicon.ico
    inflating: readme.txt
    inflating: preview_16x16.png
    inflating: preview_32x32.png
    inflating: animated_favicon.gif

As instruções de uso estão contidas no arquivo readme.txt.

Para referenciar as imagens, basta inserir, no cabeçalho de suas páginas html as seguintes diretivas:

    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="icon" href="/animated_favicon.gif" type="image/gif" />