Corrigindo a exibição do Favicon no Blogspot

Favicons
Favicons, palavra em inglês derivada de favorite e icon (Wikipédia).

Olá amiguinhos, depois de muito pastar tentando solucionar o problema da exibição do Favicon para os blogs hospedados no Blogspot, eis que a solução surge, por intermédio do Amílcar do Grupo Blogspot Brasil, no Blogger Tips and Tricks.

Se você já usa o código anterior para exibir o Favicon no seu site, basta mudar sua posição dentro do template, para logo depois da linha abaixo:
]]></b:skin>
Se você ainda não utiliza, hospede duas imagens com tamanho de 16x16 pixels, uma no formato PNG e outra convertida para o formato ICO, no local de sua preferência e anote as URLs dos arquivos hospedados.

Localize a linha ]]></b:skin> dentro do código html do seu template e logo após cole o seguinte trecho, adaptando o endereço dos arquivos que você acabou de hospedar:
]]></b:skin>
<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>
Vizualize para ter certeza que não há erros, em seguida salve e está pronto.

OBS: Esta dica funciona tanto no Internet Explorer como no Mozilla Firefox!

Imagem: i'm george

Comentários

  1. Esse é o Compulsivo!!! Vlw cara, eu achei meio estranho o problema, até cheguei a comentar aqui sobre ele, vlw mesmo pela solução

    ResponderExcluir
  2. Obg,espero mesmo que tenha resolvido o problema com o IE akele fave icon do blogger me kebra ^^'

    flws

    ResponderExcluir
  3. Mas porque o ico? Eu usei a dica da Juliana e nos dois endereços usei png que hospedo no picasa.

    ResponderExcluir
  4. Compulsivo, essa dica funciona nos navegadores que você citou e no Chrome também. Boa semana! Andréa Motta

    ResponderExcluir
  5. Legal! Estava com problemas com a minha favicon...

    ResponderExcluir
  6. não vou nem babar muito ovo... vc é "O" cara

    Abração
    Gabriel Dread

    ResponderExcluir
  7. Grande dica Compulsivo,

    Eu nem tinha notado, mas meu icone havia sumido do blog.

    Agora está tudo nos conformes novamente.

    Abçs

    ResponderExcluir
  8. compulsivo, eu naum sei de quem eu amo mais
    vc ou a ariane será quem alguem um dia vai me amar assim
    a ponto de me ensinar tudo isso de graça!!!!

    ResponderExcluir
  9. Ainda bem que tem sempre alguém para nos ajudar com estes pepinos dos códigos.
    Salve Compulsivo!

    ResponderExcluir
  10. Eu testei sem por imagem .ico e funcionou !

    ;)

    ResponderExcluir
  11. Muito obrigado cara funfo direitinho cara,eu já vinha tentando mas nada.
    Valeu tua dica deu certo.
    Sucesso

    ResponderExcluir
  12. Valeu pela ajuda. Havia testado vários códigos mas apenas este funcionou corretamente.

    ResponderExcluir
  13. Funciona no IE se for formato .ico

    se for uma gif ou outra extençao por exemplo nao funciona.. seria bom dizer isso

    ResponderExcluir
  14. Tem essa opção tambem:

    Crie uma imagem 16x16 e hospede o link em um servidor,depois va em editar html e localize o código a seguir:

    b:include data='blog' name='all-head-content'/
    ele esta bem no começo 8 Linha, Abaixo dessa linha coloque o código que se encontra no link abaixo:

    http://rtmblog.files.wordpress.com/2007/12/favicon.txt

    Espero te ajudado com essa outra dica...

    Abraços!

    ResponderExcluir
  15. perfeito...como sempre são as soluções compulsivas

    ResponderExcluir
  16. Fiz as alterações e tudo ficou certinho, mesmo com o código anterior já havia funcionado. O que acontece, porém, é que depois de um tempo eu tenho que converter novamente o favicon lá no converticon, pois parece que ele expira, por assim dizer; daí basta que eu vá lá e converta novamente que ele volta a aparecer. Isso acontece mesmo?

    ResponderExcluir
  17. @CafeMate, @Teilor, @Piratas do Blog, @Rodrigo, @MundoDosBlogues, @Gabriel, @Danilo, @Gama, @Lundquist, you're wellcome!!!

    @Samuel, @JD Cidigtal, @Cidão, o .ICO é para o Internet Explorer.

    @Andréa, imagino que no Opera também. Citei esses dois por serem os mais populares.

    @TentoAprender, você corta dos dois lados? Brincadeirinha ;-)

    @Parowski, tks ;-)

    @Pat, nunca ouvi falar disso...

    []'s
    Compulsivo

    ResponderExcluir
  18. Olha, quando o pessoal fala que o compulsivo é o cara, é a mais pura verdade.
    Sabia que ele iria da um jeito nisso.
    Meus sinceros parabens.
    Adm superfree
    www.superfreedownloads.net

    ResponderExcluir
  19. Rapaz, muito obrigado, funcionou na perfeição!!!
    Meu favicon não aparecia mais, eu estava quase desistindo :-)

    []´s

    ResponderExcluir
  20. Compulsivo, sou tão desligada pra certas coisas, que somente hoje fui reparar que o icon que aparecia era o do blogger. Valeu!!

    ResponderExcluir
  21. problemas no IE continuam... (só conseguir ver isso hoje ¬¬)

    mais alguém?

    abs

    Fabio

    ResponderExcluir
  22. Usei no meu valeus !
    Tava bugando memso ficava aparecendo o do blogspot
    até mais.

    ResponderExcluir
  23. Maravilhoso!!! Estava revoltado com o favicon que só funcionava de vez em quando. Muito bom esse post porque ecplica direitinho, consegui fazer mesmo sdem saber nada de HTML.

    ResponderExcluir
  24. Oi compulsivo,
    dizer q vc é o máximo é chove no molhado.
    Mas veja o que está acontecendo. No meu blog o Favicon não aparece ao lado do endereço nem no IE nem no Firefox. Simplesmente aparece o B laranja.
    No IE ao adicionar aos favoritos também vai com o B laranjinha e no Firefox ao add nos favoritos aí, sim, vai com o meu favicon.
    O que pode estar ocorrendo?

    Bração, pa Z e boa!

    ResponderExcluir
  25. comigo funcionou certinho... obrigado...

    ResponderExcluir
  26. Beleza, demorei um pouco pq naum estava encontrando onde hospedar o .ICO, mas assim que encontrei deu certinho. Valeu pela dica. Obrigado. Foi 10. Um abração, T+

    ResponderExcluir
  27. Olá, amigo!

    Valeu pelo post! Informação simples e eficaz!
    É uma pena que ainda não haja (que eu saiba) uma forma de fazer funcionar o Favicon no Blogger com o uso do Google Chrome. Mas funcionou de primeira com o FireFox e com o IE8!

    Valeu!

    ResponderExcluir
  28. Compulsivo,
    reparei que o favicon segue junto quando add aos favoritos tanto no IE7 qto no firefox, mas quando exibido o blog na tela não aparece.
    Olha, seria pedir muito que você desse uma olhada pra mim no código fonte ou no layout. Sei que você deve ser muito ocupado e pedidos chovem pra ti, mas... não custa tentar.

    Bração, pa Z e boa!

    ResponderExcluir
  29. Comigo não dá certo :( fica o icone do internet explorer

    ResponderExcluir
  30. enfim achei! aquele icone do blogger é tão chato...

    ResponderExcluir
  31. Só deu certo quando fiz do seu jeito. Vc arrasou!!

    ResponderExcluir
  32. Muito legal a iniciativa de postar o conteúdo, ajudou muito...havia tempo eu procurava sobre o assunto porém não imagina o nome e nem conhecia "Favicon" rsrsrs...

    Tks

    ResponderExcluir
  33. Cara, eu sou seu fã! Agora só falta arrumar um mascote pro blog e ele vai ficar pronto!

    Muito obrigado!

    ResponderExcluir
  34. Muito boa cara, muito obrigado me ajudou muito.

    Dica: se você quizer utilizar a imagem .gif criada no fivicon é só colocar ela no lugar da imagem .png

    Abraços

    ResponderExcluir
  35. Legal o tutorial, achei um site bem legal que deixa pronta as pics nos dois formatos: http://www.htmlkit.com/services/favicon/
    Valeu

    ResponderExcluir
  36. amigo vc poderia me dizer qual melhor site de hospedagem para fazer isto? tentei o 4share e não consegui !!! vlw

    ResponderExcluir
  37. Opa colega, nerdice minha, mas seria mais correto dizer que o código é pra ser colocado antes do /head, o que é padrão pra tag 'shortcut icon'. Abraço.

    ResponderExcluir
  38. @Homem Robô, se você quiser que funcione faça como está no tutorial. Caso contrário pode colocar dentro da HEAD.

    Funcionava assim como você citou, até o Google fazer uma alteração no código padrão gerado para todos os blogs no Blogspot...

    []'s
    Compulsivo

    ResponderExcluir
  39. Valeu, cara!!!!!!!!!!!!!!!!!!!!!!!!!!
    Graças à você, eu tenho um favicon totalmente personalizado no meu blog! :)
    Meus parabéns e continue assim.

    ResponderExcluir
  40. Muito obrigado!

    Só não consegui fazer com que o IE mostre meu ícone, vou tentar fazer o upload novamente.

    ResponderExcluir
  41. Tenho um dominio direcionado para um endereço do blogger..o fato é que no endereço do blogger consegui por o favicon, porem quando acesso o meu dominio nada acontece !!! teria alguma dica?

    ResponderExcluir
  42. @Interesting Thoughts Dude, a dica está descrita neste post e funciona inclusive para domínios próprios como você mesmo pode conferir no Buzzão.com.br.

    []'s
    Compulsivo

    ResponderExcluir
  43. Compulsivo uso essa dica atualmente em meus blogs, mas teno tido uma duvida:
    Aonde posso Hospedar uma imagem no formato .ico ?
    Fico no aguardo valeu!!!!

    ResponderExcluir
  44. @F3N1X, você pode usar o SkyDrive, ceio eu. Ou então dá uma olhada neste post do Dicas Blogger...

    []'s
    Compulsivo

    ResponderExcluir
  45. Usei sua dica - seguindo todas as instruções para mudar o Favicon de meu blog e não funcionou. Coloquei após os codigos mencionados (que não posso colocar aqui pois esse formulário de comentário não aceita html) e ao salvar dá como erro pois em seguida é um outro código e entre um e outro o blogger não aceita o código indicado por vc. Se vc puder me ajudar, eu gostaria.

    Obrigado,

    Márcia

    ResponderExcluir
  46. Valeu compulsivo a dica que você me deu do Dicas Blogger resolveu Meu problema com a imagem Icon.Agora FavIcon 100%.

    ResponderExcluir
  47. poxa...
    eu ainda não consegui fazer funcionar no IE :/

    vou dá uma olhada melhor nisso...

    *o ruim é que a gente só altera o xml do template no blogger. se desse pra mexer no html poderiamos tirar a parte que mostra o fav do blogger :/

    ResponderExcluir
  48. Muito bom...valeu mesmo funcionou legal

    ResponderExcluir
  49. nao deu certo pode me ajudar ?

    ResponderExcluir
  50. @Thiago claro que posso, fiz até um post pra isso!

    []'s
    Compulsivo

    ResponderExcluir
  51. então fiz tudo do modo que vc explicou mas o fivicon comtinua com o do blogger oque devo fazer ?

    ResponderExcluir
  52. @Thiago, cara tu tem que hospedar os arquivos num local que te permita acesso direto através de uma URL única. Do jeito que você hospedou os arquivos não vai funcionar nunca!

    []'s
    Compulsivo

    ResponderExcluir
  53. Eu segui as dicas direitinho e o icone so mudou no Firefox e no Chrome, no IE ainda aparece o icone do Blogger, será que tem mais alguma coisa que poderia fazer ?

    ResponderExcluir
  54. Enfim depois de 200 tentavivas frustadas de bottar um "favicoN" no meu blog ACHEI AQUI a respostya para meus problemas...

    e nunca esperei que folsse uma resposta tão curta e certeira hehehehe

    obrigado usuario compulsivo

    ResponderExcluir
  55. faço de acordo com o modelo e só da a seguinte mensagem de erro: Não foi possível salvar o modelo
    Corrija o erro abaixo e envie o seu modelo novamente.
    A skin não pode conter o elemento: link. Somente seções de texto e CDATA são válidas.salvei a minha imagem em formato ico, no site snips, agradeço se puder me ajudar...

    ResponderExcluir
  56. tentei, tentei.... mas nao funciona no IE ( Internet Explorer ) ja no Firefox funciona pode me ajudar ?

    ResponderExcluir
  57. Bom...eu fiz td como vc mando mas no meu blog ñ deu certo
    Alguém pode me ajudar?!
    bigadinha
    bjin =^.^= fiquem com Deus

    ResponderExcluir
  58. É estranho, o meu fica dando erro de Xml e diz não conseguir fechar.

    Eu revi várias vezes, está tudo igualzinho. Hospedei o favi no ImageBoo, será que tem alguma diferença?

    Já limpei o histórico conforme achei no Ice...mas também não funcionou. Agradeceria se pudesse me ajudar.

    ResponderExcluir
  59. Infelizmente no Internet Explorer não quer funcionar por que será que nele não funciona já fiz de tudo! por favor me ajude

    ResponderExcluir
  60. Amigos, está publicado da forma que funcionou comigo... Espero que ajude ;-)

    []'s
    Compulsivo

    ResponderExcluir
  61. Aqui funcionou com a figura em jpg abraços JUSTI

    ResponderExcluir
  62. Vlw compulsivo, foi muito útil sua ajuda!

    ResponderExcluir
  63. para mim aparentemente deu certo, e acho q o post poderia ser atualizado com mais essa linha -- que faz o favicon funcionar também no Google Chrome (e provavelmente em outros):

    [<]link href='URL_DA_IMAGEM_FORMATO_ICO' rel='icon' type='image/vnd.microsoft.icon'/[>]

    (retire os colchetes, coloquei porque a caixa de comentários não aceitava o código)

    por favor, me avisem se eu fiz alguma cagada e se isso pode dar errado (aparentemente funcionou perfeito aqui).

    ResponderExcluir
  64. Vlw pea dica meu brow, grande abraço, por isso que sempre recorro ao Compulsivo. Obrigado.

    ResponderExcluir
  65. Foi este código que salvou minha Favicon das desgraças do IE & Chrome... Funciona direitinho! :D

    ResponderExcluir
  66. Eu tava curioso pra saber como faz isso aí!
    Muito bom vocês terem tudo explicado aqui.

    Gostei do blog, vou até montar cabana -q

    ResponderExcluir
  67. Ola,Meus parabens

    Acho que rodei a net toda pra conseguir colocar o fav icon,mas aqui sim,valeu a pena.Assim é que se faz a diferença.Parabens
    Estou com problema para reclamar meu blog no blog blogs,não consigo de jeito algum se puderem me ajudar.

    Mais uma vez meus parabens

    ResponderExcluir
  68. @Ricardo, eu abri um ticket com uma reclamação no BlogBlogs há umas duas semanas e até agora não obtive resposta... Lamentável!

    []'s
    Compulsivo

    ResponderExcluir
  69. Muito bacana este tutorial e bem simples. A tempos estava procurando por ele.
    Mas, infelizmente não funciona no Google Chrome =[
    Você teria um código que funcione em qualquer navegador?
    Grato.

    ResponderExcluir
  70. Compulsivo você é demais!!! Depois de tanto tentar finalmente conseguiiiiii!!!! Você explicou direitinho , mas para leigos como eu ainda fica dificil entender. Vou explicar no "leigues"para que os leigos entendam.
    o meu blog é do blogger e uso internet explorer.
    Pegue uma imagem sua va no site http://www.freefavicon.com/, gere o favicon, faça o download dele para o PC,peque a que for "`preview 16x16 png " hospede essa imagem no "http://tinypic.com/" ,eles te daram vários códigos, mas aí é que está o "X" da questão para os leigos,pegue um bloco de notas e anote somente o endereço da imagem ex: "http........jpg" aonde esta pontilhado estara o endereço de sua imagem em jpg.
    Agora va ao site " http://www.iconj.com/"(não precisa se registrar) lá eles geram o "favicon .ico "e hospedam a imagem pegue somente o endereço da imagem "http.....ico"(para sebaer se vocë está pegando o endereço certo copie e cole no seu navegador ira para uma pagina somente com a imagem 16x16.
    Depois fui em layout, em HTML,cliquei em baixar modelo completo e salvei no meu PC. Clique em~"expandir modelo de widgest" (para achar aonde está[ ]]> ], clique em ctrl+f no seu pc e abrira uma pequena janela abaixo de "favoritos" cole [ ]]> ] .
    Agora pegue a fórmula dada pelo nosso amigo compulsivo , e cole logo abaixo desse código, e coloque os endereços aonde ele ja explicou.

    clique em visualizar. Só depois da pagina estar carregada é que o icone aparecerá, se estiver certo ,clique em "salvar modelo"
    Olha compulsivo obrigadão, se der da uma olhadinha como ficou meu favicon, o meu blog é morganadownloads.blogspot.com é um site de download, posto somente o filmes que acho legal, mas vocë pode ir lá e pedir o filme que quiser que posto ele para você.
    Valeu amigáo!!!

    ResponderExcluir
  71. Não estou conseguindo fazer, mesmo seguindo os passos com precisão cirúrgica. Sempre utilizo o Chrome e não está aparecendo meu favicon. =/
    Salvei como um PNG de 8bits com transparência com o nome de favicon.png e hospedei no Picasa. Estou pondo a URL lá e não está indo. =( What's going on?

    ResponderExcluir
  72. Vlwww conseguiii.. Flws manww Abracaooo

    ResponderExcluir
  73. Como sempre, maravilha de post e comentários. O que achei mais interessante é que no meu IE [que uso só pra testes] o favicon do Compulsivo não aparece, mas o da @Morgana aparece.

    Eu, infelizmente, ainda não consegui no IE.

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

Nomes de todas as igrejas do Brasil

O que significa DVDRip, DVDScr, R5, etc?

Remover idiomas em arquivos Dual Audio