Pesquisa

Como colocar favicons no Blogger

André Felipe André Felipe, 14 de junho de 2008.

Sabe aqueles ícones personalizados que tem ao lado dos nomes de sites, na barra de endereços e quando você os salva nos seus favoritos? Eles são chamados de favicons. Aprenda a colocar um FavIcon no Blogger (Blogspot) para deixar o seu blog ainda mais personalizado!

Adesivos do Blogger
Não posso dar adesivos legais como estes, mas divido meu conhecimento sobre o Blogger.
Autor da foto: < ange >. Foto com alguns direitos reservados.

A primeira coisa de que você precisa é de uma imagem. Se não tiver uma, recomendo procurar algo de seu agrado no FreeIconsWeb.

Se sua imagem for grande, é melhor recortá-la na forma de um quadrado pequeno. Você pode usar o editor de imagens Free Online Image Editor para recortar e redimensionar sua imagem. Guarde uma cópia de 32 píxeis de largura por 32 píxeis de altura.

Entre no gerador automático FavIcon Generator, carregue sua imagem recortada e clique em "create icon". Depois clique com o botão direito na imagem que aparecerá para baixar o ícone para seu computador.

Agora que você já tem o ícone, precisa hospedá-lo. Crie uma conta no HotlinkFiles, se você ainda não tiver uma, para isso. Depois entre na página "Upload" e envie seu ícone com a extensão ICO e a imagem de 32x32. Copie o endereço de ambos arquivos em algum lugar, pode ser no bloco de notas.

Entre no painel de configuração do seu blog e escolha "Layout" - "Editar HTML". Logo acima de </head>, digite:

<link href='http://www.hotlinkfiles.com/files/.../favicon.ico' rel='shortcut icon'/>
<link href='http://www.hotlinkfiles.com/files/.../32.png' rel='icon' type='image/png'/>

Substitua o endereço das imagens pelos das suas e salve seu template/modelo. Pronto! Seu ícone deverá começar a aparecer para seus usuários.

Certamente, esta dica também é válida para usuários do Wordpress. Basta encontrar o lugar certo para colocar o código. ;)

Atualização: se o ícone do Blogger continuar aparecendo, veja Ícones junto com endereço no Blogger.

2ª Atualização (14/08/2009): substituí o Fileden pelo HotlinkFiles, devido à recente instabilidade daquele.

34 comentários:

  1. Eu usei o http://www.favicongenerator.com/ para fazer o favicon do meu blog. :)

    ResponderExcluir
  2. Obrigado pelo link, Thomaz. :) Os usuários do Blogger que acessarem esta página terão uma chance única para deixarem seus blogs diferenciados.

    ResponderExcluir
  3. Amigo estou tentando trocar abri uma cona até onde vc indicou mais o que acontece é; sai o icone do blog e fica o do interne explore, da uma ajuda aê
    Carlos

    ResponderExcluir
  4. Carlos: você deve ter simplesmente copiado o exemplo que dei. Você deve hospedar seu ícone em algum site e usar o link fornecido por ele no código.

    ResponderExcluir
  5. Cara, me enrolei no link, por favor, explique direito, pra eu entender, qual o endereço que eu tenho que colocar, por exemplo, se eu colocar e ospedar em um outro site, como faço praa colocar no blogger, ou mesmo se eu hospedar no blogger.
    Obrigado pela dica

    metalrfs@hotmail.com / metalrfs@limao.com.br

    ResponderExcluir
  6. Metal Ômega: você já tem um favicon pronto?

    ResponderExcluir
  7. Sim, já fiz o download do arquivo, baixei o animation também

    ResponderExcluir
  8. Oi segui as suas dicas e naum apareceu, fiz tudo como vc disse e naum funcionou,fazer o q?

    ResponderExcluir
  9. esquece o comentário anterior,funcionou,era só esperar um pouquinho, santa impaciência, valeu cara.

    ResponderExcluir
  10. Metal Ômega: então, crie uma conta no Fileden e carregue os arquivos .ico e .png. Avise quando tiver feito isso.

    ResponderExcluir
  11. Este post si torna complicado apartir do principio, pois em alguns blogs eles apontam para colocar o mesmo código que você forneceu logo abaixo do ]] b:skin , já no seu é logo após o head. Bom, o certo é que no meu eu coloquei abaixo do head como você manda e depois de uma espera o FAVICON que eu criei não aparece na home do blog, mas aparece nas demais páginas, abraço e espero que este comentário sirva para outras pessoas...

    ResponderExcluir
  12. Edmar: realmente, uma mudança no Blogger evita que o favicon seja exibido corretamente caso o código for colocado onde eu havia dito.

    Para funcionar, coloque acima de < /head >. :) Já atualizei o post.

    ResponderExcluir
  13. Obrigadão rapaz.
    Esta dica do favicon, foi extremamente útil.

    Obrigado mais uma vez ;)

    ResponderExcluir
  14. André eu não entendi muito esse negocio de hospedar a imagem e gerar uma .
    Eu fiz como vc esta explicando mas so apareceu uma folha branca, o que devo fazer a mais?
    me chamo Gislaine.

    ResponderExcluir
  15. Gislaine, expliquei passo a passo como criar e hospedar os arquivos. Em que etapa apareceu a "folha branca"?

    ResponderExcluir
  16. Oi André, tentei hospedar a imagem no Flickr, mas ele nem acha a imagem no meu PC, este FileDen é muito complicado, não consegui hospedar lá.
    Aíiii que raiva estou com meu Favicon pronto e não tenho como hospeda-lo para fazer upload para meu blog, vc pode me ajudar??
    Obrigada

    ResponderExcluir
  17. Letícia, salve o ícone neste site de hospedagem temporária e me passe o link. Colocarei na minha conta do FileDen para você.

    ResponderExcluir
  18. Oi André, estão aqui os Links:

    File was uploaded successfuly on TinyUpload.com server.
    You can download it from address: http://s000.tinyupload.com/?file_id=47150238989963752345

    You can delete file from address: http://s000.tinyupload.com/?del_id=18682282309988589793


    Obrigada

    ResponderExcluir
  19. Letícia, enviei o link do arquivo para seu e-mail. :)

    ResponderExcluir
  20. André eu não poderia deixar de vir aqui agradecer a tua ajuda, a tua atenção e gentileza. Muito obrigada por tudo.
    Um grande abraço

    ResponderExcluir
  21. eu keria achar mais blog mais naum conheceço nenhum me aguda por favor.

    ResponderExcluir
  22. André,não estou conseguindo configurar o favicon no meu blog!
    Me ajude!Fáz dias que ando tentando e até agora nada!


    grato,desde já!

    ResponderExcluir
  23. Ola amigo como faz p/ por icones no link das postagem,em vez de por o link colocar um icone?

    ResponderExcluir
  24. rogerteam: se entendi bem, você quer criar um link com uma imagem. Basta inserir a figura, depois nela clicar e usar o botão que insere links.

    ResponderExcluir
  25. Ola André, tudo bem?

    Cara, li sua dica pra criar o favicon, porém estou com um problema. Acessando meu blog pelo Firefox o favicon que criei aparece, mas no Internet Explorer não. Porque será? sabe me dizer?

    Abraço
    aguardo retorno

    ResponderExcluir
  26. Amigo não consegui fazer e não consegui me cadastrar no site que vc recomendou, poderia me mandar o código por e-mail?

    A imagem upada que quero é esta: http://img16.imageshack.us/img16/4293/medicinaestetoscopio.jpg

    Desde já obrigado.
    Att: Pina.
    meu e-mail é: marciopinarj@bol.com.br

    ResponderExcluir
  27. Pina: qual problema encontrou durante o cadastro?

    ResponderExcluir
  28. Bom Dia André,

    estou tendo dificuldade para trocar o favicon do meu blog. Fiz da forma que tu instruiu no post mas não tive sucesso.

    Já fiz um upload da imagem no TinyUpload.com, segue o link abaixo -

    You can download it from address: http://s000.tinyupload.com/?file_id=81904131464882897574

    Podes me ajudar a concluir a mudança?

    Obrigada !

    Um abraço,
    Schirley.
    dasmarka@dasmarka.com

    ResponderExcluir
  29. Schirley, responderei por e-mail.

    Aviso para outros leitores: a partir de agora, os comentários para este post estão fechados. Tente seguir todos os passos desta página e depois veja a continuação, Ícones junto com endereço no Blogger.

    ResponderExcluir

Aviso

Estou reorganizando o blog e algumas coisas podem estar fora de lugar. Os comentários antigos já foram transferidos para o sistema do Disqus.