Crie um favicon para seu site

FavIcon é o acrônimo para Favorite Icon, palavras em inglês que podem ser traduzidas como Ícone para Favoritos.
Trata-se daquela pequena imagem (de dimensões 16 x 16px) que você vê na barra de endereços do navegador e colocada a esquerda do endereço do site e que também aparece na sua relação de favoritos quando você acresenta o site nos seus arquivos para favoritos. Se você olhar para a barra de endereços do seu navegador vai perceber que existe um favicon para o Blog do Maujor que na data que este post foi escrito é um quadrado na cor verde contendo uma letra M.

Criar um favicon para seu site ou blog é muito simples e compreende basicamente duas etapas:

1. Gerar a imagem
2. Colocar o favicon no HTML

Gerar a imagem

A pequena imagem de 16 x 16px do favicon é um arquivo com extensão .ico. Se o seu editor de imagens for capaz de salvar a imagem como ícone (com a extensão .ico) ótimo, você pode pular esta etapa. Contudo, os editores de imagens mais usados, como Fireworks, PhotoShop, Gimp, Corel, etc. não são capazes de salvar imagens como ícones (me corrijam por favor se algum destes editores for capaz).

Então terei que me virar em um editor de imagens para ícones?
Não, felizmente existem inúmeras ferramentas na Web que geram favicons online e você poderá usar uma delas.

[php_everywhere]

Vou conduzir esta matéria baseado no gerador de favicons online do site da HTML-Kit que considero bastante simples e versátil além de oferecer possibilidades de criação de favicons animados e combinações de imagens com textos.

A sua primeira providência será desenhar o ícone com dimensões de 16 x 16px, no seu programa editor de imagens preferido e salvá-lo no HD com extensão GIF ou JPG.
Abra no navegador, o gerador de favicons online do site da HTML-Kit e você verá uma tela, cuja parte que interessa mostro a seguir:

Clique o botão para escolher o arquivo de imagem para o qual você pretende criar o favicon e esta ação fará com se abra uma janela popup com a árvore do seu HD. Vá até o arquivo do ícone que você criou conforme explicado acima, marque-o e clique “Abrir” na janela popup. A janela fecha e o endereço do ícone no seu HD aparece ao lado do botão da escolha. Clique o botão para gerar o favicon e pronto. Está gerado seu favicon que será mostrado em nova tela contendo a visualização do seu favicon e várias outras opções para personalizar (explore a tela á vontade).
Faça o download do favicon para seu HD clicando um link para download do Favicon e o favicon será gravado na sua pasta padrão de downloads ou seja lá onde você escolher, como arquivo zipado. Descompacte o arquivo e você terá um arquivo nomeado favicon.ico. Mova este arquivo para o diretório raiz do seu site ou blog e faça upload para o servidor.

Colocar o favicon no HTML

O código HTML que faz funcionar o favicon deverá ser inserido na seção HEAD da página. Se você usa um template que inclui a seção HEAD via script em todas as páginas do site ótimo, basta acresentar a marcação em um só arquivo. Mas, se suas páginas são estáticas você terá que acresentar a marcação em cada página onde você quer que apareça o favicon.

Acresente a seguinte marcação na seção HEAD do seu HTML

<link rel="shortcut icon" href="http://www.seusite.com.br/favicon.ico" type="image/x-icon" />

Pronto! Você agora tem um favicon no seu site.

Nota: Você não é obrigado a usar o nome favicon para seu arquivo e poderá renomeá-lo para o nome a sua escolha.
Mas atenção, não esqueça de renomear não só a imagem como também o link na marcação HTML. 🙂

Conclusão

A não ser que você tenha uma boa justificativa para usar um favicon animado (por exemplo: o cliente que está pagando pelos seu serviços exige uma animação apesar de você ter tentado de todas as maneiras demovê-lo desta péssima idéia) recomendo vivamente não usar animação. Afinal é horrível para o usuário estar em uma página sendo obrigado a aturar aquela imagenzinha chata se mexendo sem parar.

Isto é tudo o que você precisa saber para gerar seu favicon personalizado. Se você não gostou da ferramenta faça uma busca no Google por “favicon” que será indicado uma grande quantidade de links para geradores de favicon online.