layout Camila Fiori

Favicon: um ícone para o seu blog

Favicon 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
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 16×16 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 16×16 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 16×16 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 é 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.

Sobre o autor | Website

Apaixonada por comunicação. Formada em Jornalismo e blogueira por Hobbie. Atual responsável por este e vários outros blogs de Internet Marketing.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

143 Comentários

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.