Primeiro crie ou encontre uma imagem que gostaria de usar na barra de endereços, ela deve ser quadrada, lembre-se que a imagem ficará bem reduzida (16 x 16 pixels), portanto não adianta usar uma cheia de detalhes pequenos. Aconselhamos já salvar a imagem neste tamanho 16x16px para depois enviar para os sites de hospedagem e conversão para o formato ícone.
Depois que tiver a imagem pronta entre no site Free Online Icon Editor nele é possível desenhar seu ícone se quiser (para aqueles que são bons em pixelart), mas se for fazer selecione o tamanho 16 x 16. Mas viemos aqui principalmente para mostrar como converter sua imagem de qualquer formato (gif, jpg, png) em um ícone, ou seja, formato .ico, clique em enviar arquivo, encontre sua imagem, deixe selecionado 16x16(favicon) e clique em upload.
Agora clique no botão save icon e escolha um lugar para salvar o ícone no seu computador. Essa parte já está pronta, agora vamos hospedar o favicon (colocar a imagem do ícone na internet).
Vamos até o site Image Boo Hosting clique no botão enviar arquivo e localize o ícone, envie também a imagem original (que usou para converter no outro site para o formato ícone), deixe selecionado Public em upload type e clique em start uploading. Agora copie o código da ultima linha (Direct) das duas imagens que enviamos.
Até o momento já temos nosso ícone criado e hospedado na internet, agora só falta colocar no blog. Entre na pagina layout > editar html e procure por </head>, antes dessa linha coloque o código abaixo substituindo os endereços das imagens que você acabou de hospedar.<link href='imagem formato icone' rel='shortcut icon'/>
<link href='imagem original' rel='shortcut icon' type='image/png'/>
No final da segunda linha troque png pelo formato da imagem original gif, jpg, se achar mais fácil poderia fazer isso já com uma imagem png desde o inicio. Clique para salvar e já está tudo pronto o resultado final é esse:
Fizemos e testamos esse tutorial no Firefox e Internet Explorer que são os navegadores mais utilizados atualmente.
Outro site para hospedagem de icones é o Free Favicon Hosting, afinal é sempre bom ter mais opções.
Link para esta página
133 comentários:
Olá!
Estou sempre por aqui à espreita de dicas.
Eu poderia colocar a imagem de um smile tricotando?
Grata pelas boas dicas de sempre.
Tenha um ótimo domingo.
Carinhosamente,
Dô.
Muito bom o blog e as postagens!
Essa aí então nem se fala.
Muito bom, vou linkar o seu blog.
pode tentar colocar um gif animado(smile) mas talvez não funcione em alguns navegadores, mas já vi isso em vários sites. o jeito de colocar é o mesmo
Adorei muito seu blog, muito tri mesmo, continua assim, já to seguindo seu blog, se você ta afim de fazer pareceria entra no meu e me adiciona também, aqui ta meu blog, entra La, http://henrique199.blogspot.com/
Um presente para o seu blog. O selo VIP. Pegue la no link http://ciencisagora.blogspot.com/2009/09/selo-esse-blog-e-vip.html
Um abraço.
Pô não deu certo, quando vc clica no SAVE ICON, não acontece nada...da uma ajuda ae...
tente novamente, testei o site e está funcionando normalmente
Oi, eu não fiz com uma imagem, fiz pelo PixelArt mesmo.
na hora de colocar os códigos no blog, eu coloco o da imagem que eu hospedei no ImageBoo duas vezes?
obrigado ;
Sara Alves
precisa colocar as duas linhas do código, mas somente uma é no formato ícone.
envie pra mim o código que está usando no blog
Ah, eu já consegui.
obrigado mesmo :D
beijos & muito sucesso (;
Pô consegui, mas o site nao esta funcionando normalmente não...quando clicamos no SAVE ICON, ele não te da a opção para que vc escolha a pasta que vc quer salvar, eu cliquei em cima da imagem 16x16 e e fui no ''SALVAR COMO'' depois o resto realmente esta tudo certo.
Quero parabenizar, pois depois de entrar em muitos blogs e tentar o seu foi o único que consegui...Inclusive na hora de hospedar. Depois que hospedamos aparecem vários links e muita das vezes não sabemos qual copiar e vc deixou bem claro que era para copiar o DIRECT...Os outros blogs não informaram isso...valew mesmo
Valeu mesmo pelas dicas. Eu contruí o blog com as notícias daqui. Estou começando neste segmento há pouco tempo, e estas informações foram bastante relevantes.
De primeira eu não consegui.
Depois de três tentativas eu percebi que estava fazendo idiotice! OBrigada! Vocês me ajudaram muito!
Primeiramente, muito bom o blog!
Agora não consegui adicionar meu icone. Ao invez disso aparece o endereço da imagem hospedada no cabeçalho da minha página. Você sabe o que fiz de errado?
Obrigada
Bruna Hirsch
provavelmente está colocando o código em lugar errado ou faltando algum símbolo.
eu fis tudo isso e nao deu certo apareceu:Não foi possível salvar o modelo
Corrija o erro abaixo e envie o seu modelo novamente.
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "href".
Matthew
provavelmente faltou algum caracter no código, barra no final ou usou aspas
Esse blog é super, híper demais, "Parabéns" sou inicinate,ficamos sem saber o que fazer e sempre precisamos de uma grande ajuda. Obrigada pelas dicas.
Vou fazer!!Apesar de não ligar muito para isso acho uma maneira de deixar seu blog mais "atraente"
Gostaria de saber se esta dica serve para o blogger tambem,abraço a todos!
esse código serve para qualquer blog ou site.
Valeu mesmo, funcionou. :)
Oi Fabiano! Parabéns pelo blog.
Eu estou tentando mas não está dando certo , a mensagem de erro é:
"Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "href"."
Estou começando a achar que o problema é o meu template.
sabe como ajudar?
Parabéns pelo blog mais uma vez ;D
ah, já vi no que eu estva errando. muito obrigada ;D
Olá amigos,
Fiz o procedimento e ocorreu quase tudo bem, ao criar a imagem e o icone, o link das fotos aparecem acima do navbar do blog, como faço para retirar esse endereço das fotos? O icone esta funcionando corretamente.
Obrigado.
Angélica Santana
no final do código tem uma barra, se não colocar dá erro. veja também se não está usando aspas no lugar errado
Lucia Helena
retire o código e coloque novamente, provavelmente tem algo errado, não é para aparecer o link
Obrigado pelas dicas, está me ajudando muito.
No navegador Safari também funcionou.^^
maravilha hein....show de bola seu post! me ajudou muito ja fiz um coloquei no link do meu blog.
valeu ^^
Deu certinho de primeira, apenas tive que usar outro site para criar o ícone pois o Free Online Icon Editor não está funcionando não..rss...mas deu tudo certo, valeu a dica.
Pra quem ainda não conseguiu e quer ver o resultado o endereço é esse:
http://www.grandestextos.blogspot.com
pow adorei essa postagem consigui mudar o simbolo do meu e deu tudo certo.
olha ai como ficou:
http://loucopormusicas.blogspot.com
vlw
abraços e muito obrigado
Olá tudo bem?
amei seu post, eu venho tentando a um tempo trocar meu favicon, mas não consigo de geito algum, e eu tenho certeza que fiz tudo certo, mas na hra de visualizer aparece erro e fecha meu blog e o favicon tbm nem aparece, eu não sei mais o que eu faço!
e eu queria muito trocar, e em outros blogs tbm tenho notado que nao aparece o favicon. será que é meu navegador? é o IE8.0 o mais recente da microsoft.
thais_medeiros_mxp3@hotmail.com Muito obrigada se me ajudar ..
o internet explorer as vezes não aparece na primeira vez que o site é carregado(aconteceu com o meu), mas quando clica para ver outra pagina do blog aparece o ícone.
se mesmo assim tiver problemas tente hospedar a imagem em outro lugar pois o problema só pode ser esse. os códigos estão corretos
Opa, gostei disso, mais uma coisa para personalizar o meu blog!
Valeu!
Ôpa, tudo bem?
gostei muito do seu blog, vc esta de parabéns!
Esta me ajudando muito na criação do meu.
Mais estou com uma dúvida.
Eu fiz tudo como o esplicado, mais quando chega na parte do /head, ai pra frente a coisa nao anda.. rsrs
nao entendi onde vc tiro os links abaixos!
se puder me ajudar ficarei muito grato!
Um Abraço!!
Raul Calais
é só colocar os códigos do favicon antes do codigo </head> no seu blog
Onde eu encontro esses códigos?
link href='imagem formato icone' rel='shortcut icon'/
link href='imagem original' rel='shortcut icon' type='image/png'/
Onde é q eu axo esse código Favicon?
Um abraço!!
Nossa tava na minha cara e eu nao via! kkkkk deu certo aki..
um abraço meu caro!
Sempre que eu enho botar no Image Boo, lá diz que o documento é bmp e aí não dá. É porque eu clico em salva e não acontece nada, aí eu tenho que salvar o último que eu fiz, então, fica em bmp
no meu modelo fica neste trecho
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
Boa... muito boa.
PERFEITO!! carãa. eu tava tentando isso faz uns 5 meses. agora achei um tutorial decente :) !
Obrigado!!
o melhor blog para dicas!!
Quando eu carrego em "Save Icon" nao aparece nada. Podia-me dar uma ajuda, é que eu já tentei duas semanas seguidas e nao da.
uma ajuda??
alguns sites podem apresentar problema, tente procurar outro site de hospedagem ou para converter imagens
Se nao conseguir fazer o icon tambem pode ir a http://www.favicon.cc/
Fabiano, eu naum carreguei imagem e sim fiz la...fiz td e tal, mas não mudou o favicon do blog.
veja se salvou no formato correto e colocou os códigos certos.
as vezes é precisa atualizar a pagina para funcionar
OLa muito bom seu blog ja me ajudou bastante , mais nao entendi onde colok o link que gera da imagem
o endereço da imagem você coloca no código que falamos nesta postagem e depois na pagina editar html
Muito obrigado! Esse blog é ótimo!
Consegui botar no meu, esse blog é MUITO bom!
Amigo,
Seu tutorial foi muito bom e o favicon ficou muito legal em meu blog...
Gostaria de saber se o favicon novo aparece no Google Chrome pois aqui no meu pc não está aparecendo, ele continua como o icon do Blogger.
O endereço é:
www.pouzada.net
Desculpe amigo pelo Comentário duplo, mas esqueci de lhe avisar que o seu favicon aparece perfeitamente aqui no meu Google Chrome.
O do meu blog não!
Obs: nos dois links que eram para serem substituídos eu coloque a imagem ico.
Vitor
as vezes é necessário atualizar a pagina para funcionar
no meu blog não funcionou veja
www.atualizadof5.blogspot.com
marquynho, entrei no seu blog e está funcionando, acho que já resolveu o problema, as vezes é necessário atualizar a pagina
Nossa muito obrigado mesmo tentei de várias maneiras procurei diversos tutoriais mais esse foi o único que consegui colocar o favicon.
Valeu!
Olha, eu testei e funcionou normalmente no Internet Explorer (Que você ja tinah testado) e no Opera (que Tambem Funcionou Normalmente) e achei muito maneiro, valeu.
Boa noite,
fiz o teste no Internet Explorer e ele não funcionou, porém funcionou no Google Chrome, o que pode ter acontecido?
Sidnei
clique para atualizar a pagina no internet explorer, seu computador pode estar acessando o blog pelo histórico de internet
Fabiano
eu atualizei a pagina do explorer, exclui cookies e fiz tudo que tinha que ser feito, porém nada foi alterado........
qual o link do blog que colocou os códigos?
Fabiano, o link é:
http://motorheadbangersblogmusic.blogspot.com/
Sidnei
acho que pegou o código errado da imagem, as vezes que tentei abrir o link da imagem redirecionou para a pagina do imageboo
http://www.imageboo.com/files/lsj3nupuew5zf06zruk5.jpg
acredito que seja esse o problema
Olá amigo, o tutorial é muito bom, conseguir por em um dos meus blogs, mais tem um que ja tentei por várias vezes mais não tenho sucesso. Não sei o que acontece faço exatamente o que fiz nos demais que estão funcionando. Se puder me ajudar, entre em contato. Abraços.
Music Blog Download, olhe o código e veja se não em nada sobrando nele, tente hospedar novamente a imagem
veja também se nessas tentativas não deixou duas vezes o mesmo codigo no blog
Deu tudo certo, ótimo tutorial.
Esse é um dos melhores blogs sobre blogs q conheço.
muito bom exelente vou postar o link do seu site no meu blog. muito bom viu.
Valew!!!!!!!!
olha aí: http://www.rubronegroesporte.blogspot.com
Ótimo tutorial, estava atras de algo assim ha muito tempo. Parabens pelo blog sempre com dicas para aperfeiçoar nossos blogs.
Não consegui salvar a imagem naquele site de colocar a imagem no formato favicon, como salvo lá?
Lizandra, tente salvar em outro site, tem varios é só pesquisar no google por hospedar .ico
eu fiz tudo certo, colei no lugar certo, mas não muda exatamente nada, fica tudo igual, colei os codigos nos lugares certos, são dois codigos não? um em formato ico e o outro png? mas não esta dando certo
Dançarina e Sedentária
algumas vezes é preciso clicar para atualizar a pagina para aparecer o novo icone.
não tem como explicar melhor, você tem que hospedar as imagem, colocar os endereços nos códigos e por o código no blog
que barato acabei de criar um ícone para o blog e amei!
parabéns vc ensina de uma forma fácil amei!!!
Muito obrigada pelas dicas, ajudou muito! Usei o código para trocar o favicon do meu site e deu certo.
Só uma outra dica... Na verdade não é necessário transformar a imagem em um ícone. Pode-se apenas fazer uma imagem no paint em qualquer tamanho, de preferência quadrado, fazer o upload para a internet e copiar o link na parte editar html. A imagem é convertida automaticamente para o tamanho correto.
Abraço,
Carol
carol, concordo que a imagem será ajustada ao tamanho, mas pode distorcer, então por isso acho melhor já fazer num tamanho próximo ao que será utilizada nos sites.
Assim, sim. Parabéns...
Ei cara eu consegui certim aqui, muito bom mesmo sua dica...
eu só queria saber como que faz para aparecer uma mensagem ou uma coisa assim quando passamos o mouse no icone, pq quando coloco aparece só: "Esse site não fornece informações de identidade", daria para colocar o endereço do meu blogger ou mesmo fazer ele ficar clicável?
Minus
não tinha notado esse detalhe, mas todos os sites que visitei apareceu igual(usando o firefox), não consegui achar como mudar isso.
Ótimo post! :D
funcionou perfeitamente!
no começo ia até comentar que não tava funcionando, mas depois percebi que eu estava colocando o código acima do "head" e não do "/head"
podem Observar o resultado: http://idanou-se.blogspot.com
muito bom teu post.
de todos os sites que olhei, o teu foi único que consegui ! valêu (:
Fabiano não consegui,ta dando erro.
Qual parte do link que passou tem que substitur?meu email é vancrisk@yahoo.com.br obrigado
coloque o link das imagens nos lugares em destaque no código imagem formato icone e imagem original
vlw pelo turial aqui foi o unico site que ensina direito como trocar o favicon do blogger lvw msm
Sem o seu Blog eu não sou nada,obrigado!Mais uma dica que deu certo,ficou lindinho,deu aquele toque especial!
Mto obrigada! Até que enfim consegui!
amigo e se eu quiser fazer uma la no site nao vo ter original depois como faço?
se quiser voltar ao original é só apagar essas linhas de código que colocou no blog
Oi, eu não estou conseguindo fazer isso, ja tenho a imagem normal e em formato icone, mas quando vou hospedar da erro e nao consigo...
me ajuda por favor!!!
P.S.: O blog etá maravilhoso!!!
lucas, achar hospedagem para formato icone é um problema, vou pesquisar algum site que faça isso, mas tente no google vai encontrar
amigo pesquisei e não achei, fica dificil... parece que só tem esse.. se achar algun avisa pra nois, grato..
Poh e tentei umas três veses não consegui então eu resolvi perguntar fika antes ou depois do nome head e esse nome fica logo no início ne?
s minha imagem eh essa a ico http://www.imageboo.com/files/0msd1uq6o1k17cjkiuvt.ico
e a png
http://www.imageboo.com/files/njf7jyy2s18zr3jszygv.png
Uchiha Sasuke - Sama
sim, fica logo no começo do código do blog
Olá, Fabiano Roberto
sua publicação foi bastante útil, porém, aparenta não estar funcionando aqui... uso o navegador Google Chrome.
Feliz 1ºde Abril e Feliz Pascoa!
Abraços.
Oiii!!! Parabéns, adorei o conteúdo!
Mas... fiz TUDO CERTINHO e não deu certo! Ficou aparecendo, no lugar do favicon, um quadrado preto! O que aconteceu?? Por favor, me ajude. bjs!
http://milleph.blogspot.com
Michelle e Phillipe
olhei o código do seu blog e a imagem que hospedou parece mesmo ser um quadro preto, tente hospedar novamente, mas use uma imagem já no tamanho reduzido.
Ola pessoal estou a construir um blog para os escoteiros e estava aqui a fazer um favicon eu fiz mesmo um mas nao tenho uma imagem original fiz nesse site o que faxo.
tem que salvar e depois hospedar a imagem
Oi eu hospedei a imagem no imageshack
e quando fui meter no blog nao aprexe simbolo
Olha eu posso te mandar o meu icon e tu mandas me ja os links plx?
DjTareco® , precisa salvar e hospedar a imagem no formato .ico também
Vou te dizer como fiz
Fui aquele site de favicon e salvei> esta no ambiente de trabalho
Mas faltame a imagem original eu meti o icon no imageshack ....
Eu doute o meu icon e tu podes fazer me isto porfavor agradeco +_+
Valeu Fabiano pelo post!
Funcionou muito bem no Firefox e no Chrome. só no IE8 (sempre o IE né) foi que não funcionou, vá entender. Mas vou fazer uns testes mais tarde e se eu descobrir por que eu conto.
Valeu mesmo pela dica um abraço.
Ah e quem quiser conferir tá aqui ó:
http://emaisoumenosisso.blogspot.com/
Lembrando que no Internet Explore não roda por enquanto.
Fui!
clique para atualizar a pagina do internet explorer, vai funcionar se colocar os codigos e endereços das imagens corretos.
Oi Fabiano,socorro já fiz refiz e naum consigo esse ´´e o erro...
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The processing instruction must begin with the name of the target.
passei para dizer q consegui já estava me sentindo burra tive q alterar pelo IE salvar para depois ver no fire vai entender
Da hora essa dica !
olhem meu blog, deu certo mesmo, o icone ficou file: www.blogsportmade.blogspot.com
Oi !
eu não consigo !
quando salvo a imagem no meu computador não aparece nada ! tipo eu abo a imagem e está em branco ):
se não aparece deve ter copiado algum código errado, provavelmente na hora de alterar o endereço das imagens.
clique para atualizar a pagina do seu blog o computador pode estar usando o histórico de internet
olha adorei o blog ensina tudo direitinho + eu fiz tudo bem certinho mas nao consigui tava tudo certo nao sei oq aconteceualguem pode me ajudar
Sensacional. Tô ficando fã desse blog.Valeu
Ae consegui!
Valeu mesmo era por isso que eu estava esperando.
Dá uma olhada la no meu. www.surf-es.blogspot.com
VALEU!
Muitíssimo obrigado pela dica, ajudou a deixar meu blog mais personalizado. Valeu mesmo!
Muito Bom Mesmo... Sipmpres e funciona
Que código é esse que vocês estão falando?É o do nosso blog?
Vitinho30, você precisa colocar esse codigo no seu blog com os endereços das imagens que hospedar para usar como favicon
Não é que quando clico em salvar não acontece nada!
Preciso de ajuda!
se não acontece nada nem salva nem dá mensagem de erro? pode ser falha no site, exclua o histórico de internet e tente novamente.
Não!
Ainda não entendeu!
Sabe aquele 2 quadradinhos brancos do lado esquerdo.
Então, o que eu boto lá?
qual quadrinhos brancos?
Estou muito triste pois agora,não da mas para colocar,pois o blogger colocou Designer ao inves de Layout,ai não da mas para ter acesso a meu layout!!estou muito irritada com o blogger,pois eles colocam essa pagina de designer sem que a pessoa permita,vc tem como colocar um html que de para colocar nos elementos da pagina???
mas na pagina designer tem a opção voltar ao blogger e lá tem a guia html.
o imageboo não abre aqui! o que faço?
veja esse site para crair o favicon:
http://tools.dynamicdrive.com/favicon/
Obrigado pelo tutorial Fabio.
Mas fiz tudo direitinho e não funcionou,segui a risca o tutorial,e não funcionou,continuou a imagem do Blog,Desiste.Abraços
Benny(ddamarestiano)
as vezes é preciso clicar para atualizar a pagina para ver a alteração, geralmente o computador usa o histórico de internet por isso não vemos mudança na primeira vez que visualizamos a pagina.
Bom fiz tudo direitinho até chegar no imageboo o site ñ deu certoporq?
obrigado!!
veja aqui outros sites de hospedagem
Sites úteis para Blogueiros
seu problema foi hospedar as imagens? certo?
o site de hospedagem que vcs postaram não está funcionando.
o site é o Image Boo Hosting
as vezes o image boo hosting fica off, tente esse site
http://www.hostanypic.com/
Até agora só vi esse funcionando!
Espero poder ajudar alguém!
http://www.freeimagehosting.in/index.php
Super, hiper, mega testado e aprovado! rs
Beijos!
Poxa perfeito isso! voce esta de parabens! deu certinho aqui no meu blog.
porfavor não pare com esse blog pois ele ajudará milhares de pessoas
Parabens mesmo
Postar um comentário