10 de fev de 2010

Favicon: um ícone para o seu blog
Peterson Flores12:00 1 comentários


FaviconPara 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 meu outro blog, o TD Séries. Abaixo está o resultado desse recurso nos 3 browsers mais populares:
Microsoft Internet Explorer
Favicon Internet Explorer
Mozilla Firefox
Favicon Firefox
Google Chrome
Favicon 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 (BloggerIco).
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:
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. Esta foi a opção que adorei. 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:
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 é ohttp://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:
Agora, falta apenas alterar o HTML do template do seu blog e adicionar a linha abaixo logo  depois do ,  depois altere o texto em vermelho pelo endereço de seu favicon:
Pronto! A partir de agora, quem acessar seu blog já verá o seu favicon.
Créditos: Gerenciando Blog
Categoria:
Peterson Flores Blogueiro apaixonado por Deus e pela Vida. Apenas Alguém querendo encontrar a minha própria estrada pra trilhar... Facebook ou Twitter

Um comentário:

Obrigado por comentar em nossa matéria. Infelizmente por causa de pessoas mal intencionadas resolvi moderar os comentários. Logo, logo ele estará disponível aqui. ;)