Como Colocar Favicon no Blogger

Primeiro vamos entender o que significa favicon.
Favicon significa Favorite Icon (Icone Favorito) e é aquela pequena imagem que aparece ao lado do endereço no navegador.
Ora o Blogger por defeito tem aquela imagem da letra B branca num fundo cor de laranja [] que muitos utilizadores, incluindo eu, não gostam muito.

NOTA: Desde que escrevi este artigo em 2009, o Blogger já passou por várias alterações em relação aos favicons, desde não ser possivel alterar o dito cujo sem fazer uma gambiarra até ser introduzirem essa opção no próprio Blogger.

---

Podem ler a seguir o que escrevi originalmente sobre como colocar favicons no blogue e agora obsoleto, mas ainda com algumas informações relevantes e úteis... ou pular para a parte actualizada mais abaixo.

Ler Artigo Obsoleto

Já existem na blogosfera e arredores muitos tutoriais ensinando como colocar um favicon personalizado no blogue mas, (tem sempre um mas) eu decidi escrever aqui como eu fiz ao fim de varias experiências de maneira a que o favicon aparecesse estável e sempre em todas as paginas e quem sabe não dê para explicar melhor a um amigo que me pediu essa explicação e até acrescentando algo novo, quem sabe. :)

Bem, então o primeiro passo é mesmo criar uma imagem em formato .ico com a dimensão de 16 por 16 pixels.

Segundo a recomendação da Rô, neste tutorial sobre os favicons, ela recomenda o IconJ como um site onde pode converter imagens de outro formato como .jpg ou .png para o formato .ico, necessário para criar o favicon personalizado.

Edit: O site IconJ já me falhou algumas vezes, recomendo como uma boa e facil alternativa o ConvertICO.

Pela minha experiência, o nome a dar ao ficheiro .ico não é muito relevante mas é recomendado que se lhe dê o nome de favicon.

A seguir temos que achar um site de alojamento de imagens que aceite esse formato, existem alguns na net mas raros são os que são de completa confiança, felizmente após alguns testes parece que agora já se pode fazer isso no Google Sites, é sempre bom manter tudo junto e nem é preciso abrir conta em sites externos já que se pode usar a nossa conta que utilizamos para o Blogue.

Recomendo que leia o artigo da Ariane, aqui, para aprender como alojar ficheiros no Google Sites e como encontrar a URL necessária para colocar o favicon personalizado no blogue.

Atenção: Entretanto, o Google encerrou o serviço do Google Sites, e a opção acima descrita pela Ariane também deixou de ser possivel!

O procedimento para alojar ficheiros .ico, neste caso o nosso favicon personalizado é o mesmo.

O passo seguinte envolve adicionar duas linhas de código no template e para isso vamos a Editar HTML e sem Expandir modelos do widget, procure pela seguinte linha de código:
<b:include data='blog' name='all-head-content'/> que se encontra logo ao principio do código.

Logo abaixo dessa linha de código, cole o seguinte:

<link href='URL-DO-SEU-FAVICON-ICO'  rel='shortcut icon' type='image/x-icon'/>
<link href='URL-DO-SEU-FAVICON-ICO'  rel='icon' type='image/x-icon'/>

Pré-Visualize e se tudo se apresentar em ordem, Salve.

Exemplo de como ficou o meu favicon:

<link href='http://sites.google.com/site/ocp221172/arquivos/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='http://sites.google.com/site/ocp221172/arquivos/favicon.ico' rel='icon' type='image/x-icon'/> 

Uma ultima nota sobre o alojamento de ficheiros no Google Sites: É Necessário definir para que o local criado para alojar os arquivos fique como Partilhado com todos os utilizadores do mundo ou os hacks que utilizem os ficheiros alojados, incluindo este que mostrei acima do favicon não vão funcionar.

Como podem verificar aqui no meu blogue olhando para o endereço no navegador, este sistema funciona e pelos meus testes, em quase todos os navegadores.

Ocultar

EDIT - 28 de Agosto de 2009:
Resolvi fazer um update aqui para mencionar as mais recentes adições que o Blogger nos ofereceu pelo seu 10º Aniversário:

1. Agora já é possível colocar as etiquetas (marcadores) em formato de nuvem, caso o desejemos.
• Para isso basta,caso ainda não tenha instalado as etiquetas na Barra Lateral (Sidebar), instalar e escolher essa opção.
• Caso já tenha instalado, para que funcione deve remover o elemento e reinstalar alterando então para Nuvem.
• Mas a alteração que gostei mais nas Etiquetas e não é necessário desinstalar caso queira aproveitar a dica é a opção de escolher quais são as etiquetas que queremos mostrar.
• Algo que considero muito útil e que já estou usando na nuvem de etiquetas animadas.
2. A 2ª "oferta", não sei se será de muita utilidade para a maioria dos bloggers. Pelo menos para mim pouca ou nenhuma utilidade tem, que é :
   • Agora em blogues que dedicados a musica e que estejam lincando para conteúdos sem permissão já é possível o Blogger avisar e em vez de apagar o artigo em causa, colocam como rascunho dando a oportunidade ao blogueiro para rectificar o artigo removendo o conteúdo proibido.
     
3. Esta oferta foi divulgada esta noite e mais uma vez pouco interesse tem no meu caso já que escolhi não utilizar a Barra de Navegação (Navbar).
   • A partir desta noite apareceu a opção de Partilhar junto com as opções que já existiam antes:
   • Pesquisar no blogue; Assinalar Blogue (utilizada para denunciar conteúdos ao Blogger); Seguir Blogue; e a tal opção de navegar para o blogue seguinte ao acaso.
   • A nova opção Partilhar permite ao visitante, bem..., divulgar o conteúdo do blogue em redes sociais tal como o Twitter, actualmente X, Facebook e Google Reader (na pagina principal), além de no caso de ser numa pagina individual, ainda aparece a opção Email para enviar o conteúdo por email.
   • Sinceramente, não posso dizer que esta opção Partilhar na Navbar seja muito útil para a maioria dos blogueiros já que muitos escolhem ocultar a dita cuja, como é o meu caso, mas até entendo isto como uma forma do Blogger incentivar os utilizadores a manter a Navbar visível.
   • Embora, e isto é a minha opinião, seria melhor que disponibilizassem essas mesmas opções, mas para incluir nos artigos.

Vamos é ver se é desta que o Blogger nos dá algo que realmente faz falta, tal como uma melhor moderação nos comentários.

Fim do Edit.

EDIT - 2011:
O hack para colocar favicon no blogue descrito acima já não é necessário.
O Blogger agora permite colocar um favicon à nossa escolha.
Basta ir ao Design do blogue e procurar pelo elemento favicon.

Infelizmente à data em que escrevo este edit, ainda não é possível colocar favicons animados (gifs). Se pretenderem usar esse efeito, sugiro que utilizem a gambiarra acima.

Fim do Edit

Actualização: 11 de Fevereiro, 2024

Desde há algum tempo que o Blogger tem vindo a fazer algumas mudanças, tanto na parte criativa como nas regras para se manter um blogue activo na plataforma.
Por exemplo, caso não acedam à vossa conta Google, ou a qualquer um dos produtos a ela associados (como o Google Ads, o Gmail e o YouTube) por um periodo superior a 2 anos, podem ficar sem ela e todos os restantes serviços onde se inclui o Blogger: Política de Contas do Google Inativas

Mas a questão aqui agora é relacionada com o favicon e como colocar um personalizado.
Vamos lá a isso, então. :D

Actualmente, para colocar ou alterar o favicon no Blogger, vamos a Definições Básico... e procuramos por Favicon

Clicamos em Favicon, e vamos para a página onde se pode alterar o dito cujo.
Ou remover o que está e voltar ao favicon normal, fornecido pelo Blogger: []

Bem simples, não? 8)

Mas se ainda não têm idea de como querem o vosso favicon ou querem algo onde o podem criar e não desejam utilizar o ConvertICO, podem também usar um gerador de favicons tal como o Favicon Generator.

Uma última coisa, embora o tamanho por defeito dos favicons seja de 16x16, é recomendado que o façam pelo menos com 48x48 e de boa qualidade.
Além de que imagens maiores ficarão muito melhores, elas são ampliadas para 48x48 quando actualizado pelo o Blogger, então é melhor usar uma imagem com pelo menos 48px.

Para terminar, o que fazer se o favicon personalizado não estiver visível?

1. Se o favicon não aparecer na guia do navegador, o primeiro passo é limpar o cache do navegador.
2. Para confirmar se a imagem foi mesmo carregada para o Blogger, escreve o seguinte na barra de endereço do navegador:
   
   https://url-do-teu-blog.com/favicon.ico
   Basicamente, é adicionar /favicon.ico ao endereço da página inicial do teu blogue.
   E clicar ENTER.

Espero que este artigo seja de utilidade para alguém... (c)

E por hoje é tudo. ;)

Até Breve. :-F

Queres ler outro artigo ao calhas?