Como adicionar um Favicon ao seu site

Publicado: 02/07/2014 em Programação, Serviços IP
Tags:,

1. Introdução
Um favicon (palavra derivada de “favorite” e “icon”) é uma pequena imagem gráfica (icon) com cerca de 16×16 (ou 32×32) pixels, armazenado em uma pasta do servidor de páginas para ser visualizado através do navegador quando o site for carregado. Pode-se definir um “icon” como um pequeno ícone dando uma dica visual de identificação de um Web site ou um conjunto de Web pages. Em navegadores como o Firefox, Iceweasel e Chrome, os favicons podem ser encontrados nas abas e nos favoritos.

2. Método para especificar que uma imagem é para ser usada como um favicon
Originalmente, o arquivo favicon era colocado na pasta raiz (“root”) do site. Mas depois que o W3C padronizou o uso do favicon isso deixou de ser verdade.

Essa padronização do uso do favicon pelo W3C veio através da recomendação HTML 4.01 (dezembro de 1999), e posteriormente através da recomendação XHTML 1.0 (janeiro de 2000). O padrão estipula a obrigatoriedade do uso do elemento “link” com um atributo “rel” na seção do documento, de forma a especificar o formato do arquivo, seu nome e sua localização. Diferentemente do esquema original, o arquivo pode estar em qualquer diretório do Web site e ter uma imagem em um dos 3 formatos permitidos (vide abaixo).

3. A imagem do favicon
Pelo padrão W3C, o formato da imagem do arquivo favicon deve ser PNG, GIF, ou ICO.

Se desejar trabalhar no formato ICO, recomendamos a utilização do aplicativo icotool. Vale salientar que esse programa trabalha apenas com arquivos no formato png. Primeiro faça sua instalação:
# apt-get install icoutils

Para fazer a conversão de um arquivo PNG para ICO, observe o exemplo:
$ icotool -c arquivo.png -o favicon.ico

Se o arquivo PNG não tiver no tamanho recomendado, utilize o GIMP ou o comando “convert”, da suite de aplicativos ImageMagick.

4. Exemplo de especificação
Abaixo um fragmento de codigo de um arquivo HTML exemplificando uma das maneiras de se especificar o favicon:


<head>
<link rel="icon" type="image/x-icon" href="./img/meu_favicon.ico"/>
</head>

Referências:
1- Favicon-Wikipedia
2- W3C: How to Add a Favicon to your Site

Deixe um comentário, pois isto é muito motivante para continuarmos este trabalho

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s