Nunca e sempre são duas palavras que só deveriam existir nos contos de fadas. São palavras que fazem parte de promessas geralmente impossíveis de serem cumpridas. Mas como é bom ouvi-las, não é mesmo ? Graças a elas não sentimos muito medo e insegurança quando o futuro parece tão incerto...

Favicons Animes

Alguns favicons:

 Já vimos como colocar os favicons na postagem anterior então vou resumir
Acessar o blogger, clicar em Design, clicar na aba/guia Editar Html, no Html do blogger localize name='all-head-content'/>
 Use as duas teclas de atalho Ctrl + F para localizar
 Logo abaixo do código que você localizou adicione seu código de favicon
substituir o código que deixei em vermelho pelo endereço do favicon
(Para funcionar corretamente, clicar no favicon que desejar e depois clicar em exibir imagem, dai é só copiar o endereço do favicon) 

<link href='http://foitestado.com/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon' />

<link href='http://foitestado.com/gif-favicon.gif' rel='icon' type='image/gif' />

<link rel='apple-touch-icon' href='http://foitestado.com/movel-favicon.png' />

Clique em SALVAR MODELO
  
Alguns sites Para criar seus proprios Favicons
http://mywlm.com/myface
http://www.animatedfavicon.com/

 Depois de criar seus favicons terão que Hospedar as imgens ou gif, aqui vai um ótimo site
 http://imageshack.us/

Colocar favicon em site ou blogger, como criar online e hospedar grátis

Mostrarei como colocar favicon no BlogSpot ou site e também como criar favicon online, tanto uma imagem ico como uma gif animada para usar como favicon em blogs, blogger, ou sites, e, onde hospedar o favicon.

Um favicon é a imagem que aparecerá no topo do navegador quando alguém visitar seu blog/site, o local onde ele aparece vária dependendo do navegador, e também aparece nos favoritos quando seu blog for adicionado, ou no computador como ícone se alguém criar um atalho.

Para entender melhor, o favicon é uma imagem para páginas de web, que aparece no topo do navegador quando essa página é acessada ou nos favoritos quando uma página é adicionada, essa imagem deve estar hospedada na web, e nas páginas geralmente deve conter um trecho de código que fará com que ela apareça.
Aqui no blog, o Favicon é essa imagem, então, se você ver ela no seu navegador já saberá do que se trata, porém, nem todos os navegadores suportam favicon.

O que você precisa para que o favicon funcione em seu blog/site é entender como funciona/coloca o código em seu Html, para alguns vai ser difícil, principalmente se não tem costume ou não gosta de mexer em códigos.
Para ter um favicom funcionado é importante:
• Entender e colocar o código em seu Html 

Códigos para adicionar favicon
Você deverá, escolher um, dois ou os três códigos abaixo e substituir o código que deixei em vermelho pelo endereço do favicon, com cuidado para não remover ou adicionar caracteres ou espaços, esses códigos funcionarão para os 3 mais usados navegadores, testei no Mozilla Firefox, Google Chrome e Internet Explore 7 e, deve funcionar em versões superiores.
  
3º Código de favicon icon 
<link href='http://SITE-HOST.XXX/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

2º Código de favicon gif(animado) 
<link href='http://SITE-HOST.XXX/animado-favicon.gif' rel='icon' type='image/gif'/>

1º Código de favicon Png para aparelho móvel 

<link rel='apple-touch-icon' href='http://SITE-HOST.XXX/apple-touch-icon.png'/>

Continue lendo e descubra por que enumerei de baixo para cima.

 Para adicionar, você poderá copiar apenas os códigos acima e modificar os endereços da imagem(favicon), em vermelho

Exemplo, como usar o código:

Os navegadores usaram o favicon para o qual ele suporta e ele escolherá o primeiro que for mais compatível, ele vai tentar o primeiro de baixo para cima, depois o segundo e o terceiro, se o primeiro(de baixo) der certo ele será apresentado.
Se eu quisesse suporte para navegadores, móveis e preferencialmente um gif animado, adicionaria como abaixo:

<link href='http://foitestado.com/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon' />
<link href='http://foitestado.com/gif-favicon.gif' rel='icon' type='image/gif' />
<link rel='apple-touch-icon' href='http://foitestado.com/movel-favicon.png' />

No exemplo acima, pode perceber que o nome das imagens variaram, apenas o favicon.ico que não, e elas precisam estar hospedadas em um local para funcionar, nesse exemplo estariam no próprio site.
Os endereços de favicons do exemplo acima talvez não existam, são apenas para demonstrar como poderia ser.

Colocar favicon em sites

Observando o exemplo acima, o favicon.ico está hospedada no diretório raiz, tornando-se assim o defaut, ou seja, se outros arquivos ou endereços do site não tiverem um favicon, esse aparecerá, até para endereços de imagem, sendo assim, até nas páginas html não seria preciso adicionar o código para o favicon icon. Mas nem sempre funciona assim em alguns navegadores pode não aparecer o favicon em algumas páginas(raramente), mas isso fica fica a vigor de quem tem um site testar suas páginas ou adicionar o código em cada.

Em sites, e geralmente na maioria dos blogs ou páginas web, os códigos de favicon são colocados no Html entre as <head> </head>

Adicionar código do favicon no blogger:

1. Acessar o blogger
2. Clicar em Design
3. Clicar na aba/guia Editar Html
4. Por segurança clique em Baixar modelo completo para fazer um backup, ou use um blog de teste
5. No Html do blogger localize name='all-head-content'/>
   Use as duas teclas de atalho Ctrl + F para localizar
6. Logo abaixo do código que você localizou adicione seu código de favicon
7. Clique em SALVAR MODELO

Clique para aumentar

 

• Criar e hospedar os favicons