Colocar Favicon no Blogger - Imagem na Barra de Endereços

Achamos uma maneira mais simples de colocar um favicon no blog, ou seja, personalizar aquela imagem da barra de endereços. Já fizemos alguns tutoriais sobre trocar o favicon do blogger, mas recentemente achamos um site que hospeda e converte a imagem para o formato ícone (.ico), além disso já dá o código pronto para colocar no blog. Você só precisa ter uma imagem preferencialmente no formato quadrado para não distorcer na hora de converter.

Outra coisa que precisamos lembrar é que o tamanho do ícone é 16 x 16 pixels, portanto não adianta enviar uma imagem muito grande e cheia de detalhes que provavelmente ficará borrada. Para criar a imagem você pode usar um dos Programas Gratuitos para Edição de Imagens ou baixar uma da internet.

Favicon no Blogger

Depois entre no site Free Favicon Hosting e envie a imagem o site já fornece o código pronto para colocar no seu blog.


Entre na pagina editar html e cole o código antes da tag </head>, depois é só salvar e já está pronto, agora seu blog já tem um favicon personalizado.

107 comentários :

  1. Como sempre mais uma excelente dica, o nosso Blog apesar de ser ainda amador e bem feio - rsrsrsrs - o que sabemos agradecemos muito a você.
    Parabéns!

    ResponderExcluir
  2. essa dica não é nenhuma novidade, mas certamente é bem mais facil de fazer do que outros tutoriais onde precisa converter, hospedar e criar o código tudo manualmente... justamente por isso fizemos essa publicação.

    ResponderExcluir
  3. Muito fácil e simples, parabéns!

    ResponderExcluir
  4. Fabiano,

    Sua entrevista foi publicada la no Blog.

    O link é Entrevista com Fabiano Roberto - Conteúdo é tudo!

    Um abraço
    Adriano Luz

    ResponderExcluir
  5. Oi Fabiano! Cheguei aqui através da Isis, do Poderosa ponto Com.
    Meu blog não está atualizando as postagens na barra lateral. Como faço para corrigir o problema? Obrigada pela atenção.

    ResponderExcluir
  6. seja se o feed do seu blog está configurado corretamente

    Como usar o FeedBurner – RSS

    ResponderExcluir
  7. Parabéns pela entrevista amigão! - foi muito legal recomendo a todos!

    ResponderExcluir
  8. e se agente quiser colocar um gif!

    pois eu tentem e não consegui!!!

    por favor me responda

    ResponderExcluir
  9. hospede a imagem no formato gif e use esse código:

    <link rel="icon" href="endereço da imagem" type="image/gif" />

    ResponderExcluir
  10. aaaaaaa dessa vez eu conseguii. valeu !

    ResponderExcluir
  11. rapaz parabens,muito grato pela sua dica muito facil...

    ResponderExcluir
  12. fiz o teste e funcionou no firefox, tente clicar para atualizar a pagina

    ResponderExcluir
  13. Valeu,finalmente achei um tutorial descente sobre isso,obrigadoooooooooooooooooooo

    ResponderExcluir
  14. Eu tinha um favicon e depois que mudei para dominio proprio ele sumiu... porque será?

    ResponderExcluir
  15. A dica de site que hospeda imagem em formato ico é ótima, contudo, a mudança só parece ter efeito no blog. Digo, quando listado em outros o ícone que aparece nesse caso é o do blogger. Pelo o que entendi esse problema só é superado se o endereço no link href é o do próprio blog. Não sei como fazer isto: Upload the FavIcon.ico and your pages to your web server. Talvez esse seja o problema.

    ResponderExcluir
  16. Adorei a dica, procurei em muitos sites e só você conseguiu me ajudar, muito obrigado mesmo, sucesso.

    ResponderExcluir
  17. No meu blog não deu.Tipo,eu entrei na página para ver como ficou ai apareceu o ícone depois a própria pagina se atualizou e voltou o ícone do blogger D:

    ResponderExcluir
  18. No meu blog deu - como posso dizer... - meio certo. Quando acesso o blog pelo internet explored, consigo ver o meu favicon. Porém, pelo google chrome não. O que aconteceu?

    ResponderExcluir
  19. use uma outra imagem igual no formato png neste código
    <link href='imagem original' rel='shortcut icon' type='image/png'/>

    junto com o do .ico que falamos na postagem

    ResponderExcluir
  20. Excelente dica! O site também é muito bom...
    Estou divulgando-o lah no meu Blog também

    ResponderExcluir
  21. GOSTEI MUITO DO TUTORIAL... MAS INFELIZMENTE, NAO DEU CERTO COMIGO. FIZ TODOS OS PROCEDIMENTOS COMO FOI MANDADO E NADA. PQ?

    ResponderExcluir
  22. veja o primeiro link da postagem lá tem outros códigos para trocar o favicon

    ResponderExcluir
  23. Parabéns! de forma fácil e rápido de se conseguir trocar o "favicon"! Obrigada pela dica!

    ResponderExcluir
  24. fabianooooooooo, meninooooooo..vc arrasou com esse video!!!!! me diz uma coisa vc jah ta rico com essas mega dicas???kkkkkkkkkkkkk
    Olha agora sim to confiando em vc...ficou bem melhor tudo aki com esses videos, e para os cyber analfabetos como eu esse video explica tuuuuuudo direitinho...naum to mais me sentindo uma ET... Bianoooo te amuuuuuu
    bjks, Vanessa ramosssssss
    To mega feliz

    ResponderExcluir
  25. fabiano meu querido preciso de um help...Recentemente estava usando um favicon e derepente ele sumiu ai fui em editar html e troquei por outro não gostei e resolvi trocar novamente eis que aparece o problema eu não consigo salvar mais a página fica travada e não vai pra lugar nenhum vc poderia me ajudar...
    Desde já agradeço a atenção

    http://drikabello.blogspot.com/

    ResponderExcluir
  26. a pagina editar html está mesmo com problemas.... isso é erro do blogger, o jeito é aguardar

    ResponderExcluir
  27. Obrigada meu querido pela resposta, então vamos esperar que isso se resolva logo...
    Adoro passar aqui suas dicas são demais...
    Beziquinhos doces...
    http://drikabello.blogspot.com/

    ResponderExcluir
  28. cara eu não consegui, tentei varias vezes e não deu certo

    ResponderExcluir
  29. veja se usou o endereço correto da imagem.... as vezes é necessário clicar para atualizar a pagina para ver o novo icone

    ResponderExcluir
  30. Nossa, muito obrigada. Há muito tempo estava querendo mudar o favicon do meu blog e só encontrava tutoriais que complicavam muito. Parabéns, um texto bem conciso !

    ResponderExcluir
  31. ai que máximo . Obrigada pelo vídeio , só através dele é que consegui ter sucesso .
    Valeu Fabiano

    ResponderExcluir
  32. Pleaseeeeeeeeeeeeeeeeee me ajudem, eu ja tentei de tudo pra colocar favicon no meu blog e não consigo, ja foram noites e noites tentando, ja estou frustada, mas nao desisto, me ajuda eu imploro...
    http://adrianapcampos.blogspot.com/

    ResponderExcluir
  33. tem que hospedar a imagem e colocar o código na pagina editar html... não tem outro jeito

    ResponderExcluir
  34. CONSEGUIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIii
    UHUHUHUHUHUHUHUHUHUHUHH
    depois de muito tenta...e fracaça..consegui..
    IUPPPPPPPPPPPPPPPPPPPPPPPP
    Vlw, DB
    http://fctwilightmoonlight.blogspot.com/

    ResponderExcluir
  35. showw de bola....mt facil...vlwwww

    ResponderExcluir
  36. Muitissimo obrigado.
    Eu e meu irmão estamos vendo quem tem um blog melhor.
    Vocês do Dicas para Blogs me ajudaram muito.
    Mais uma vez obrigado.

    ResponderExcluir
  37. Cara nao ta aparecendo em meu blog, o o procedimento igual do vídeo. Espero por respostas. Abs

    ResponderExcluir
  38. kra adoro esses seu turtorias meu blog esta fikando show... criei hj,agra so falta apostar algo mas nao sei oq ^^ vlw brigadão mesmo xD

    ResponderExcluir
  39. AB SKATE - Relações Públicas
    aperte o botão f5 no teclado para atualizar a pagina, as vezes seu computador usa o histórico e por isso não aparece

    ResponderExcluir
  40. Eai Fabiano, fiz novamente o procedimento, limpei ate o histório do meu computador. O que estou achando estranho é que no meu outro blog funciona e até tenho a tempos o favicon, e nesse blog nao esta funcionando. Oq poderia ser?
    Grande abraço.

    ResponderExcluir
  41. é estranho dizer isso ...

    veja esse tutorial que usa arquivos no formato .ico e .png
    Como alterar o favicon do Blog

    ResponderExcluir
  42. Este comentário foi removido pelo autor.

    ResponderExcluir
  43. Oiii.. acho que sou aunica pessoa no mundo que ñ consegue mudar o favicon... estou tentando a 3 dias e nada... to estressando... fiz igualzinho na video aula.. uma 3 vezes e naaaada... me ajudaaa?

    ResponderExcluir
  44. você deve usar o endereço da imagem no seu html está errado..

    ResponderExcluir
  45. E aí, Fabiano! Adorei a dica e já estou usando em outros blogs! Porém, tem um blog que eu queria colocar uma gif animada, tipo rodando. Na verdade, até consegui colocar, usando sua dica, mas só aparece rodando no mozila. No explorer não aparece e no chrome aparece a imagem parada...
    Há o que fazer para concertar isso?
    Valeu, Math

    ResponderExcluir
  46. as imagens do favicon funcionam melhor sem movimentos...se alguns navegadores não aceitam esse formato não tem o que fazer

    ResponderExcluir
  47. Não adiantou de nada!!!!
    O favicon ao invéns de ficar na barra de endereço ficou em cima do navbar !!!!
    ¬¬

    ResponderExcluir
  48. Larissah...
    você colocou o código antes de < /head >?

    ResponderExcluir
  49. Cara, mal consigo acreditar que eu achei esse bendito < /head> no meio daqueles códigos todos!
    Ufa! Quase enlouqueci, mas consegui!

    Não tenho palavras para expressar o quão grata eu sou por ter contado com o seu super auxílio, Fabrício.

    Você é demais e eu realmente espero que saiba disso!

    Beijos, e se prepare pois ainda irei perturbar muito por aqui! ^^)

    ResponderExcluir
  50. Entrei no blogger hoje,
    e fui mudar o templante, e percebi que tem um novo elemento e ele muda o favicon do blogger
    eu ja tinha trocado do meu, mas essa opçao me deixou pensando...
    qual a diferença entre os dois??

    ResponderExcluir
  51. Felipe, acabei de publicar um tutorial sobre essa novidade do blogger: Como Colocar Favicon no Blogger

    ResponderExcluir
  52. Muito bom o tutorial! Fiz e deu certinho! Primeiro tentei somente lendo a explicação e não deu certo pois eu achei que era pra copiar o código que está em Direct Donwload, e copiei antes do < /head > que fica bem no início do Editar HTML. Mas somente assistindo o vídeo que ficou claro que ainda havia outro < /head > no Editar HTML! Valeu.

    ResponderExcluir
  53. PARABENSSS!!!!!!!!!!!!!
    PASSEI UM ANO PROCURANDO ESSE TUTORIAL!
    Deu certo hein!abraço.

    ResponderExcluir
  54. Muito legal mesmo,só tenho que agradecer.
    um abraço e tudo de bom.

    ResponderExcluir
  55. Querido Fabiano, só prá dizer que eu é que sou muito burra mesmo (ou talvez estivesse um pouco cansada ontem tá!) hoje voltei, refiz os passos e consegui de primeira. Não falei que você é D++++ ?
    Digo e repito!!!

    ResponderExcluir
  56. muito bom, amo as dicas daqui! beijao

    ResponderExcluir
  57. Depois de muito penar para fazer isso, finalmente cheguei aqui e consegui!!!! Ficou lindo...Valeu pelas dicas e pela ótima explicação!

    ResponderExcluir
  58. Porque a minha favicon não aparece nos favoritos de outros blogs?

    Aparece na minha url normal só em Firefox. Exploer, Chromme tbm não.
    Não etendi.

    Obg.
    Rodrigo

    ResponderExcluir
  59. alguns navegadores apresentam diferenças... mas agora o blogger permite enviar o favicon e certamente desta forma logo aparecerá em todos os navegadores

    ResponderExcluir
  60. Hum, vamos ver se entendi Fabiano: É só aguardar que logo mais vai aparecer?? Tenhos dois blogs e fiz nos dois. Ontem eu repeti o procedimento como no sua video aula em um dos blogs pra ver se eu tinha feito coisa errada na hora de exportar a imagem etc. Fiz da maneira que pede.

    Então vou aguardar...

    Obrigado.
    Abs.
    Rodrigo
    http://cinemarodrigo.blogspot.com/

    ResponderExcluir
  61. o seu computador pode ter utilizado o historico de internet... por isso as vezes não aparece na hora...

    ResponderExcluir
  62. Ah, blz! Vc não tem nenhuma outra dica pra dar quanto a explicação sobre o histórico da internet do meu computador? Já faz dias que não atualiza a imagem da url dos meus blogs. No google chroma apareceu. Tenho que aguardar mesmo?

    Valeu!

    ResponderExcluir
  63. infelizmente alguns códigos dão diferenças entre os navegadores... e não tem como corrigir... tente usar a imagem no formato png também, com esse código:

    < link href='imagem formato icone' rel='shortcut icon' >
    < link href='imagem original' rel='shortcut icon' type='image/png' >

    Como alterar o favicon do Blog

    ResponderExcluir
  64. Infelizmente deu erro aqui. Usei esse código que vc enviou mas deu erro no meu editor HTML. Também acessei e li as instruções para exportar em png aqui no blog: http://www.dicasparablogs.com.br/2009/07/converter-imagem-jpg-ou-gif-em-icone.html

    ...seguindo esse link e não entendi. Me perdi na parte do Imageshack. A dificuldade é transformar a imagem salva em png. Tentei colar esse código no meu editor e modificar e não deu certo.
    Não entendi mesmo!!!!?

    Obrigado.

    ResponderExcluir
  65. no meu blog aparece na aba do chorme mas não na barra de endereço... talvez seja normal assim...

    ResponderExcluir
  66. Continua não aparecendo a imagem do meu blog, tbm, nos blogs que me linkaram em seus favoritos. Eu vejo o de todos menos o meu! Uma amiga blogueira disse que o dela demorou e que talvez seja um bug do blogger e que acontece. Confere?

    Eu já tentei de tudo e cansei.Segui suas instruções.
    Obrigado mesmo assim, mas acho que vou esperar.
    No explorer apareceu, só que acessei de outro computador. Provavelmente vc esta certo quanto ao histórico do meu navegador.
    Abs.!

    ResponderExcluir
  67. Olá. Li outros tutoriais e resolvi voltar a mexer.
    Impressionante como a imagem Ico nao aparece no favorito em outros blogs. Apenas na minha barra de endereços. Não sei o que fazer?? Já limpei o meu histório de todos os navegadores e nada.

    ResponderExcluir
  68. além da imagem no formato ico, use também uma png, com esse código:

    <link href='url da imagem' rel='shortcut icon' type='image/png'/>

    ResponderExcluir
  69. Ok. colo o código inteiro da imagem ico dentro deste código no ligar de 'url da imagem'? OU outro formato depois, logo abaixo do código ico na no editor?

    ResponderExcluir
  70. Rodrigo Mendes
    se for usar a outra linha de código tem que ser com imagem .png

    ResponderExcluir
  71. Certo, agora não sei como fazer isso. Url de uma imagem em png em qual programa?

    ResponderExcluir
  72. use um programa para editar imagens para criar a imagem em formato .png, mas precisa hospedar as imagens

    ResponderExcluir
  73. Olá Fabiano, eu consegui resolver o problema da Favicon. Agora ta certo.

    Mas surgiu um outro problema. E não achei nenhum tópico aqui.

    *porque o meu link não atualiza no blogroll?
    Hoje ele deu um problema e não esta atualizando o post nos outros blogs. Tem blogs que apresentam uma atualização automática de um post escrito há dias que aparece "há 2 horas atrás" até ser atualizado de novo.
    Gostaria de saber e resolver este problema.

    Obrigado.
    conheça meu blog: http://cinemarodrigo.blogspot.com/

    ResponderExcluir
  74. veja se o feed do seu blog está correto... as atualizações são feitas através do feed

    ResponderExcluir
  75. Oi, tava atualizando os meus feeds e houve um problema. Pode ser que a demora nas atualizações do blogroll seja pq não tenho feed inscrito e esta prejudicando o meu blog. Poderia me ajudar Fabiano?

    Quando eu entro para me me inscrever no FeedBurner aparece isso: "Your feed filesize is larger than 576K. You need to reduce its size in order for FeedBurner to process it. Tips for controlling feed file size with Blogger can be found in Tech Tips on FeedBurner Forums, our support site." E não me deixa prosseguir...
    já tenetei de tudo, validei o feed que ele pede e usei a versão antiga e mesmo assim nada. Não to conseguindo avançar nas etapas. Poderia me ajudar?
    Abs.

    ResponderExcluir
  76. infelizemente o feedburner tem limite de tamanho....

    reduza o numero ou tamanho das postagens

    ResponderExcluir
  77. talvez seja pq eu post com muitas imagens mais o texto.. né?
    olha o meu blog: http://www.cinemarodrigo.blogspot.com/

    vou tentar reduzir. Teria algo tb com relação ao número de postagens no topo? Há blogs q tem mais de 2 posts e suporta feed atom.

    ResponderExcluir
  78. Eu li no tutorial do feedburner que não é recomendável postar textos através do word e colar no blog. Pode pesar, eles recomendam editores de texto como o bloco de notas ou escrever direto no editor do blog.

    Pior que ja tenho o blog a três anos e há muitas postagens que edito antes no word.

    ResponderExcluir
  79. Rodrigo Mendes
    o problema é só na hora de publicar... se apareceu como você queria tudo bem...

    mas é melhor copiar no bloco de notas para não importar as formações

    ResponderExcluir
  80. Já resolvi o problema do Feed ;) Reduzi o tamanho de TODOS OS POSTS DO BLOG com o JumpBreak. Acabei de publicar o ícone do Feed tb para os seguidores assinarem, mas neste exato momento a recente postagem não apareceu no blogroll dos blogs. Fiz td que pude. Era o feed como vc me sugeriu, mas será que vai demorar p/ publicar de novo??
    Oh god!

    ResponderExcluir
  81. se fez as configurações corretamente deve funcionar normalmente em questão de minutos

    ResponderExcluir
  82. Esta normal. Só que normalizou em questão de horas.

    Abs.
    Obrigado.

    ResponderExcluir
  83. bom de mais obrigado manow.

    ResponderExcluir
  84. Seu blog é maravilhoso,eu só tenho a agradecer,consegui fazer varias mudanças legais no meu blog graças a vc,muito obrigada!

    ResponderExcluir
  85. Olá muito obrigado pelas dicas seu blog é um dos melhores!

    ResponderExcluir
  86. nao funfou de novo deu isso: rel="shortcut icon" href="/favicon.ico" />
    e eu colei antes de head tal la
    o q eu fiz de errado

    ResponderExcluir
  87. nada daqui funciona nao gostei do seu blog e se vc nao postar isso(q eu ja sei q nao ira postar) vc nao tem coragem de.... aff zuacao funfou tudin certo nao coloco o link do meu site pq ali nao dexa entao..ficou show vlw site maravilhoso e so tenho a elogiar mandei esse site para um mont de amigos flw!!!!!!!!

    ResponderExcluir
  88. neste trecho precisa de um endereço completo

    href="/favicon.ico"

    precisa hospedar o icone e pegar o endereço dele como se fosse uma imagem

    http://www.google.com/logos/2011/brazil_day-2011-hp.jpg

    ResponderExcluir
  89. Valeu mesmo tava a muito tempo tentando fazer isso
    E a próposito visitem meu Blog:
    stratequer.blogspot.com

    ResponderExcluir
  90. Cara não gostei da imagem que coloquei no Favicon do meu blog!
    Como faço para remove-la?

    ResponderExcluir
  91. Carlos Rhober.
    a melhor coisa a fazer é trocar por outra imagem que goste

    ResponderExcluir
  92. Cara brigadão mesmo pelas dicas e parabéns pelo Blog!
    Mais voltando ao assunto!
    Consegui remover a imagens que coloquei no Favicon do meu blog e atualmente esta aparecendo a do blogger normal, mais venho tentando inserir uma nova imagem e não estou conseguindo.
    Aparentemente não fiz nada de errado ao remover a primeira imagem que coloquei.
    Você sabe oque bode estar acontecendo?
    Venho tentando o processo da mesma maneira que obtive sucesso na primeira, mais a nova imagem não aparece.

    ResponderExcluir
  93. Carlos Rhober.
    se já colocou uma vez e retirou então exclua o historico de internet do seu computador porque as vezes você está vendo a versão do historico.

    tente clicar f5 para atualizar a pagina do seu blog

    ResponderExcluir
  94. Fabiano Roberto, Eu fiz da maneira mais fácil que o Blogger disponibilizou, do Design> Elementos da página> Favicon> Editar> Escolher Arquivo> Salvar.

    Ok, Mas o icon não funcionou no Google Chrome, apenas no Internet Explorer. No Google Chrome o ícone fica aquele B de Blogger

    ResponderExcluir
  95. tente colocar o icone em dois formatos: .ico e .png

    assim:

    < link href='imagem formato icone' rel='shortcut icon'/ >
    < link href='imagem original' rel='shortcut icon' type='image/png'/ >

    ResponderExcluir
  96. A dica foi boa,mas não consigo alterar o favicon no meu blog,o que eu faço agora

    ResponderExcluir
  97. Olá parceiro. Sou o moderador da página iNEWS: http://www.bloginterligado.com.br/ Tentei os dois códigos, mas não funcionou no meu template. Gostaria de saber se teria como vc me ajudar. Meu e-mail é aflnlimalima@hotmail.com, ou se proferir deixa um comentário na minha página. Abraços e parabéns!

    ResponderExcluir
  98. tente enviar a imagem diretamente para o blogger na pagina layout.

    agora já é possível trocar o favicon pela pagina layout

    ResponderExcluir