Como colocar favicons no Blogger

Em alguns blogs e sites você vê uma imagem ao lado do endereço da página na barra do navegador. Essas pequenas imagens são chamadas FAVICON. FAVICON é a abreviação da palavra em inglês Favorite Icon. São imagens no formato ico, que você inclui através de um código em seu template. Funciona como um pequeno logo que identifica seu blog já na barra de endereços.

Navegadores

Atualmente a maioria dos navegadores mostra o FAVICON, desde que a imgem seja no formato ICO. O Firefox também suporta outros formatos de imagem. Se o navegador não tiver suporte para o FAVICON, será mostrado o ícone do Blogger, por exemplo.

Imagem para o FAVICON

A imagem adequada para o FAVICON deve ter as dimensões 16px por 16px e ter a extensão ".ico". Você pode transformar sua imagem de outro formato e tamanho através de geradores de FAVICON.

Se utilizar outro formato, prefira imagens com fundo transparente. O tamanho precisa ser de 16px por 16px.

Hospedar a imagem

É difícil encontrar sites de hospedagem que aceitem o formato ICO. Existem duas alternativas para isso:

1. Utilizar uma imagem em outro formato e mostrar seu FAVICON apenas no Firefox;
2. Utilizar o Gerador de Favicon Icon J - Dynamic Favicon for Blogger and Webmaster. Nesse site você pode modificar sua imagem de outro tamanho e formato para o formato e tamanho adequado para um FAVICON, e ainda hospedar seu arquivo ICO. Eles já fornecem o código para você colocar em seu Blog. E você também tem a opção de escolher entre milhares de imagens prontas para FAVICON.

Colocar o código do FAVICON em seu template do Blogger

O site Icon J já fornece o código para colocar o FAVICON no Blogger. E funciona. Mas para maior segurança de que o ícone será visto em qualquer navegador, utilize o código a seguir.

Em "Editar HTML", salve uma cópia de seu template clicando em "Baixar Modelo Completo".

Depois procure pelo trecho ]]>. Cole o código entre essa tag e a tag , ficando da seguinte maneira:

]]>< /b:skin>

< !-- favicon  -->
< link href='http://endereço-da-imagem' rel='shortcut icon' type='image/x-icon'/>
< link href='http://endereço-da-imagem' rel='icon' type='image/x-icon'/>
< !-- fim favicon  -->

< /head>

Se você não utilizar o site Icon J, hospede sua imagem e utilize o mesmo código, colocando o endereço da imagem hospedada no local indicado.

Fonte: Bloggersfera