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.

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.

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:

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

Postagens mais Comentadas Receba Dicas por E-mail Recomendações dos Leitores

Link desta Pagina

50Comentários:

Jefferson Monteiro disse...: Obrigado,Fabiano
Estava a muito tempo a procurar um site assim que converte a imagem na hora!; 21 de julho de 2009 15:04
JHONE SANTOS disse...: meu amiguito facil consegui fazer poxa esse blog de voces é massa cara nos ensina muitas coisas valeu mesmo; 21 de julho de 2009 16:30
Meri Pellens disse...: Mas no Chrome o ícone não aparece e o seu a aparece, como fez?; 21 de julho de 2009 16:44
Fabiano Roberto disse...: coloquei na postagem como salvar uma imagem em png para usar como icone, acredito que deve resolver o problema com o chrome; 21 de julho de 2009 17:23
Dowload Filmes disse...: muit bom esse site só qria sabe uma coisa como colocar aqle oq achou da dica em meu site ?

entrem ai dowloadfilme.blogspot.com; 21 de julho de 2009 21:28
Meri Pellens disse...: Valeu, colega! Funcionou no Chrome agora tbm! Obrigada!; 22 de julho de 2009 05:56
Meri Pellens disse...: 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.; 22 de julho de 2009 10:08
Lê disse...: Amei a nova dica!!! Obrigada!!!
Lê; 22 de julho de 2009 10:14
Camilla disse...: Devo ter feito algo errado, pois não consegui!; 22 de julho de 2009 13:17
Roberto Juniro disse...: 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; 22 de julho de 2009 13:24
Fabiano Roberto disse...: 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; 22 de julho de 2009 14:24
Ana disse...: Olá Fabiano,

Eu fiz como você falou e não deu certo,só no Google Chrome.O internet explorer não apareceu =/.; 22 de julho de 2009 15:33
Fabiano Roberto disse...: 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.; 22 de julho de 2009 15:49
Rodrigo disse...: 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; 23 de julho de 2009 11:03
Fabiano Roberto disse...: 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; 23 de julho de 2009 13:34
Ana disse...: Olá Fabiano,

Isso mesmo,só faltava atualizar.Obrigada.òtimo Blog; 23 de julho de 2009 15:30
Zeca disse...: 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; 23 de julho de 2009 17:33
CorVo disse...: oi,
tem um selo pra vc no meu blog,
Tudo é História
se puder vota na milena toscano
vlw; 23 de julho de 2009 23:05
Fabiano Roberto disse...: 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; 24 de julho de 2009 13:39
Ðίєġσ ๖ۣۜEvąiя ۞ (Bєyσήd Thє Ðąяk Lifє)††♪♪ disse...: hum...muito boa a dica gostei mesmo...é facil e rapida de se fazer...vlw.; 3 de agosto de 2009 11:48
Private Pecker disse...: não consegui fazer, o site do FavIcon não entra... será problema no site ou problema aqui?; 25 de setembro de 2009 12:43
Fabiano Roberto disse...: 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.; 25 de setembro de 2009 15:45
traficandoinformação disse...: 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; 10 de outubro de 2009 12:21
Fabiano Roberto disse...: no final da postagem tem uma atualização

http://www.dicasparablogs.com.br/2009/09/como-alterar-o-favicon-no-blog.html; 10 de outubro de 2009 15:39
Anônimo disse...: Vlw Meus amigos!!!
tutorial SHOW!!!!

Jorginho - RJ; 26 de outubro de 2009 19:09
Bia Bibs disse...: CONSEGUIIIIIIIII!!!!!!!!!!!!!!

SHOW, SHOW, SHOW!!!!!!!!!!!!!!; 7 de dezembro de 2009 07:58
Anônimo disse...: Olá, consegui fazer tudo certinho, parabésn, muito bom, mas a imagem ficou um pouco embasada, cm resolver isso? Abs...; 20 de março de 2010 22:28
Deane disse...: 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!; 29 de março de 2010 13:53
Dani Mesquita disse...: parabéns cara..muito bom!vc explica mto bem..deu super certo!!; 8 de maio de 2010 01:26
Vitinho30 disse...: Valeu fabiano como no meu não deu aquela outra eu fiz nessa e tá aparecendo!
Lou!Valeu!; 10 de junho de 2010 10:35
Anônimo disse...: 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; 3 de agosto de 2010 19:11
Anônimo disse...: Cara vcs são muito foda vcs são os melhores, muito obrigado pela ajuda. Valeu mesmo.; 22 de setembro de 2010 21:37
Max disse...: Obrigado; 7 de dezembro de 2010 10:55
pinupdanovageracao.blogspot.com disse...: nossa muito bom !!!!!!!obrigada pelas dicas!!!; 17 de fevereiro de 2011 20:27
Fabio Destro disse...: Muito obrigado me ajudou muito mesmo !; 3 de março de 2011 15:00
J. Guimarães disse...: É muito importante descobrir isso.
Pois o icon é preciso para o Internet Explorer.
Nos outros funcionam o png.; 10 de junho de 2011 18:31
admin disse...: 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.; 14 de julho de 2011 06:29
Maranata estudos disse...: Muito obrigada, foi a forma mais fácil de resposta que li.
Deus te abençoe!; 27 de julho de 2011 13:07
Repórter Carlinhaah disse...: nao consegui oq faço?????; 31 de julho de 2011 01:34
Fabiano Roberto disse...: Maranata estudos
mas agora tem outras formas de trocar o favicon... se quiser pode enviar a imagem diretamente ao blogger; 31 de julho de 2011 13:30
Luiza Germanotta disse...: ONDE ESTÁ ESCRITO: ARQUIVO?? PRECISO DISSOOOOO!; 21 de novembro de 2011 01:18
Fabiano Roberto disse...: é só clicar em Free Favicon Hosting, veja aqui http://www.iconj.com/favicon_hosting.php; 21 de novembro de 2011 14:02
IsabellaTwifan disse...: 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!; 28 de novembro de 2011 12:10
Mangá Project disse...: Ei mas n ta carregando quando coloco o upload ele fica lá só carregando mas n sai do lugar; 4 de dezembro de 2011 15:25
Fabiano Roberto disse...: 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; 4 de dezembro de 2011 22:57
Anônimo disse...: Excelente e obrigado!!

By Michael Felipe; 5 de janeiro de 2012 19:00
Rock em Cipó™ disse...: Como sempre, parabenizo-vos!!!
Útil e simples!!
Obrigado!!!!!!; 12 de fevereiro de 2012 14:30
Laura Vegan disse...: Obrigada, Dicas para Blogs! Sempre entro aqui e confio no seu conteúdo. Meu blog tem melhorado muito devido à sua ajuda. Laura Kim; 4 de maio de 2012 18:36
Laura Vegan disse...: Obrigada, Dicas para Blogs! Sempre entro aqui e confio no seu conteúdo. Meu blog tem melhorado muito devido à sua ajuda. Laura Kim; 4 de maio de 2012 18:37
Paola disse...: Nossa, eu só fui em Layout > Editar Favicon, escolhi o png e pronto!; 27 de dezembro de 2012 08:45

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

50Comentários:

Postar um comentário