Favicon é aquele ícone que aparece no navegador do lado do endereço do site ou blog. Tem pouca utilidade prática, mas dá uma aparência mais profissional as páginas. Seu nome origina-se da junção das palavras "favorite + icon". Colocar um favicon em um site é muito fácil, mas em um blog tem que seguir alguns procedimentos.
Blogueiro
Partindo do ponto zero, primeiro você vai precisar que o arquivo esteja no formato ICO ou GIF. Se você não tiver acesse http://www.iconj.com/ e nessa página faça o upload de qualquer imagem que esteja no seu computador que tenha menos de 1MB e o site se encarregará de gerar o seu favicon.
Ao final do upload o site gera instruções e um favicon. Observe que ele mesmo já hospedou um favicon estático para você e já disponibilizou o link também. Se quiser você pode baixá-lo para o seu computador e hospedá-lo em outro lugar, basta clicar em 'Click here to download your Favicon.ico File'.
Agora se você é um pouco mais exigente e quer um favicon animado acesse http://www.animatedfavicon.com/, faça o upload da sua imagem e se quiser, pode acrescentar um texto que aparecerá na animação.
Depois de clicar em 'Create FavIcon' a página vai recarregar e um pouco mais abaixo terá uma opção - 'Get It Now' - para você clicar e baixar um arquivo compactado contendo os favicons que foram gerados.
Esse site só cria, não hospeda, então você terá que achar um servidor para elas, mas o bom é que ele gera um arquivo em formato PNG que você vai precisar. Quanto a hospedagem, uma opção é o site ImageShack, menos para hospedar o arquivo com extenção ICO, já que esse site não aceita esse formato. Mas isso já não é problema, porque você pode usar o arquivo ICO do servidor exemplificado acima. Faça então a hospedagem dos demais. Na hora de fazer o upload do arquivo com a extenção PNG, faça do que tem dimensões 16x16 já que o outro não será necessário.
Veja na imagem acima que depois que é hospedada no ImageShack, são apresentadas algumas informações sobre o arquivo, mas o que interessa mesmo é o link direto da imagem.
Agora vamos supor que não era nada disso que você queria. Que na verdade você já tinha um arquivo ICO pronto, mas não achou um servidor confiável para colocá-lo. Acesse http://clip2net.com e faça um cadastro.
Depois confirme pela mensagem que irá receber no email. Logo após será redirecionado para o site novamente e verá uma página como mostrado na imagem abaixo. Clique em 'Upload files via web browser' .
Na tela seguinte clique em 'Browse Files' e depois em 'Start Uploads'.
Depois de terminar o upload clique na aba 'Meus arquivos' e pare o mouse sobre o ícone de seta para baixo que estará na frente do arquivo.
Copie a URL, algo como:
<a href="http://clip2net.com/page/m45152/5814216">favicon</a>Só essa parte azul é que interessa. Cole no navegador para ir à página. Lá você vai clicar com o botão do direito mouse no link 'Baixar arquivo' e copiar o link.
Depois cole esse link em um bloco de notas e separe somente a parte que nos interessa.
http://clip2net.com/clip/m45152/1273971634-63202-4kb.ico?nocache=1De novo a parte importante é a que está em azul. Pronto, esse "cambalacho" todo foi só para hospedar a imagem e pegar o link, mas veja que esse site onde você acabou de fazer o registro tem uns recursos bem interessantes e não deve ser "jogado às traças" depois disso. Ele oferece um serviço de compartilhamento de arquivos bem útil. Mas agora vamos finalmente implementar o favicon no blog.
Favicon estático
Logue na sua conta no Blogger, vá em 'Editar HTML' em 'Layout' e faça um backup do seu template antes de começar. Depois aperte 'Ctrl+F' para abrir a caixa de pesquisa do seu navegador e digite:
]]></b:skin>Logo em seguida cole o código mostrado abaixo adaptando com os endereços onde estão hospedadas as imagens.
<link href='http://endereçodasuaimagem.ico' rel='shortcut icon'/>Veja como ficou no meu blog de testes:
<link href='http://endereçodasuaimagem.png'/>
Com isso você já terá aplicado o favicon estático ao seu blog.
Favicon animado (Não funciona no IE)
Para aplicar um favicon animado procure no código do blog por:
]]></b:skin>E logo em seguida adicione o código adaptando com o endereço da sua imagem:
<link href='http://endereçodasuaimagem.ico' rel='shortcut icon'/>Veja como ficou no meu blog de testes:
<link href='http://endereçodasuaimagem.gif' rel='icon' type='image/gif'/>
Quando você aplica esse código ao seu blog, no IE o favicon fica estático, mas no Firefox funciona normalmente.
Esse recurso é interessante principalmente se o sujeito que visitar o seu blog for como eu que adiciona "trocentos" favoritos ao navegador. Com um favicon fica muito mais fácil achar na lista dos favoritos, fora o visual mais profissional e diferenciado.
