Favicon: um ícone para o seu blog

Para quem desconhece o termo, "favicon” (abreviatura para “favorite icon”) é a imagem que aparece na barra de título ou na aba do browser quando você visita um site. Neste artigo, vou mostrar que é muito fácil criar um favicon para o seu blog. É uma melhoria simples e interessante a ser feita, que melhorará o visual do seu blog e chamará a atenção dos seus visitantes.

O que é o favicon?

Se você ainda não sabe do que estou falando, note o ícone que está na barra superior do seu browser enquanto você lê este artigo. Você verá as letras “GB” antes do título “Gerenciando Blog”. O mesmo já está configurado em outro blog, o TD Séries. Abaixo está o resultado desse recurso nos 3 browsers mais populares:

Microsoft Internet Explorer

Mozilla Firefox

Google Chrome

Este assunto não é novidade, mas notei que a grande maioria dos blogs ainda não fazem uso dos favicons. Por isso, ao visitar os blogs, normalmente aparece o ícone do Blogger  na barra do browser ().

O favicon é uma imagem pequena, no tamanho de 16x16 pixels e normalmente no formato “.ICO” (de ícone). Há ainda outras possibilidades: há browsers que conseguem mostrar favicons animados e mesmo em outros formatos (GIF ou PNG). Mas, vou descrever aqui somente o processo utilizando o arquivo “.ICO”, que funciona perfeitamente para os três browsers que citei acima.

Como posso obter um favicon para meu blog?

Há 3 alternativas para você obter um favicon. Vou citá-las abaixo, começando da mais simples e indo até a mais complexa.

1. Utilizar um favicon pronto Existem diversos sites em que é possível encontrar favicons prontos. Neste caso, basta visitar um desses sites e escolher um para seu site. Há milhares de opções diferentes! Alguns desses sites:

• http://www.favicon.cc/?action=icon_list&order_by_rating=1
• http://www.favicon.co.uk/gallery.php
• http://thefavicongallery.com

Se você se decidir por um desses arquivos, salve-o em seu computador. Basta clicar com o botão direito do mouse sobre ele e escolher a opção para salvar a imagem.

2. Converter uma imagem existente Você pode também utilizar uma imagem já existente para criar o seu favicon.  Isso é útil caso você já tenha um logotipo ou avatar que identifique seu blog. Ficam com um melhor resultado imagens quadradas e que possuam bom contraste. Essas características garantem que a imagem continuará legível quando for redimensionada para 16x16 pixels.

Existem sites na internet que fazem a conversão de maneira bastante simples. O mais simples que encontrei é o http://www.favicon.co.uk. Basta escolher em seu computador o arquivo com a imagem original, selecionar o tamanho 16x16 e clicar em “Generate Favicon”. O processo é praticamente instantâneo e o favicon é exibido para download.

Outras opções:

• http://www.prodraw.net/favicon – A diferença é que este site mostra algumas opções de imagens geradas para você escolher o que ficou com melhor qualidade.
• http://www.dagondesign.com/tools/favicon-generator-tool – Outra ferramenta bastante simples.
• http://www.html-kit.com/favicon – Este site permite opções adicionais após a criação do favicon, como adicionar borda, texto e animação.

Como na opção anterior, salve em seu computador o favicon gerado.

3. Criar seu próprio favicon Esta última opção é para quem quer criar o seu favicon de forma manual. Pessoalmente, acho mais prático você desenhar seu favicon em formato grande e quadrado em qualquer editor de imagens e utilizar a conversão indicada no item anterior.

Mas, se você quiser criar seu favicon do zero, uma boa alternativa é o http://www.favicon.cc. Nele você pode desenhar seu favicon pixel a pixel. Pode também importar uma imagem e fazer online os ajustes necessários. A ferramenta permite também criar um favicon animado.

Novamente, salve o resultado final em seu computador.

Como adicionar o favicon ao meu blog?

Agora, com seu favicon criado, faltam apenas dois passos: hospedá-lo na internet e associá-lo ao seu site.

O primeiro passo é colocar seu favicon em algum provedor de arquivos. Há diversas opções para hospedagem. Você deve fazer o upload de sua imagem e copiar o caminho dela. Para o formato tradicional (.ICO), como expliquei aqui, não há muitas opções. Eu gosto muito do Webs.com porque a imagem fica com um nome “amigável” e é possível substituí-la posteriormente, sem alterar o endereço do link. Outras opções grátis:

• ImageBoo
• DropBox
• 110mb
• BraveNet
• 50Megs

Agora, falta apenas alterar o HTML do template do seu blog e adicionar a linha abaixo logo antes do </head>, alterando o texto em vermelho pelo endereço de seu favicon:

<link href='http://ibazing,webs.com/LogoGB16x16.ico' rel='shortcut icon' type='image/x-icon'/>

Pronto! A partir de agora, quem acessar seu blog já verá o seu favicon.

 Fontes : http://www.gerenciandoblog.com.br

Posted in: dicas, tecnologia