21/07/2009

Converter imagem jpg ou gif em ícone (.ico)

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.

Para colocar uma imagem na barra de endereços ao lado do endereço do blog, precisamos transformar uma imagem normal num ícone, depois hospedar esse ícone e fazer o código para colocar no blog. Isso é um pouco trabalhoso, mas achamos um site que faz tudo isso de uma vez só. A unica coisa que precisar fazer é o upload da imagem e o site já dá o código pronto para colocar a imagem na barra de endereços no lugar do icone do blogger.

Faça uma imagem para usar como ícone, preferencialmente uma imagem quadrada, ou seja, com a mesma altura e largura, assim o risco de distorcer é menor, pois o ícone é uma imagem quadrada. Depois entre no site Free FavIcon, clique no botão arquivo para localizar a imagem e depois em upload it.
Fazer upload de imagem
Agora copie o código que está na caixinha embaixo de Simply copy and paste the code below in the head of your web pages.
Código do Icone para barra de endereços
Entre na pagina editar html (não clique para expandir o modelo) e procure por:

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

E coloque o código que copiou do site Free FavIcon entre essa linhas, ficará assim:
Pagina editar html

Para evitar erros em alguns navegadores salve a mesma imagem que usou no formato png, use um tamanho pequeno(36x36, que é algo próximo do tamanho do ícone) hospede no Imageshack, mas tenha a certeza que está usando a url correta da imagem, então adicione essa linha junto com o código gerado pelo site, colocando o link da imagem no lugar indicado:
<link href='url da imagem' rel='shortcut icon' type='image/png'/>

Salve as alterações e veja o resultado, se não aparecer o ícone na barra de endereços clique para atualizar a pagina. Já tínhamos publicado explicações sobre esse mesmo assunto, mas retornamos ao tema devido a problemas nos sites que sugerimos em outras postagens e, além disso, fazendo pelo site Free FavIcon é muito mais fácil, ele converte a imagem, hospeda e gera o código do ícone tudo num único clique.

Veja também:
Icone na barra de endereços
Veja quem copiou os textos do seu blog
Problemas para apagar um gadget
Imagem da carta enviar postagem
Related Posts with Thumbnails

51 comentários:

  1. Obrigado,Fabiano
    Estava a muito tempo a procurar um site assim que converte a imagem na hora!

    ResponderExcluir
  2. meu amiguito facil consegui fazer poxa esse blog de voces é massa cara nos ensina muitas coisas valeu mesmo

    ResponderExcluir
  3. Mas no Chrome o ícone não aparece e o seu a aparece, como fez?

    ResponderExcluir
  4. coloquei na postagem como salvar uma imagem em png para usar como icone, acredito que deve resolver o problema com o chrome

    ResponderExcluir
  5. muit bom esse site só qria sabe uma coisa como colocar aqle oq achou da dica em meu site ?


    entrem ai dowloadfilme.blogspot.com

    ResponderExcluir
  6. Valeu, colega! Funcionou no Chrome agora tbm! Obrigada!

    ResponderExcluir
  7. Preciso voltar e lhe agradecer mesmo de coração. Não imagina o tempo e nervos que já gastei com esse assunto. Havia feito um tutorial, mas era complicado tbm. Agora excluí aquele trem e estou indicando o seu post, beleza? Um forte abraço.

    ResponderExcluir
  8. Amei a nova dica!!! Obrigada!!!

    ResponderExcluir
  9. Devo ter feito algo errado, pois não consegui!

    ResponderExcluir
  10. vc pode me dizer como eu faço para retirar o cabeçalho e vez do cabeçalho eu coloco um banner ou um flash e vcx tb sabe onde hospedar flash

    ResponderExcluir
  11. Roberto Juniro

    para ocultar o titulo entre em html e coloque junto com h1 display:none;

    eu uso o site imageshack para hospedar o flash

    ResponderExcluir
  12. Olá Fabiano,

    Eu fiz como você falou e não deu certo,só no Google Chrome.O internet explorer não apareceu =/.

    ResponderExcluir
  13. Ana
    clique para atualizar o internet explorer as vezes não aparece a primeira vez que o site é carregado, talvez seu pc usou o histórico de internet.

    ResponderExcluir
  14. Nossa Fabiano segui como vc ensinou na postagem e deu certinho Obrigadão Tava a muito tempo querento fazer isso .Otima Dica .

    Obs : Saberia me Informar um serviço ou Site do Google que aceita arquivos .js ? Tipo por que o geocities vai terminar em Novembro e estão falando para salvar os arquivos que temos com eles .

    Abraço

    ResponderExcluir
  15. eu já usei o 110mb para hospedar sites eles aceitam o formato .js

    em breve(final de semana) vou publicar algumas dicas de onde hospedar sites gratuitamente

    ResponderExcluir
  16. Olá Fabiano,

    Isso mesmo,só faltava atualizar.Obrigada.òtimo Blog

    ResponderExcluir
  17. Cara queria colocar no meu blog quando a pessoa entrar nele aprecer antes uma imagem escrito clique aqui ou vote enquanto carrega, se pode me ajudar
    se puder me add no msn: faustofugaf@hotmail.com

    ResponderExcluir
  18. oi,
    tem um selo pra vc no meu blog,
    Tudo é História
    se puder vota na milena toscano
    vlw

    ResponderExcluir
  19. Zeca
    aqui tem como colocar uma mensagem ao entrar no blog
    http://www.dicasparablogs.com.br/2009/01/mensagem-ao-entrar-no-blog.html

    mas não deve ser bem isso que está querendo, esses avisos pedindo votos são códigos fornecidos pelos próprio sites onde será realizada a votação.
    fazer uma pagina de entrada no blog é meio trabalho e muitas vezes inútil pois a maior parte dos visitantes chega num blog através de links(google, yahoo..) e vão direto para a pagina sem passar pela inicial

    ResponderExcluir
  20. não consegui fazer, o site do FavIcon não entra... será problema no site ou problema aqui?

    ResponderExcluir
  21. Infelizmente o site Free FavIcon parece que foi retirado da internet, estou pesquisando outros sites para criar e hospedar icones e neste final de semana farei um novo tutorial sobre o assunto.

    ResponderExcluir
  22. o link do site não esta funfando!

    confere ai > http://1.bp.blogspot.com/_-v7nVhXnPEc/SmX2UADR_SI/AAAAAAAAATo/dGVkGATOL-U/s1600-h/upload-imagem.jpg




    flw

    ResponderExcluir
  23. no final da postagem tem uma atualização

    http://www.dicasparablogs.com.br/2009/09/como-alterar-o-favicon-no-blog.html

    ResponderExcluir
  24. Vlw Meus amigos!!!
    tutorial SHOW!!!!

    Jorginho - RJ

    ResponderExcluir
  25. CONSEGUIIIIIIIII!!!!!!!!!!!!!!

    SHOW, SHOW, SHOW!!!!!!!!!!!!!!

    ResponderExcluir
  26. Olá, consegui fazer tudo certinho, parabésn, muito bom, mas a imagem ficou um pouco embasada, cm resolver isso? Abs...

    ResponderExcluir
  27. Uauuuuu....

    Passei dias tentando com a ajuda de outros blogs.. e nada
    Com a ajuda de voces consegui de primeira.
    Adorei, com certeza vou recomendar,
    abraços!

    ResponderExcluir
  28. parabéns cara..muito bom!vc explica mto bem..deu super certo!!

    ResponderExcluir
  29. Valeu fabiano como no meu não deu aquela outra eu fiz nessa e tá aparecendo!
    Lou!Valeu!

    ResponderExcluir
  30. Também é possivel utilizar o Format Factory, que pode converter muito mais tipo de arquivos, para fazer download acesse este link:
    http://www.baixaki.com.br/download/formatfactory.htm
    Ela funciona nos Windows XP/Vista/7/2003

    ResponderExcluir
  31. Cara vcs são muito foda vcs são os melhores, muito obrigado pela ajuda. Valeu mesmo.

    ResponderExcluir
  32. Muito obrigado me ajudou muito mesmo !

    ResponderExcluir
  33. É muito importante descobrir isso.
    Pois o icon é preciso para o Internet Explorer.
    Nos outros funcionam o png.

    ResponderExcluir
  34. Olha aqui ainda nada de radia online nao tem link nao tocar musica, e muito mesmos escutar ate as outras radia ficam com um chiados devido apecariedade do som do Winamp e que eu uso aqui.

    obrigado pela atenção de mim digitando essa pagina.

    ResponderExcluir
  35. Muito obrigada, foi a forma mais fácil de resposta que li.
    Deus te abençoe!

    ResponderExcluir
  36. Maranata estudos
    mas agora tem outras formas de trocar o favicon... se quiser pode enviar a imagem diretamente ao blogger

    ResponderExcluir
  37. ONDE ESTÁ ESCRITO: ARQUIVO?? PRECISO DISSOOOOO!

    ResponderExcluir
  38. é só clicar em Free Favicon Hosting, veja aqui http://www.iconj.com/favicon_hosting.php

    ResponderExcluir
  39. Deu certo.Apanhei que só para conseguir, viu?Procurei um icon na internet, fiz o download e fui nesse site de hospedagem que você indicou Free Favicon,cliquei em Home, abriu a caixinha de Selecionar Arquivo, fiz todos os passaos que você deu. Colei no HTML do meu blog e vouilá ! Ficou ótimo.
    Obrigado, caro amigo por disponibilizar essas dicas.
    Tô prucrando a sua caixinha de Link-me pq adorei as dicas daqui e sempre qdo. faço mudanças me perguntam onde foi que eu as vi e como aprendi.Amei!

    ResponderExcluir
  40. Ei mas n ta carregando quando coloco o upload ele fica lá só carregando mas n sai do lugar

    ResponderExcluir
  41. esse tutorial já tem algum tempo, mas agora se quiser pode enviar a imagem para a barra de endereço diretamente para o blogger através da pagina layout

    ResponderExcluir
  42. Excelente e obrigado!!

    By Michael Felipe

    ResponderExcluir
  43. Como sempre, parabenizo-vos!!!
    Útil e simples!!
    Obrigado!!!!!!

    ResponderExcluir
  44. Obrigada, Dicas para Blogs! Sempre entro aqui e confio no seu conteúdo. Meu blog tem melhorado muito devido à sua ajuda. Laura Kim

    ResponderExcluir
  45. Obrigada, Dicas para Blogs! Sempre entro aqui e confio no seu conteúdo. Meu blog tem melhorado muito devido à sua ajuda. Laura Kim

    ResponderExcluir
  46. Nossa, eu só fui em Layout > Editar Favicon, escolhi o png e pronto!

    ResponderExcluir
  47. Finalmente, depois de muito tentar consegui!!!
    Obrigada ^^

    ResponderExcluir