06/03/2009

Ícone na barra de endereço e favoritos

Uma correção o site está fora do ar, não sabemos qual o motivo e se voltará ao normal, então encontramos outro site para gerar e hospedar as imagem do icone, chamado Free FavIcon, nele é possivel fazer as duas coisas ao mesmo tempo gerar a imagem no formato .ico e hospeda-la.

Para colocar uma imagem no lugar do ícone do blogspot na barra de endereços do navegador, primeiro você precisa converter e hospedar uma imagem no formato .ico, então vamos começar convertendo uma imagem normal(.jpg, .gif ou .png) em .ico para isso vamos usar o site Converticon 2.1, quando entrar no site clique no botão Get Started, vai abrir uma janela para você procurar a imagem no seu computador, veja embaixo da linha aonde vai o nome do arquivo caso o tipo de arquivo estiver em icon(ico) troque para image(png, gif, jpeg) e encontre a imagem. Quando você clicar na imagem ela já aparecerá na tela, então clique em Export sugerimos escolher 32 x 32 ou 16 x16 e clique em save as. Esta parte já está pronta, convertemos uma imagem normal em uma imagem para ícone da barra de endereços.

Agora vamos hospedar esse ícone, um site que faz o serviço de hospedagem de arquivo .ico gratuitamente é o MerryPic, clique em arquivo e encontre onde a imagem que vamos usar como ícone, depois clique em upload, na tela seguinte copie o código que está na ultima linha (direct) e coloque no trecho abaixo:

<link href='endereço da imagem' rel='shortcut icon'/>
<link href='endereçod a imagem' rel='shortcut icon'/>

Agora vamos até a página editar html do blogspot e procuramos por:

]]></b:skin>
</head>

E colocamos o código antes de </head> , ficará assim:

]]></b:skin>
<link href='endereço da imagem' rel='shortcut icon'/>
<link href='endereço da imagem' rel='shortcut icon'/>
</head>

Claro que com o endereço do ícone que hospedamos no lugar indicado. Fizemos os testes e funcionou perfeitamente no Internet Explorer, Firefox e Opera. Além de aparecer a imagem na barra de endereços do navegador o ícone ainda aparece ao lado do nome do blog quando alguém adiciona seu site aos favoritos.

Alguns dos sites ou códigos que indicamos apresentaram problemas então fizemos um novo tutorial sobre como colocar um favicon (imagem na barra de endereços), veja aqui nossa atualização mais recente sobre a imagem na barra de endereços do blog.

Outro site para hospedagem de icones é o Free Favicon Hosting, afinal é sempre bom ter mais opções.

85 comentários:

  1. Olá! Em primeiro lugar, parabéns pelo site. É ótimo!!
    Mas nao consegui mudar o icone na barra de endereço. Mesmo seguindo toda a orientação.
    O que terá acontecido??
    Obrigado!

    Eder José

    ResponderExcluir
  2. dificil saber o que houve, porque testei e funcionou normalmente.

    olhe se não esqueceu de colocar os sinais ' < >

    quando hospedou a imagem, pegou o código certo? é o ultimo da lista.

    ResponderExcluir
  3. Parabéns, Fabiano!
    Sua dica para colocar icone no blog funcionou perfeitamente no blog http://gramigosmangueirao19hs.blogspot.com/

    ResponderExcluir
  4. Muito bom cara!!!
    A dica funciona perfeitamente e seu blog é excelente, obrigado!

    ResponderExcluir
  5. UHUUUUUUUUUU FICOU MUITO MASSA O MEU .ICO,VL PL DIK ....OK......GURI..FUI....

    ACESSE LÁ PRA QUEM QUIZER VER....

    ResponderExcluir
  6. eu nao consegui pq nao entendi uma coisa

    tem q colocar o link do(direct) antes ou depois do trecho?

    por favor me ajudem
    meu blog é http://kauandownloads.blogspot.com

    ResponderExcluir
  7. kauan98
    você coloca o link no código onde está escrito endereço da imagem

    ResponderExcluir
  8. deu certinho no meu
    http://donizett.blogspot.com

    ResponderExcluir
  9. Jipagito:::: tbm não consegui memmo seguindo todos os procedimentos, aparece a mensagen chata do blogger! O que será q aconteceu?

    ResponderExcluir
  10. JipaGitoquando publicamos esse código ele funcionou bem, mas depois deu alguns problemas principalmente com o internet explorer, então publicamos esse novo jeito de colocar a imagem na barra de endereço
    http://dicasparablogs.blogspot.com/2009/04/imagem-na-barra-de-endereco.html

    e aproveitamos sua observação para colocar esse link também no final da postagem, assim as pessoas já usaram o novo código.

    obrigado por comentar sobre o assunto.

    ResponderExcluir
  11. obrigado fabiano robert mas uma pergunta vc q é o dono do blog

    ResponderExcluir
  12. Por primeiro parabens pelo seu blog, obrigado por responder as minhas perguntas e agora deu certo entrem em http:/kauandownloads.blogspot.com/
    e obrigado por me ajudar e me passa seu msn

    ResponderExcluir
  13. Amigão, parabéns! Há muita coisa legal no seu site, comecei "ontem" a blogar, segui suas orientações e bingo ficou legal.

    ResponderExcluir
  14. aew kara o sou teu fan parabens!

    ResponderExcluir
  15. eu fiz tudo direitinho mais na hora de hospeda a imagem no MerryPic não foi avaliado oque aconteceu

    ResponderExcluir
  16. o site tem algumas regras para imagens veja se a sua está dentro delas

    ResponderExcluir
  17. Cara preciso de sua ajuda nõ entendi direito

    meu e-mail: endriu89@hotmail.com

    ResponderExcluir
  18. realmente o site MerryPic está fora do ar.

    encontramos outro site, e já colocamos no inicio da postagem, onde é possível gerar e hospedar a imagem para usar na barra de endereço
    http://www.iconj.com/icon_generator.php

    ResponderExcluir
  19. Pocha, não consegui encontrar esse 'b: skin'...

    pode me ajudar???

    meu e-mail é:

    jessicathaisa.jeh@hotmail.com

    ResponderExcluir
  20. se achar </head> é só colocar antes disso.

    ResponderExcluir
  21. Olá Fabiano
    Desculpe, mas apesar de todas as explicações que você deu, eu não consegui finalizar. Não estou sabendo onde devo colocar o endereço obtido no Merrypic. Tentei de algumas formas, mas não deu certo. Sei que o problema deve ser comigo, porque não sei quase nada desses assuntos, mas se puder me dar mais alguma dica ou explicação fique certo de que fará um coração feliz! rsrs
    Meu e-mail é deb.paula@hotmail.com
    Obrigada
    Débora Paula

    ResponderExcluir
  22. veja essa nova postagem que fizemos
    http://www.dicasparablogs.com.br/2009/07/converter-imagem-jpg-ou-gif-em-icone.html

    ResponderExcluir
  23. para colocar o código na página editar html precisa apagar todo o codigo que ja ta ? ou so colocar embaixo de toda aquela escrita que ja está ?

    ResponderExcluir
  24. só apague se já tiver algo igual ao que mandamos colocar, o resto do código não altere nada

    ResponderExcluir
  25. Olá, muito bom mesmo, você não sabe o quanto está me ajudando :D'

    www.baakas.blogspot.com

    ResponderExcluir
  26. Fabiano não precisa ser icone a imagem pode ser qualquer outro tipo
    entrem em http://kauandownloads.blogspot.com

    ResponderExcluir
  27. quando fiz os testes não funcionou com imagens normais em todos os navegadores, mas acredito que com as atualizações recentes cada vez ficará mais simples colocar a imagem na barra de endereço justamente por isso, os navegadores mais novos aceitam qualquer imagem

    ResponderExcluir
  28. A paz do Senhor.
    Valeu, é de muita utillidade as dicas que você dar.
    Funcinou direitinho, e olha que eu tava quebrando cabeça com outras "dicas" em outros sites até chegar em você.
    Peguei teu banner e colei no meu.
    Muito obrigado.
    Deus te abençoe ssempre.

    ResponderExcluir
  29. exelente! muito Obrigado!

    Parabéns Sitee muito show!!
    Me Ajudou Mto!

    Thankz

    ResponderExcluir
  30. meu blog não tem o ...head... de baixo
    do ...b:skin.... o template e o Template Blue qualquer coisa pode ver meu blog www.cpto.blogspot.com
    me ajude ja tentei de td me ajudeeeeeeeeeeeeeeeeeeeeeeeeee!!!

    ResponderExcluir
  31. Tooom
    procure melhor deve te head, todo blog tem

    ResponderExcluir
  32. Adoreeeeeeeeeeeeeeei nunca iria conseguir sozinha.
    Blogs como o seu é que fazem a diferença, mesmo o meu blog estar cheio de coisas fúteis e adereços.
    Valeu a dica.

    ResponderExcluir
  33. Obrogada Fabiano Roberto. Coloquei o favicon nos meus 3 blogs graças a você.
    beijoooo

    ResponderExcluir
  34. EU AAAAAMOOOOOOOOOOO VCSSSSS ;D
    FUNCIONOUUUUUUU UIIIIIIIIIISSSSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AHAHAHAHAHHAAH VLW MESMO VLW!

    ResponderExcluir
  35. Ficou mto bom! muito bom MESMO!!

    O Melhor blog sobre blogs que já vi!


    VALEU DICAS PARA BLOGS!

    ResponderExcluir
  36. Movimento Juvenil,

    Agradeçe pelo tutoral de colocar imagem .ico.

    Muito bom seguir todos os passos e deu 100% Legal.

    Visite: http://www.movimentojuvenilss.blogspot.com

    e deixe um comentario no Mural sobre o Blog.

    ResponderExcluir
  37. consegui tambem sem transformar em icone ou seja com arquivo png normal...
    esta etapa pode ser desnecessária.

    ResponderExcluir
  38. raghy30, nem todos os navegadores aceitam outros formatos sem ser o .ico, principalmente os antigos


    mas acho que em breve realmente converter para o formato icone pode ser desnecessário

    ResponderExcluir
  39. Ótima dica , seu site é ótimo .
    Brigadão mesmo .

    ResponderExcluir
  40. Muito obrigado, sua dica foi exencial. Eu estava procurando por aew e nada dava certo... mas aqui consegui!!!!

    ResponderExcluir
  41. Muito bom todas as dicas deste blog, já peguei várias dicas daqui e todas infalíveis, simples e direto!, Parabéns à todos. Passa lá pra ver como ficou. =]

    ResponderExcluir
  42. para procurar essas palavras é só clicar ctrl+f

    ResponderExcluir
  43. Olah Fabiana!
    Gosto muito das suas dicas, mas não estou a conseguir aplicar esta no meu site.
    Penso que fiz tudo certinho mas quando vou a carregar a página, o icone fica o mesmo de sempre, o do blogspot.
    Será que me consegue ajudar?

    Aqui fica o meu site:
    http://www.tugapassatempos.com/

    ResponderExcluir
  44. Paulo Almeida
    as vezes é necessário clicar para atualizar a pagina(f5) para visualizar alterações no blog.

    ResponderExcluir
  45. Não consigo entar no site Merryc!!!!

    ResponderExcluir
  46. veja esse site para hospedar o favicon
    http://www.iconj.com/icon_generator.php

    ResponderExcluir
  47. Olá, Fabiano. Consegui colocar ícone na página principal do meu blog, mas nas outras páginas fica com o ícone do blogger. Talvez seja questão de tempo ou algo do meu computador. O link é http://yonoloconoco.blogspot.com/ .
    Obrigado.

    ResponderExcluir
  48. as outras paginas mudaram também, talvez seu computador esteja acessando o blog pelo histórico de internet

    ResponderExcluir
  49. Sim, agora que vi mudaram, mas na lista de blogs relacionados não. Na lista de http://blogseriopontocom.blogspot.com/ o meu blog ainda está com o símbolo laranja do blogger, e não o ícone novo. Tem como mudar? Já vi blogs relacionados com símbolo personalizado.
    Obrigado.

    ResponderExcluir
  50. Rafael, você precisa colocar os códigos no blog e depois clicar para atualizar a pagina, geralmente na primeira vez que visualizar não vai aparecer porque o computador usa o historico de internet

    ResponderExcluir
  51. Sim, sim. Isso foi feito faz tempo. Nas páginas do meu blog o ícone aparece. Mas quando está relacionado em outros blogs o símbolo é o do Blogger.

    ResponderExcluir
  52. você está falando da lista de blogs?

    mas nos outros blogs aparecerá o simbolo blogger acho que não tem como mudar.

    ResponderExcluir
  53. Parece que dá sim. Olhe os blogs relacionados "CoisasDeDiva", "Modo de Falar" e "Sim, senhorita." deste blog: http://naraindica.blogspot.com/ .
    Todos tem ícone personalizado e estão na lista de relacionados.

    ResponderExcluir
  54. visitei o site e olhei os blogs que tinham icones diferentes, todos eram wordpress, acho que é proprio do blog não alterar o icone na lista de blogs

    ResponderExcluir
  55. Valew Amigão !!

    Muito Obrigado

    ResponderExcluir
  56. Oi! Primeiramente, parabéns pelo blog, me ajuda muito!

    Eu não consegui achar o ]]> e o no HTML do meu blog. Em que parte mais ou menos fica? No inicio, no meio ou no fim???

    ResponderExcluir
  57. use o ctrl F para procurar, ficar perto de /head>

    ResponderExcluir
  58. Quando eu entrei nesse site ele estava numa lingua estranha eu traduzi pelo google mais nao consegui achar arquivoe e tudo que vc manda

    ResponderExcluir
  59. infelizmente muitos sites são em ingles e não tem versão em portugues.... não tem o que fazer a respeito disso

    ResponderExcluir
  60. Olá, fiz tudo certinho, só não consegui um site pra hospedar a imagem ICO, pois o que vc indicou não entrou de jeito nenhum!
    Teria outro pra me indicar?

    Obrigada! bjOs e curto muito suas dicas!

    ResponderExcluir
  61. veja o link fo free favicon hosting no final do tutorial, lá poderá hospedar a imagem

    ResponderExcluir
  62. no meu blog, não consigo achar esse código :x
    o que faço?
    não tem o html citado acima!

    ResponderExcluir
  63. use o ctrl f para achar o código no seu html

    ResponderExcluir
  64. massa cara eu coloquei um gif e deu certo estou muito grato ,valeu a dica

    ResponderExcluir
  65. UHUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU
    DEU CERTO
    SÓ NUM INTINDI UMA COISA
    COMO FAZER UM ICON NESSE SITE FIVECON ?

    ResponderExcluir
  66. resolveram um probleminha meu de esquecimento . Parabens pela montagem do blog... direto e rápido... assim que deve ser...

    ResponderExcluir
  67. Perfeito!! tentei com um monte de dicas, mas consegui resolver com a sua explicação. Obrigada!

    ResponderExcluir
  68. pena que no google chrome não funciona, será que não tem um hack para funcionar nele? aguardo

    ResponderExcluir
  69. Não dá, o código deve estar errado, essa porra dá erro, não muda, eu coloco a url da imagem nos lugar que estão escritos "endereço da imagem" mas CONTINUA COM O FAVICON DO BLOGGER, CACETE, CONCERTA ISSO PORRA

    ResponderExcluir
  70. Muiito showw gosteii massaa deuu sertooo hhaha

    ResponderExcluir
  71. Gustavo Fritz
    veja se já colocou algum código para alterar o favicon... se tem é bom retirar...

    veja se a imagem que está enviando está no formato correto .ico

    ResponderExcluir
  72. ótimo site, mas ainda assim, não consegui por. Tentei no Explorer no Chrome.

    ResponderExcluir
  73. Não consegui colocar a imagem em formato ICO. AJUDEEE

    ResponderExcluir
  74. tem varios sites que fazem isso, se não deu certo veja no tutorial tem links para outras opções

    ResponderExcluir
  75. Não estou conseguindo abrir o site do merry pic !

    ResponderExcluir
  76. @Gessica Costa realmente o site está fora do ar

    vamos fazer uma atualização neste tutorial, mas veja aqui: Como Colocar Favicon no Blogger

    ResponderExcluir
  77. Olá Fabiano, tudo bem?

    Sempre uso suas dicas e ontem resolvi usar essa. Mas cometi dois erros: Não fiz um backup antes (porque sempre dá certo...) e usei expandir modelos de widgets (porque não prestei atenção). Não deu certo, a imagem não apareceu, mas tudo bem.

    O problemão, é que apaguei o trecho que tinha colocado e salvei. Quando fui ver, perdi um monte de imagens do meu blog. Elas continuam no lugar mas não é possível visualizar, só aparecem riscos coloridos borrados. Você pode me ajudar?

    Vou te deixar meu e-mail, se puder entra em contato, para vermos o que você acha que pode ser feito. Como e o custo.
    susy.siqueira@gmail.com

    Um abraço!

    ResponderExcluir
  78. esse do teu site quais foram as medidas usadas EX;16X16
    32X32
    qual???

    ResponderExcluir
  79. a medida é 16x16, mas se tiver uma imagem em outro tamanho ela vai se ajustar.

    mas é melhor fazer a imagem já no tamanho certo

    ResponderExcluir