Pesquisa

Carregando...

14 de junho de 2008

Como colocar favicons no Blogger

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.

Publicado por André Felipe

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
  12. 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
  13. 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
  15. Obrigadão rapaz.
    Esta dica do favicon, foi extremamente útil.

    Obrigado mais uma vez ;)
    ResponderExcluir
  16. 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
  17. Gislaine, expliquei passo a passo como criar e hospedar os arquivos. Em que etapa apareceu a "folha branca"?
    ResponderExcluir
  18. 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
  19. 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
  20. 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
  21. Letícia, enviei o link do arquivo para seu e-mail. :)
    ResponderExcluir
  22. 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
  23. eu keria achar mais blog mais naum conheceço nenhum me aguda por favor.
    ResponderExcluir
  25. 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
  27. Ola amigo como faz p/ por icones no link das postagem,em vez de por o link colocar um icone?
    ResponderExcluir
  28. 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
  29. 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
  31. 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
  32. Pina: qual problema encontrou durante o cadastro?
    ResponderExcluir
  33. 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
  34. 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

Não é permitido fazer novos comentários.

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.