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.
Olá! Em primeiro lugar, parabéns pelo site. É ótimo!!
ResponderExcluirMas nao consegui mudar o icone na barra de endereço. Mesmo seguindo toda a orientação.
O que terá acontecido??
Obrigado!
Eder José
dificil saber o que houve, porque testei e funcionou normalmente.
ResponderExcluirolhe se não esqueceu de colocar os sinais ' < >
quando hospedou a imagem, pegou o código certo? é o ultimo da lista.
Parabéns, Fabiano!
ResponderExcluirSua dica para colocar icone no blog funcionou perfeitamente no blog http://gramigosmangueirao19hs.blogspot.com/
Muito bom cara!!!
ResponderExcluirA dica funciona perfeitamente e seu blog é excelente, obrigado!
UHUUUUUUUUUU FICOU MUITO MASSA O MEU .ICO,VL PL DIK ....OK......GURI..FUI....
ResponderExcluirACESSE LÁ PRA QUEM QUIZER VER....
eu nao consegui pq nao entendi uma coisa
ResponderExcluirtem q colocar o link do(direct) antes ou depois do trecho?
por favor me ajudem
meu blog é http://kauandownloads.blogspot.com
kauan98
ResponderExcluirvocê coloca o link no código onde está escrito endereço da imagem
deu certinho no meu
ResponderExcluirhttp://donizett.blogspot.com
Jipagito:::: tbm não consegui memmo seguindo todos os procedimentos, aparece a mensagen chata do blogger! O que será q aconteceu?
ResponderExcluirJipaGitoquando 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
ResponderExcluirhttp://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.
obrigado fabiano robert mas uma pergunta vc q é o dono do blog
ResponderExcluirkauan98sim, sou o autor deste blog
ResponderExcluirPor primeiro parabens pelo seu blog, obrigado por responder as minhas perguntas e agora deu certo entrem em http:/kauandownloads.blogspot.com/
ResponderExcluire obrigado por me ajudar e me passa seu msn
Amigão, parabéns! Há muita coisa legal no seu site, comecei "ontem" a blogar, segui suas orientações e bingo ficou legal.
ResponderExcluiraew kara o sou teu fan parabens!
ResponderExcluireu fiz tudo direitinho mais na hora de hospeda a imagem no MerryPic não foi avaliado oque aconteceu
ResponderExcluiro site tem algumas regras para imagens veja se a sua está dentro delas
ResponderExcluirCara preciso de sua ajuda nõ entendi direito
ResponderExcluirmeu e-mail: endriu89@hotmail.com
realmente o site MerryPic está fora do ar.
ResponderExcluirencontramos 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
Pocha, não consegui encontrar esse 'b: skin'...
ResponderExcluirpode me ajudar???
meu e-mail é:
jessicathaisa.jeh@hotmail.com
se achar </head> é só colocar antes disso.
ResponderExcluirOlá Fabiano
ResponderExcluirDesculpe, 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
veja essa nova postagem que fizemos
ResponderExcluirhttp://www.dicasparablogs.com.br/2009/07/converter-imagem-jpg-ou-gif-em-icone.html
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á ?
ResponderExcluirsó apague se já tiver algo igual ao que mandamos colocar, o resto do código não altere nada
ResponderExcluirOlá, muito bom mesmo, você não sabe o quanto está me ajudando :D'
ResponderExcluirwww.baakas.blogspot.com
Fabiano não precisa ser icone a imagem pode ser qualquer outro tipo
ResponderExcluirentrem em http://kauandownloads.blogspot.com
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
ResponderExcluirA paz do Senhor.
ResponderExcluirValeu, é 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.
exelente! muito Obrigado!
ResponderExcluirParabéns Sitee muito show!!
Me Ajudou Mto!
Thankz
meu blog não tem o ...head... de baixo
ResponderExcluirdo ...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!!!
Tooom
ResponderExcluirprocure melhor deve te head, todo blog tem
Adoreeeeeeeeeeeeeeei nunca iria conseguir sozinha.
ResponderExcluirBlogs como o seu é que fazem a diferença, mesmo o meu blog estar cheio de coisas fúteis e adereços.
Valeu a dica.
Obrogada Fabiano Roberto. Coloquei o favicon nos meus 3 blogs graças a você.
ResponderExcluirbeijoooo
EU AAAAAMOOOOOOOOOOO VCSSSSS ;D
ResponderExcluirFUNCIONOUUUUUUU UIIIIIIIIIISSSSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AHAHAHAHAHHAAH VLW MESMO VLW!
Ficou mto bom! muito bom MESMO!!
ResponderExcluirO Melhor blog sobre blogs que já vi!
VALEU DICAS PARA BLOGS!
Movimento Juvenil,
ResponderExcluirAgradeç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.
consegui tambem sem transformar em icone ou seja com arquivo png normal...
ResponderExcluiresta etapa pode ser desnecessária.
raghy30, nem todos os navegadores aceitam outros formatos sem ser o .ico, principalmente os antigos
ResponderExcluirmas acho que em breve realmente converter para o formato icone pode ser desnecessário
Ótima dica , seu site é ótimo .
ResponderExcluirBrigadão mesmo .
obrigada (:
ResponderExcluirvalew mais uma vez ajudando
ResponderExcluirMuito obrigado, sua dica foi exencial. Eu estava procurando por aew e nada dava certo... mas aqui consegui!!!!
ResponderExcluirMuito 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. =]
ResponderExcluirpara procurar essas palavras é só clicar ctrl+f
ResponderExcluirOlah Fabiana!
ResponderExcluirGosto 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/
Paulo Almeida
ResponderExcluiras vezes é necessário clicar para atualizar a pagina(f5) para visualizar alterações no blog.
Não consigo entar no site Merryc!!!!
ResponderExcluirveja esse site para hospedar o favicon
ResponderExcluirhttp://www.iconj.com/icon_generator.php
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/ .
ResponderExcluirObrigado.
as outras paginas mudaram também, talvez seu computador esteja acessando o blog pelo histórico de internet
ResponderExcluirSim, 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.
ResponderExcluirObrigado.
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
ResponderExcluirSim, 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.
ResponderExcluirvocê está falando da lista de blogs?
ResponderExcluirmas nos outros blogs aparecerá o simbolo blogger acho que não tem como mudar.
Parece que dá sim. Olhe os blogs relacionados "CoisasDeDiva", "Modo de Falar" e "Sim, senhorita." deste blog: http://naraindica.blogspot.com/ .
ResponderExcluirTodos tem ícone personalizado e estão na lista de relacionados.
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
ResponderExcluirValew Amigão !!
ResponderExcluirMuito Obrigado
Oi! Primeiramente, parabéns pelo blog, me ajuda muito!
ResponderExcluirEu 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???
use o ctrl F para procurar, ficar perto de /head>
ResponderExcluirQuando eu entrei nesse site ele estava numa lingua estranha eu traduzi pelo google mais nao consegui achar arquivoe e tudo que vc manda
ResponderExcluirinfelizmente muitos sites são em ingles e não tem versão em portugues.... não tem o que fazer a respeito disso
ResponderExcluirOlá, 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!
ResponderExcluirTeria outro pra me indicar?
Obrigada! bjOs e curto muito suas dicas!
veja o link fo free favicon hosting no final do tutorial, lá poderá hospedar a imagem
ResponderExcluirno meu blog, não consigo achar esse código :x
ResponderExcluiro que faço?
não tem o html citado acima!
use o ctrl f para achar o código no seu html
ResponderExcluirmassa cara eu coloquei um gif e deu certo estou muito grato ,valeu a dica
ResponderExcluirO SITE ESTÁ ME AJUDANDO MUITO
ResponderExcluirOBRIGADO MESMO
UHUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU
ResponderExcluirDEU CERTO
SÓ NUM INTINDI UMA COISA
COMO FAZER UM ICON NESSE SITE FIVECON ?
resolveram um probleminha meu de esquecimento . Parabens pela montagem do blog... direto e rápido... assim que deve ser...
ResponderExcluirPerfeito!! tentei com um monte de dicas, mas consegui resolver com a sua explicação. Obrigada!
ResponderExcluirpena que no google chrome não funciona, será que não tem um hack para funcionar nele? aguardo
ResponderExcluirNã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
ResponderExcluirMuiito showw gosteii massaa deuu sertooo hhaha
ResponderExcluirGustavo Fritz
ResponderExcluirveja 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
ótimo site, mas ainda assim, não consegui por. Tentei no Explorer no Chrome.
ResponderExcluirEbaaaa! Funcionou!
ResponderExcluirVALEU!
Bjo
Não consegui colocar a imagem em formato ICO. AJUDEEE
ResponderExcluirtem varios sites que fazem isso, se não deu certo veja no tutorial tem links para outras opções
ResponderExcluirNão estou conseguindo abrir o site do merry pic !
ResponderExcluir@Gessica Costa realmente o site está fora do ar
ResponderExcluirvamos fazer uma atualização neste tutorial, mas veja aqui: Como Colocar Favicon no Blogger
Olá Fabiano, tudo bem?
ResponderExcluirSempre 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!
Susy Alves
ResponderExcluirveja aqui: Colocar Favicon no Tumblr: Personalizar Imagem na Barra de Endereço
lá fala em tumblr mas funciona no blogger também
esse do teu site quais foram as medidas usadas EX;16X16
ResponderExcluir32X32
qual???
a medida é 16x16, mas se tiver uma imagem em outro tamanho ela vai se ajustar.
ResponderExcluirmas é melhor fazer a imagem já no tamanho certo