Imagem na Barra de Endereço

Já vimos e publicamos outros códigos para colocar uma imagem no lugar do ícone na barra de endereços, mas eles apresentam um problema com o Internet Explorer, vamos corrigir isso mostrando um outro código, repare que são duas vezes a mesma coisa mudando somente o formato da imagem .ico e .png:

<link href='imagem.ico' rel='shortcut icon' type='image/x-ico'/>
<link href='imagem.png' rel='shortcut icon' type='image/png'/>

Crie uma imagem no formato .png e hospede no ImageShack depois converta a imagem para o formato de ícone usando o site Converticon 2.1 e hospede o arquivo do ícone(.ico) no site MerryPic, se tiver duvidas sobre como fazer isso veja mais detalhes sobre como converter e hospedar arquivo no formato ícone(.ico), então coloque os endereços no lugar indicado no código acima, cuidado para pegar a url correta de cada imagem, estão em direct link pois as outras são paginas que mostram sua imagem(ícone) e se usar qualquer outras delas o código não funcionará.

Depois entre na pagina editar html, encontre ]]></b:skin> e coloque o código logo abaixo, ficará desse jeito:

]]></b:skin>
<link href='imagem.ico' rel='shortcut icon' type='image/x-ico'/>
<link href='imagem.png' rel='shortcut icon' type='image/png'/>
</head>

Agora é só clicar para visualizar e depois salvar se estiver tudo correto. Apenas mais um lembrete, no internet Explorer o ícone demora um pouco até aparecer e às vezes só vai funcionar depois que você carregar a página novamente.

Depois que publicamos essa explicação o site de hospedagem apresentou alguns problemas, então sugerimos usar o Free FavIcon.

Alguns dos sites 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.

Veja também:

Transformar imagens em ícones para barra de endereço
Programas para editar imagens grátis
Como hospedar e achar a url certa para usar em códigos
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

51 comentários:

  1. Carambaaaa deu certo !!! Parabéns pelo blog galera, muito obrigado msm !! Tava afinzão de fazer isso msm valew. Depois vamos fazer uma parceria en ..

    http://israelrockinroll.blogspot.com

    ResponderExcluir
  2. Infelizmente não fazemos parcerias com blog com menos de 4 meses de existência, mas se quiser colocar o nosso link ou banner, você pode aparecer no top parceiros, leia mais sobre isso aqui:

    http://cidadeweb.110mb.com/dicas/dicastop.html

    ResponderExcluir
  3. Não consegui coloca-lo no ConvertIcon...
    Faço tudo direito.. mas na hora de salvar no formato .ico nao consigo!!

    Quando clico para salvar.. fala que salvo.. mas nao aparece na pasta o arquivo... =/

    ResponderExcluir
  4. Não consegui coloca-lo no ConvertIcon...
    Faço tudo direito.. mas na hora de salvar no formato .ico nao consigo!!

    Quando clico para salvar.. fala que salvo.. mas nao aparece na pasta o arquivo... =/

    ResponderExcluir
  5. Nos meus blogs já estou colocando...fica muito bom assim personalizado.
    abração

    ResponderExcluir
  6. olhe melhor a pasta que salvou, se está procurando na pasta correta, deve geralmente ele salva com o nome original do arquivo, portanto deverá ter 2 arquivos com o mesmo nome só que um deles é formato icone.

    se não achar, crie uma nova pasta para salvar, assim fica fácil achar

    ResponderExcluir
  7. Eu entendi tudo, sobre converter e tal... Mas o meu problema é, como eu faço o ícone? Tipo, eu não tenho nada a converter! Como fazer o ícone? :P

    ResponderExcluir
  8. no meu blog não aparece.
    uma pergunta: qual link escolher no merrypic, entre tantos?
    e no imageshack?
    obrigado,
    Eduardo

    ResponderExcluir
  9. Julianaa imagem para converter você tem que fazer ou achar na internet, pode ser qualquer imagem, se quiser aqui tem uns programas grátis para editar imagens

    http://dicasparablogs.blogspot.com/2008/08/programas-gratuitos-para-edicao-de.html

    ResponderExcluir
  10. o link para usar no código é o ultimo da lista, se não me engano é direct link

    ResponderExcluir
  11. aki nao funcionou e fiz tudo direitinho

    ResponderExcluir
  12. testei e funcionou normalmente, talvez você tenha usado o endereço errado da imagem

    ResponderExcluir
  13. no meu naum fuciona de jeito nenhum no Ie soh no Fire

    ResponderExcluir
  14. Fabiano, seu blog é o meu SOS, quando resolvo mexer nos meus blogs. Funcionou direitinho, desde a tranformação p/ o formato .ico até a hospedagem. AS páginas já estão bonitinhas, mas tenho uma dúvida: não está aparecendo o iconezinho dos meus blogs naquela página dos "Seguidores", no ítem "Sites dos quais eu participo"... Por que será?
    Beijocas, sucesso!
    Aguardo sua resposta!

    http://claudiacavalcanti.blogspot.com
    http://lojinhadaclau.blogspot.com

    ResponderExcluir
  15. Cláudiaa pagina de seguidores é fora do seu blog, não tem como modificar lá

    ResponderExcluir
  16. Funcionou no MF e no IE \o/
    Só que no IE tem mesmo que carregar a pág. de novo -.-'

    OBS: o link que você colocou para o site MerryPic não funcionou no Firefox. Quando eu cliquei no link, ficou assim na barra de endereços: "http://dicasparablogs.blogspot.com/2009/04/http://www.merrypic.com" e deu como "pág. não encontrada", mas no IE não teve problema.

    ResponderExcluir
  17. Giselα Cαrdelli
    na hora de publicar o código ficou um espaço no inicio do endereço por isso estava dando aquele erro, já corrigi.

    obrigado por avisar.

    ResponderExcluir
  18. Amigos Parabéns Pelo blog exelente explicação só queria saber como colocar os links na barra lateral para abrir em nova janela ja que estou cilocando dentro do blog com as imagem am.matioli@gmail.com abraços

    ResponderExcluir
  19. Carai que chaato, eu to mó finzao de troca aquela pooh# de icone do Blogger , fiz tudo certinho, mais qndo eu vo no blog, acaba ficando sem icone, como se eu tivesse tirado, dai do um atualizar, fika na mesma, nao funfo com net Explorer nem FireFox :/, espero ajuda

    ResponderExcluir
  20. tente usar o site http://www.iconj.com/icon_generator.php

    para criar e hospedar a imagem do icone, o código é esse mesmo que está nesta postagem, quando coloquei isso no meu blog nas primeiras visualizações não apareceu somente depois, mas não sei explicar o porquê.

    veja também essa postagem sobre o mesmo assunto:
    http://www.dicasparablogs.com.br/2009/03/icone-na-barra-de-endereco-e-favoritos.html

    ResponderExcluir
  21. Siim sim no meu também, agora apareceu, mais valeu aii, otimo site este, ajuda muito iniciantes, Valeeu

    ResponderExcluir
  22. Siim sim no meu também, agora apareceu, mais valeu aii, otimo site este, ajuda muito iniciantes, Valeeu

    ResponderExcluir
  23. Muito legal essa dica, mais esse tempinho que você disse q demora pra aparecer é mais ou menos qnt tempo?

    ResponderExcluir
  24. se clicar para atualizar a pagina já deve aparecer, ou clicar em algum link que abre outra pagina do seu blog

    ResponderExcluir
  25. eu faço tudo direitinho, eu salvo mas na hora H não aparece a minagem na barra de endereço...

    ResponderExcluir
  26. Valew ai, consegui fazer tudo.Mas mudei o codigo, e em vez de usar em png fiz em jpg mesmo..........Ficou Show

    ResponderExcluir
  27. Muito bom este Tutorial, Parabéns Pelo site..

    ResponderExcluir
  28. fabiano eu não achei direct link só achei link botei la mais nao deu certo

    ResponderExcluir
  29. veja se isso ajuda a encontrar o direct link

    http://www.dicasparablogs.com.br/2009/07/imagem-nao-aparece.html

    ResponderExcluir
  30. FABIANO amei seu blog, estou começando o meu e suas postagens tem me ajudado muitooooooooooooo!
    e ja estou divulgando
    OBRIGADA!!!

    ResponderExcluir
  31. cara deu certinho, muito obrigado pela ajuda.

    blogdagsn.blogspot.com

    ResponderExcluir
  32. valeu cara tava procurando esse tuto a um bom tempo e parabens pelo site, sucesso

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

    ResponderExcluir
  34. mais uma vez obrigado cara eu acho que não teria sussesso com meus blogs se não fosso o dicas para blogs valeu

    ResponderExcluir
  35. Consegui!!! graças a você Fabiano. VLW.

    ResponderExcluir
  36. Valeww meu caro, enfim consegui. Compatível com Chrome e Firefox, mas o IE naum, é uma coisa ruim mesmo, hehehe... Por isso prefiro o Chrome... DanielFloripa.blogspot.com =) Big Hug 4all

    ResponderExcluir
  37. as vezes é necessário clicar para atualizar a pagina no internet explorer....

    tb não gosto deste navegador rsrs

    ResponderExcluir
  38. Fabiano, mais uma vez aki com sua ajuda aprimorando meu blog. Cara tô com problemas pra achar o código que você falou, esse aki -> ]]>
    depois vem head. mas n estou conseguindo encontrar nenhum dos dois. O meu template é o mais simples. modifiquei com o "modelo de designer" do blog mesmo. se puder me dar uma força, agradeço bastante. abrass

    ResponderExcluir
  39. veja na pagina editar html todo site tem head, pesquise somente pela palavra assim é mais facil caso tenha algum espaço a mais no código.

    ResponderExcluir
  40. clique para atualizar a pagina no internet explorer, deve funcionar também

    ResponderExcluir
  41. Olá fabiano, então, todos os sites que vc colocou para hospedar a imagem ICO estão fora do ar, achei um perfeito mesmo, muito bom, está ON, o melhor, para mim, o link é:
    http://www.picturestack.com/
    Recomendo que coloque em suas postagens! Um abração e parabéns pelo post! :)

    ResponderExcluir
  42. esse tutorial já tem algum tempo então é possivel que haja algum problema nos sites de hospedagem, já atualizamos a postagem, mas alguns sites tem falhas momentaneas depois voltam ao normal

    ResponderExcluir
  43. O MeryPic tá em árabe! Não consegui fazer.

    ResponderExcluir
  44. Consegui Fazer! Deu certo, todas as dicas que eu peguei aqui deu certo até agora, OBRIGADO VOCÊS SÃO UM MAXIMO

    O site de hospedagem de arquivo ico que eu usei foi o picture stack: http://www.picturestack.com/
    e recomendo muito.

    O unico blog que da as melhores dicas são vocês!!!!!!!!

    ResponderExcluir
  45. Obrigada pela dica já esta todo direitinho
    la agora como posso fazer para meter o alfabeto no topo do meu Blog.

    ResponderExcluir
  46. How pq quando entro no meu blog pelo intenet explorer nao aparece meu icone =s

    ResponderExcluir
  47. as vezes o código dá erro no internet explorer ou então seu computador está usando o historico de internet

    ResponderExcluir