Como ter um favicon em seu blog (atualizado)

Atualização ao final do post, tá?

Então que nem só de bugs/panes/tilts vive o Blogger…

Semana passada foi lançada uma novidade (que nem é tão novidade assim) que vai simplificar muito a vida de quem deseja ter um favicon personalizado em seu blog: agora há suporte do Blogger para este tipo de arquivo e sua inserção ficou extremamente simples.

Mas vamos por partes, né? Pra começar:

O que é favicon?

Favicon é a junção de favorite + icon e é o termo que designa aquele pequeno ícone que aparece na janela do seu navegador. Por padrão o favicon dos blogs hospedados no Blogger é este:

Comum e nada personalizado, né? Mas muitos blogs possuem um ícone personalizado (neste momento meu favicon é uma borboleta, veja lá) e inserir um no blog requeria uma certa gambiarra técnica que nem todo mundo conseguia realizar.

Mas agora tudo ficou fácil. Basta ter uma imagem em formato .ico e inserir em seu blog via Design.

Se você ainda não tem o seu, siga o passo a passo e divirta-se!

Para começar você precisa ter uma imagem sem muitos detalhes que seja em formato .ico. E aí a coisa complica, né?

Complicaria, mas a solução está aqui: GenFavicon. Clique sobre o nome do site e você verá esta página:

Na área laranja clique em Selecionar arquivo e encontre em seu pc a imagem que deseja transformar em favicon. Pode ser em qualquer tamanho pois o site se encarrega de redimensionar para você.

Escolheu? Então clique em Subir imagem. Veja que a imagem vai aparecer na área cinza acima à direita da tela. Esta:

Utilize esta área para centralizar sua imagem.

Na área verde defina o tamanho que terá seu favicon;32x32 é um bom tamanho. A seguir clique em Captura e Previsualização.

Na área azul aparecerá seu favicon. Clique em Baixar Favicon. Ele será baixado direto para seu pc, provavelmente na pasta Dowloads. Preste atenção pois você vai precisar encontrá-lo daqui a pouco.

 

Agora vamos inserir no blog? Estando logado clique em  Design. Vai abrir esta página:

Ao lado de Favicon clique em Editar. Vai abrir uma janela. Assim:

Clique em Selecionar arquivo e encontre o favicon (a imagem em formato .ico) que você baixou anteriormente do site. Aparecendo a imagem clique em Salvar. Tá feito.

Facinho, né? E o melhor é que com este suporte do Blogger (antes tarde do nunca, né?) seu blog linkado em blogs amigos terá o seu favicon como marca registrada.

Agora mãos à obra, tá? Se fizer me conta?

 

Atualização:

Algumas pessoas relataram que o favicon não aparece. Acontece que o recurso está sendo implementado aos poucos pelo Blogger e pode acontecer de não aparecer, ou demorar.

Daí fui atrás e descobri uma gambiarra técnica que resolverá o problema e fará seu favicon aparecer sem erro.

Faça assim:

Depois de baixar seu favicon no formato .ico baixe também no formato png, lá no site GenFavicon. Daí faça a parte de inserir o favicon normalmente como expliquei acima. A seguir hospede a imagem em formato .png em um site de hospedagens de imagens como o ImageShack ou o PhotoBucket por exemplo e copie o endereço dessa imagem.

Agora abra seu blog, clique em Design e a seguir clique em Editar html. Encontre esta tag:

]]></b:skin>

Imediatamente abaixo dela cole este código, devidamente modificado com o endereço de sua imagem em formato png:

<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>

<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>

<link href='URL_DA_IMAGEM_PNG' rel='apple-touch-icon'/>

<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon' type='image/x-icon'/>

Salve. Tá pronto.

Certo?

Todos os créditos deste código pertencem ao blog Dicas Blogger.

Ah, aproveita e clica no selo de votação do Concurso conto vidas e vote em seus contos preferidos. Seu voto, além de ajudar a definir os 3 contos preferidos pelos leitores ainda concorre a um presente especial ao final da votação. Veja o post explicativo: Aberta a votação!