Como alterar o Favicon (Icone ao lado do Link) do Blogger
Olá, caro leitor! Se você quer acompanhar todos os nossos artigos, sinta-se a vontade para assinar nosso feed.
Antes de tudo, é preciso criar um Favicon, para isso, usamos programas como Photoshop, e outros editores de imagens. Eles permitem a criação de um Favicon da maneira que desejar. De preferência, coloque o tamanho do Favicon em 16x16, não que seja obrigatório. Salve o seu Favicon em formato .PNG. Agora, ele deve ser hospedado em um servidor de imagens. Recomendo o ImageShack, muito simples e fácil de usar.
-> ImageShack - Servidor de Imagens Online
O seu Favicon já estará criado. Quero lembrar que, os procedimentos citados a seguir, foi uma referência do To The PC.
É importante fazer o Backup de seu Template, para protegê-lo de futuros erros.
-> Faça Backup de seu Blog para proteger o seu Template e seus gadgets
Acesse o painel de seu Blog, e vá na aba Layout. Logo após, vá para a página onde pode ser encontrado o código-fonte de seu Blog, a aba "Editar HTML". Pressione CTRL + F e procure pela seguinte tag:
| ]]></b:skin> |
| <link href='URL_IMAGEM' rel='icon' type='image/x-icon'/> <link href='URL_IMAGEM' rel='shortcut icon' type='image/x-icon'/> |
117 Comentários:
Caras, não entendi bem a parte de colar o código html depois do 'head', por que não saquei se posso colar na mesma linha, se deve ser embaixo, ou se devo substituir os que ja existem logo abaixo. Podem me explicar? :(
@K-tra-K,
Deve-se adicionar DEPOIS da tag "head".
muito bom amigo, mais no meu não funciona já tentei de tudo mais não pega axo q vou dezistir de favicon!!!!!!
valeu se vc tiver alguma solução a mais posta q eu tento!!!!
Corrigi o erro do hack, agora podem refazer novamente que irá dar certo.
Vlw cara deu certo quando coloquei depois do head
gostei da dica continui assim
vlwwwww
Testado e aprovado!
muito bom!
vlw :D
vlw cara deu muito certo...
Campeão,
Tentei usar o tutorial aqui mas não funcionou, infelizmente. Tem alguma coisa a ver com o fato de eu usar o Ubuntu e não Windows?
Abraço
Paulo
Obrigada! COnsegui mudar meu favicon!
Ai.. muito bom..
Deu tudo certo e me ajudou muiiiiiiiiito.
Valeu.
muito bom!! gostei!!
Vlw cara!!!!!! vc Me salvou vlw msm
Até que fiiiiiiiiim *-* Brigadão .
CONSEGUI TIRAR O B DO BLOGGER SÓ QUE O NOVO NAUM APARECE?
@showgospel,
Provavelmente a imagem está corrompida ou o link está quebrado. Tente hospedar a imagem novamente em outro servidor.
Deu certo, eba!
AFF VELLLHO! VOOOCEE FOOOI O UNICOOOOOO Q ME DEU O JEITOOOOO CERTOOO! VLWWWWWWWWWWWW! UHOOOOOL!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Valeu Mano! Nota 10
muito loco, este codigo foi o unico que deu serto
Bróder,
Acessei zilhões de blogs, mas foi aqui que encontrei a Luz! Muito Obrigado Cara!
Funcionou direitinho na primeira...abraços
ADM tentei faze isso no meu site mais so sumiu o icone do blogger subtitui a imagem e a url por outra pra ver se ñ tava zuado mais nem apareeu nads o que faço???
@Administrador,
Provavelmente o link está quebrado. Hospede a imagem novamente e refaça todo o processo.
Simplesmente perfeito o post!
Adorei!!
Entrei aqui por causa do post sobre a importância de ser seguidor... aí acabei encontrando este post muito útil!! Meus blogs agora estão personalizados!!
Moral da história: Já estou te seguindo!! Ótimas dicas! Não tenho motivos para não fazê-lo!!
naum to conseguindo...Q RAIVA MEU
@Fã Luan,
Qual erro ocorreu?
eu nao consigo :( eu já tentei várias vezes me ajuda cara!Eu não sei qual é o texto destacado o de vermelho ou o de preto! E se for o vermelho eu já tentei e deu errado!
valeu cara finalmente eu entendi kkk eu copiei o url errado ! valeu !
Muito bom mesmoo
yay, brigaaadz *---------------*
valeu!
VALEU POW DE PRIMEIRA CONSEGUIR...
cara muito bom funciomou valeu mesmo
Parabens e vsleu de novo
consegui vlw mesmo, voçe é o cara manow.
Valeu, funcionou super bem. Otimo quando tutorias simplismente funcionam.
Obrigada!
Gente quem que uma imagem gif animado é só pega o link e em lugar de :
image/x-icon e só coloca gif no lugar de x-icon
valeu muito obrigado voce e o melhor!!!!!!!!!!!!!
valeu aí cara, ajudo bastante, belo site ^^
então cara ... ótimo tuto ...
mas o problema é que eu não consegui 100 %
eu postei a imagem em png com 16X16
lá image shack
eu coloque esse link
http://img543.imageshack.us/img543/3244/56924419.png
no meu ta funcionando (50% porque na aba do navegador fica um globo) somente no google chrome, mas parece que no internet explorer não funcionou, fica o ícone dele mesmo ..
verifica esse código no seu para ver se eu fiz algo errado...
meu e-mail é william.uzumaki@hotmail.com
desde já agradeço
^ ^
@Will,
Isto não é erro no código, provavelmente, seja no seu Internet Explorer.
Graças a Deus eu consegui, pq eu tinha um blog no wordpress e tinha consiguido colocar um icone sem querer, só soube a importâcia disto depois
Cara não consegui!
Coloquei certinho aonde você pediu!
Mas eu costumo hospedar minhas imagens no "www.digypic.com"!
Será que por ter hospedado nesse site que não deu certo?
Meu ajuda por favor!
(Eu não consigo hospedar imagens no ImageShack, por isso hospedo no DigyPic)
Cara, não to conseguindo....
coloquei depois de ]]> e depois do head e não deu... tem como vc dar uma mão ae de novo?
abs, ana
@Universátorios,
Não é preciso por após o Head, apenas após o b:skin.
Parabén! Muito bom! Li vários 'passo-a-passo" de como trocar o favicon, e só esse deu certo! Parabens!
VLWWW caaara consegui
Muito obrigada aí..consegui legal..
Só um detalhe não coloquei a URL e sim:
Direct Link for Layouts
foi de primeira..
adorei a diga..brigadão!
:D
Ótimo tutorial, e é mesmo simplérrimo..
Procurei em outros sites e chegaram até a confundir o Favicon com o cabeçalho -.- kkk
Obrigada meesmo
Nossa muito obrigado eu consegui fazer com muita facilidade antes eu entrava no dicas para blog mais agora que achei este site pretendo aprender muito aqui
nossa OBRIGADA eu entrava em um monte de sites e era comlicado, aqui foi mtu facil ! valeu
Meooo... testei da primeira vez e n deu certo, dai reli e fiz de uma segunda maneira, pois estava dando espaço quando colava o url_imagem depois do b:skin e n pode dar espaço e deu super certo e ficou showw!!! Obrigadinha *-*
não consegui de jeito nenhuuuuum
It Girl,
O que houve? Que erro ocorreu?
vlw aew em... em sempre mudei essa tag, mas na ora d colocar outra em outro site eu eskeço... muito obrigado mesmo de coração...
para mim funcionou perfeitamente. Obrigado
fiz tudo certo como vc disse mas nao conseguiiiiiiiii , quando eu vejo ainda está lá o simbolo do blog !!!!!!! =(((((((((
Gabi,
Primeiramente, verifique se você não colou o código no local errado, ou se copiou ele corretamente. Também verifique se a imagem não está corrompida.
Olha, eu consegui agora *_* mas você disse que a imagem tem q ser em formato png , não seria em formato ico ? pq eu so consegui nesse formato ...
Gabi,
Eu hospedei em .jpg e funcionou. Creio que o que importa é o tamanho, e não o formato do arquivo.
testadoe e aprovado de todos qie tentei foi o unico que rolou
meu blog n esta aceitando o numerador nem o favicon, e eu n sei restaurar, a fiz muitas postagens. Podem me ajudar?
No-iS,
Você diz qual numerador? E o seu favicon novo não está aparecendo, ou o antigo?
funcionou perfeitamente! Mas o icone não apareceu no internet explorer, apenas no mozilla firefox. Mesmo assim, valew mesmo!
o numerador de páginas não funcionoue o favicon não esta aparacendo! Eu sou dono e administrador do blog no-is ( http://no-is.blogspot.com ) e fiz exatamente o que vc falo!
eu uso o navegador google chrome
No-iS,
O numerador de páginas possui um problema no script, que ainda não consegui resolver. Já o Favicon, provavelmente, a sua imagem está corrompida. Veja se ela está no tamanho certo (16x16) e se não está corrompida ou com erro.
Muito Bom !!
vlw cara!
Eu hospedei em .PNG e o tamanho dela certo é 16x16 pixels, vlw ae manow, eu tava percurando isso e vc deu certin...
Valeu.
Tentei pelo Image Shack mas não deu, to usando o Vila Bol como repositório de arquivos, e tá indo até agora
Obrigado!!!!!!!
Até add em favoritos
Oi
Apareceu a imagem na visualizaçao, mas nao ficou igual ao seu do lado do nome do blog.
Nao entendi a parte SUBSTITUA o texto destacado pela URL da imagem do ícone, que você hospedou no servidor de imagens.
é para copiar os 2 codigos que vc colocou acima?
Ou somente colar abaixo do head?
Obrigada
Maybe,
Você deve encontrar o primeiro código no template de seu blog, e o segundo, você deve colar abaixo do primeiro, em seu template.
valeu, testei no meu blog e deu certo de primeira.
só q no google chrome só aparece o icone na parte de cima. no URL do site fica um globo, mas no firefox deu certo.
nossa cara muito bom! deu certo!
Thanks brother
Valeu mesmo, o blog mais conhecido do Rio Branco Esporte Clube de Americana/SP, Agradece e muiiiito!!!
Obrigado. Procurei muito essa modificação.
Eu fiz o procedimento, mas no meu nao deu certo. Quando hospedo a imagem no (ImageSchak) aparece várias linhas com códigso e nao sei qual pegar para substituir, como: (Link; direct link; Widget code; etc). Talvez esse seja o problema. Gostaria que explicasse mais a respeito da URL que se pega para substituir. Grata!
Thelma,
Você usa o Direct Link como URL da imagem. Basta pegar o que está escrito em Direct Link e fazer os procedimentos recomendados neste post.
Pow amigo valeu mesmo tu é 10 siga essa dica gente!!
Obrigada!!
valeu foi o unico que funciono :)
Fiz todo o processo no google chrome, mas quando abro o blog no firefox, o favicon aparece "desfocado" e quando é no explorer, ainda aparece o do blogger. O que fazer?
Leonardo,
Provavelmente seja um erro no tamanho do Favicon, que fez com que ele ficasse correto no Chrome, mas desfocado no Firefox. Quanto ao Internet Explorer, pode ser porque sua imagem esteja em um formato não aceito pelo navegador, ou muitas vezes isso ocorre porque o favicon pode demorar um pouco para ser carregado.
Muito obrigado, agora o favicon não aparece desfocado no Firefox, mas no Internet Explorer continua a mesma coisa, e o formato que usei é o PNG, que foi o que foi recomendado por ti, o que fazer?
Leonardo,
Está usando o IE6, ou alguma versão mais atualizada? Pois, muitas vezes, pode acontecer erros neste navegador, por ser muito antigo ou não aceitar um certo tipo de arquivo.
Eu estou usando o IE8 no windows xp...
Leonardo,
Pode ser algum erro no seu favicon, ou mesmo problema no IE8. Tente acessar o seu blog pelo IE9, e ver se o mesmo erro vai permanecer.
O IE9 não tem uma versão para windows xp... Mas consegui entrar eum computador com IE9 e continuou a mesma coisa. Será que PNG é o formato adequado?
Leonardo,
Se o .ico não funcionou, então é melhor mudar para .PNG. Acho que alguns navegadores não detectam este tipo de imagem.
Valeu camarada, consegui! Obrigado!
cara virei teu fan foi unico que ajudou vamos fazer uma parceria http://tudosobreresidentevil4depc.blogspot.com/
vc pode até ver que eu udei meu favicon valew mesmo cara e ai parceria?
Héricles,
Desculpe-nos, mas não estamos mais fazendo parcerias. Na seção BlogRoll, colocamos apenas blogs de amigos ou conhecidos nossos.
Muito obrigada mesmo!
Foi o melhor tutorial sobre isso e foi muito simples. <3
Não pensei que fosse assim tão simples.
Muito Obrigado!!! Funcionou perfeitamente. Valeu também o comentário da RoOts` Girl dizendo para adicionar o Direct Link for Layouts
Oi
Onde encontro a url para subtituir? è aquele código do forum?
aguardo urgente...
favor reponder no meu e-mail se possivel:
syannetx@yahoo.com.br
Josi,
Esta URL é o link de seu ícone, que deve ser hospedado em algum lugar na internet.
Cara, muito obrigado mesmo. Eu procurei em vários lugares. Eu tive que trocar o template do meu blog pq tinha dado um problema, e não lembrava como trocar a favicon. Você foi o mais simples, e o mais EFICIENTE. Muitíssimo obrigado
Obrigado!
Ajudou muito!
Gente ai de baixo que não conseguiu, tenho 1 unica frase que expressa o porque que vocês não conseguiram:
Tem que ter pelo menos 25% de conhecimento sobre o HTML do Blogger senão ses não conseguem se encontrar!
Valew irmão deu tudo certo
eu kolokei direitinho sem a tag
e deu certo!!!
vlw
Vlw !! Muito obrigado,mesmo.Ajudou muitooo :DD
Muuuuuuuuuuuuuito bom essa sua dica
vlw mesmo, meu ajudou muito
Consegui valew ae
cara obrigado pela diga, meu blog ficou com uma aparência bem mais profissional. sua dica me ajudou bastante...
Oi Lindinho! Consegui!!!! Adorei ver meu novo favicon.
Muiiiiito obrigada mesmo.
Abraços
CARA VLW , FIZ DO GEITO QUE PEDIU E DEU CERTO PARABENS , TAVA TENTANDO FAZER ISSO A MUITO TEMPO.
ABRAÇOS
muito bom, vlwwwwwwwwwwwwwwwww
Procurei em centenas de blogs, mais só o DesenvolvimentoBlogger® me ensinou o certo! valeu Vinicius! abraço.
Consegui trocar o favicon do meu!!! Cara seu blog é nota 1000!!! Já é a terceira dica que encontro aqui e funfa.
Gostei da dica.. Funcionou perfeitamente aqui.. =)
Consegui aqui no no blog, mas no internet explorer não funcionou, já nos demais navegadores ficou perfeito. Se houver algum macete aí pra dar certo no IE também, mande-me um comentário dizendo como valeu.
Um abraço!
Bruno,
Não sei o que possa ser. Qual a versão do IE que você possui? Já testou no IE de algum outro computador?
Obrigadoo , Adorei
Otimo Tutorial, vlw.
Ajudou muito
Postar um comentário
-> NÃO faça comentários ofensivos;
-> Faça comentários apenas RELATIVOS ao assunto do artigo;
-> NÃO faça conversas nos comentários;
-> É PROIBIDO usar links desnecessários, para isso comente usando OpenID;
-> Os comentários são VERIFICADOS, para garantir que não seja violada as regras acima;
Se preferir, fale conosco pela página de CONTATO.
Dica
Use tags como <b> e <i> para fazer comentários mais relevantes.