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 meu 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:
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:
- 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:
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://gerenciandoblog.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.
115 comentários:
Os comentários são muito bem vindos e importantes para o Gerenciando Blog, pois enriquecem o conteúdo dos artigos. Há pequenas regras na Política de Comentários que devem ser seguidas para que seu comentário seja publicado.
IMPORTANTE: Para fins de teste, os links para as URLs dos comentaristas voltarão a ser "nofollow" temporariamente.