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
• Criar e hospedar os favicons

Arquivo Icon é uma imagem salva com extensão .ico Sendo assim quando você ver uma imagem tipo icon tem extensão .ico Exemplo: figura.ico ou arvore.ico

O Favicon serve como uma marca para que as pessoas identifiquem o site, mas é bom levar em conta que é uma imagem a mais em seu blog e ela pesa, e, no caso de utilizar uma imagem animada, é bom ter um cuidado para que ela não irrite ou distraia o usuário, e mesmo usando um favicon animado é bom usar um favicon.ico, pois alguns navegadores não exibem o favicon animado, principalmente nos favoritos ou computador.

Códigos para adicionar favicon

Quem usa o blogger, pode colocar favicon sem mexer em código, clique
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:

Atualização 2013, Foi criado um modo de adicionar favicon no blogger sem mexer em códigos, clique aqui e com a remoção da antiga interface do blogger os passos da imagem abaixo não correspondem exatamente

1. Acessar o blogger
2. Clicar em Modelo
3. Clicar em Editar Html
4. Por segurança deve 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, Aplicar ou algo nesse sentido

Clique para aumentar

Fazer o favicon

Consegui fazer um favicon Png e salvar com o nome favicon.ico no Paint, o resultado foi um arquivo icon super leve e com ótima qualidade(não destorce, mantém as cores), porém, não foi possível usá-lo com o Ie7(internet Explorer7), talvez no futuro próximo(2012 poucos usarão o IE7), mas na data desse post, muitos favicons mais pesados são exibidos e muitos sites estão impossibilitados de usar esse tipo de arquivo mais leve, justamente por ele não poder ser exibido no Ie7(não testei no 8), sendo assim, o jeito mais fácil de obter um bom favicon.ico, até porque que convém a maioria, é usar um editor online, já que é grátis e baixar um programa só para isso seria perda de tempo ou um software a mais com pouco uso no Pc.
Mesmo assim, você pode fazer seu favicon em Png e usar ele para transformar em ico compatível usando um site gerador de favicon(mais abaixo).

Você pode também criar uma gif animada com programa grátis para usar como favicon, é um pouco difícil, mas se quiser algo totalmente diferenciado e único...
Se quiser um bom editor para fazer imagem ico, baixe gráts o PixelFormer

Criar favicon online

No site Icon J é possível transformar uma imagem em favicon simples de 16x16 e hospedar ao mesmo tempo.

Para quem quiser um favicon melhor, e até um favicon gif animado, o site html-kit tem a opção de criar ambos, você pode ver um passo a passo e dicas abaixo, porém, o Html-kit não hospeda o favicon.

Para hospedar gratuitamente o Favicon.ico ou outra imagem, pode ser usado o Pic Panda, mas sempre que usar uma hospedagem, principalmente grátis, deixe uma cópia de seu arquivo reservada no Pc, se puder poste contando sobre o Pic Panda, pois foi difícil encontrar um site para hospedar imagem Icon, é uma forma de ser grato a um serviço gratuito, e, isso ajudará pessoas e valoriza seu blog.

1. Dicas para criar favicons online no Html-kit

   1. A primeira coisa é "pegar" a imagem de seu Pc, como faz isso vária de seu Sistema Operacional
      Dicas:
      
      Nos sites de fazer coisas online geralmente é só clicar no botão Enviar arquivo, Upload ou algo parecido e depois outro botão para gerar(generate, create...)
      
      
      Sempre que ver um Ok onde fazer alterações precisa clicar para aplicar
   2. Para adicionar mais imagens basta clicar no botão Enviar arquivo, Upload... ou algo parecido
   3. Depois de carregar sua imagem poderá clicar em Customize para abrir as opções
   4. Opção Edit animation... ou Add scrolling text and edit animation, poderá escrever uma frase/palavra onde está Your test, e {PIC 1}{PIC 2} ou 3 são o código que representa suas imagens(apenas naquele site), não remova, se tiver adicionado mais uma imagem pode colocar texto entre elas e mudar a sequência delas
      Exemplo:
      Quando fiz o favicon animado abaixo, adicionei 3 imagens, a 3ª imagem era um B a 1ª imagem era um F e a 2ª um T e entre o código das imagens adicionei as letras que formam o nome do blog, esse trecho:
      {PIC3}log.{PIC1}oi{PIC2}estado gerou essa gif animada Clique para ver, só que a animação para depois de algum tempo, o que é bom, pois assim não distrai o usuário
      O link(turn off) remove outras imagens e texto da animação
      
   5. Cor do texto, basta clicar no campo próximo ao Ok e depois de escolher a cor, dar um Ok
   6. Remover o favicon animado
   7. Fazer um Favicon para aparelhos de mão(Add iPhone, iPod Touch and iPad icon)
   8. Cor de fundo do favicon, pode escolher uma cor ou clicar em transparent
   9. Para deixar a cor de fundo padrão de sua imagem clique em Make image background transparent(corner colors)
   10. Pode adicionar uma borda na imagem(Add a border around the image), mas, as vezes o melhor é, se puder, fazer isso no seu computador com seu próprio editor
   11. Tornar o Favicon preto e branco(Convert to grayscale / black and white)
   12. Add icon format, adiciona outros formatos(tamanho) em seu favicon, o melhor é deixar o padrão para não ficar muito pesado.
   13. Remove icon format, você verá as medidas que seu favicon suportam, e nessa opção, se clicar em uma medida removerá a mesma
       Eu uso apenas o formato 32 com menos de 256 cores, pois cada formato acrescenta uns 2kb ou mais na imagem e a grande maioria dos navegadores suporta esse tamanho de 32.
   14. Você pode ver o Favicon no navegador no momento em que está criando ele, basta clicar no link(Instantly preview your favicon in this browser)
   15. Uma pequena possibilidade de divulgar seu blog/site e favicon, clicando em (Add your site to the Favicon Gallery) e preenchendo o formulário
   16. Baixar os favicons, pode escolher entre Download(lado direito) de uma pasta compacta com os favicons ou clicar em (Download only favicon.ico ou >Download only animated-favicon1.gif) para ver a imagem e baixar/salvar manualmente, como?
   17. Você pode começar novo favicon do zero clicando no botão Start Over, no topo da página a direita.
Clique para aumentar

Por que o favicon não está aparecendo no Internet Explorer?

Algumas versões do IE não suportam o favicon.ico, outros não suportam o favicon gif mas suportam o ico, por isso, quem quer usar um favicon gif animado deve usar também o ico.

Se você colocou o código do favicon certo, com os endereços de imagem certo é bom ver em outro navegador, preferencialmente o Mozilla, se nele está funcionando, o problema pode não ser o seu favicon e nem mesmo o código, mas sim as configurações de segurança e privacidade do Ie, então, o fato de você não estar vendo o favicon em seu blog e usando o Ie não quer dizer que outras pessoas não estejam vendo ele, o jeito é perguntar para outras pessoas que você conhece e sabe que usam esse navegador, as vezes o simples fato de limpar o cache e reiniciar faz com que comece a exibir.

O fato é que talvez alguns filtros de segurança façam com que o IE não exiba o favicon de alguns sites e exibe de outros, e me aconteceu bastante quando estava testando formatos diferentes de favicon, penso que talvez o IE encare isso como uma possível tentativa de Phishing(se passar por outro), como ele não tem certeza da autenticidade, ele não exibe o favicon. Mas não é nada que vá prejudicar o blog.

Sendo assim, é melhor não estressar e nem perder muito tempo porque não consegue ver seu favicon no IE, é melhor até perguntar a outras pessoas e ver se acontece o mesmo em outros Pcs do que baixar o nível de segurança de seu IE apenas para certificar-se de estar aparecendo ou não seu favicon nesse navegador.

• Onde baixar o navegador Chrome ou Mozilla Firefox
• Logotipo online animado e grátis
• Colocar um logotipo no BlogSpot
• Div e imagem lado a lado e do texto
• Salvar, importar favoritos no Mozilla Firefox ou Internet Explorer
• Mudar a aparência do Chrome com temas do Google
• Colocar div para gadget acima da postagem no blogger
• Permitir ou Desativar JavaScript no Google Chrome
• Fazer emotions animados online