Como ter um favicon em seu blog (atualizado)

em 15 de junho de 2011

Atualização ao final do post, tá?Favicon no blog

Então que nem só de bugs/panes/tilts vive o Blogger…

Semana passada foi lançada uma novidade (que nem é tão novidade assim) que vai simplificar muito a vida de quem deseja ter um favicon personalizado em seu blog: agora há suporte do Blogger para este tipo de arquivo e sua inserção ficou extremamente simples.

Mas vamos por partes, né? Pra começar:

O que é favicon?

Favicon é a junção de favorite + icon e é o termo que designa aquele pequeno ícone que aparece na janela do seu navegador. Por padrão o favicon dos blogs hospedados no Blogger é este:

Comum e nada personalizado, né? Mas muitos blogs possuem um ícone personalizado (neste momento meu favicon é uma borboleta, veja lá) e inserir um no blog requeria uma certa gambiarra técnica que nem todo mundo conseguia realizar.

Mas agora tudo ficou fácil. Basta ter uma imagem em formato .ico e inserir em seu blog via Design.

Se você ainda não tem o seu, siga o passo a passo e divirta-se!

Para começar você precisa ter uma imagem sem muitos detalhes que seja em formato .ico. E aí a coisa complica, né?

Complicaria, mas a solução está aqui: GenFavicon. Clique sobre o nome do site e você verá esta página:

image

Na área laranja clique em Selecionar arquivo e encontre em seu pc a imagem que deseja transformar em favicon. Pode ser em qualquer tamanho pois o site se encarrega de redimensionar para você.

Escolheu? Então clique em Subir imagem. Veja que a imagem vai aparecer na área cinza acima à direita da tela. Esta:image

Utilize esta área para centralizar sua imagem.

Na área verde defina o tamanho que terá seu favicon;32x32 é um bom tamanho. A seguir clique em Captura e Previsualização.

Na área azul aparecerá seu favicon. Clique em Baixar Favicon. Ele será baixado direto para seu pc, provavelmente na pasta Dowloads. Preste atenção pois você vai precisar encontrá-lo daqui a pouco.

 

Agora vamos inserir no blog? Estando logado clique em  Design. Vai abrir esta página: image

Ao lado de Favicon clique em Editar. Vai abrir uma janela. Assim:

image

Clique em Selecionar arquivo e encontre o favicon (a imagem em formato .ico) que você baixou anteriormente do site. Aparecendo a imagem clique em Salvar. Tá feito.

Facinho, né? E o melhor é que com este suporte do Blogger (antes tarde do nunca, né?) seu blog linkado em blogs amigos terá o seu favicon como marca registrada.

Agora mãos à obra, tá? Se fizer me conta?

 

Atualização:

Algumas pessoas relataram que o favicon não aparece. Acontece que o recurso está sendo implementado aos poucos pelo Blogger e pode acontecer de não aparecer, ou demorar.

Daí fui atrás e descobri uma gambiarra técnica que resolverá o problema e fará seu favicon aparecer sem erro.

Faça assim:

Depois de baixar seu favicon no formato .ico baixe também no formato png, lá no site GenFavicon. Daí faça a parte de inserir o favicon normalmente como expliquei acima. A seguir hospede a imagem em formato .png em um site de hospedagens de imagens como o ImageShack ou o PhotoBucket por exemplo e copie o endereço dessa imagem.

Agora abra seu blog, clique em Design e a seguir clique em Editar html. Encontre esta tag:

]]></b:skin>

Imediatamente abaixo dela cole este código, devidamente modificado com o endereço de sua imagem em formato png:

<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>

<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon'/>

<link href='URL_DA_IMAGEM_PNG' rel='apple-touch-icon'/>

<link href='URL_DA_IMAGEM_PNG' rel='shortcut icon' type='image/x-icon'/>

Salve. Tá pronto.

Certo?

Todos os créditos deste código pertencem ao blog Dicas Blogger.

Ah, aproveita e clica no selo de votação do Concurso conto vidas e vote em seus contos preferidos. Seu voto, além de ajudar a definir os 3 contos preferidos pelos leitores ainda concorre a um presente especial ao final da votação. Veja o post explicativo: Aberta a votação!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

46 comentários , comente também!

  1. De vez em quando, eles somem? Acho que o meu some... Acho muito bonitinho.

    beijooooo

    ResponderExcluir
  2. Bem, tentar colocar eu tentei, se funcionou, ai já é outra história rrsrsr \o/

    A parte isso, olha como tou ousada na mecheção com o blog?!?!?! Em outros tempos ia demorar uma semana pensando na possibilidade de mudar algo... Agora só falta levar essa ousadia para a vida rsrs!!!

    É ruim ein!!! rsrsr...

    P.S: Denovo rolou uma linha confessionario da Elaine no comentário... rsrsr

    ResponderExcluir
  3. Oi querida, desta vez me dei mal, fui em design e até lá tinha feito tudo direitinho, só não achei o tal do favicon onde era pra estar.
    Bem feito pra mim que so lerdinha.
    Mas como sempre agradeço, adoro as dicas que colocas aqui, tua didática é ótima, a aluna que é péssima.
    Beijos

    ResponderExcluir
  4. Quando tiver tempo vou tentar, sempre legais suas dicas .bjs.

    ResponderExcluir
  5. Oi minha querida,sempre sigo suas dicas,obrigada!
    Desta vez não deu,meu blog 1 não aparece essa caixinha ,no 2 sim.
    O meu favicon é antiiigo ,eu queria trocar,mas não deu.Acho que foi aquí que eu aprendí a fazer da outra vez por isso se vc puder me ajudar ou souber como ,me ajude por favor.Abração!

    ResponderExcluir
  6. Oi amore!

    Fiz tudo direitinho, salvei ...instalei...só que agora fui ver, e continua o 'B' do blogger, vai entender.

    Beijosss e MUITO obrigadaaaa!!

    ResponderExcluir
  7. Oi,eu de novo!
    Depois que postei o comentário resolví quebrar a cabeça e procurei pelo seu antigo post ,encontrei em 5/1/2010,aí seguí todo o roteiro e mudei o favicon de novo,obrigadinha!

    ResponderExcluir
  8. Obrigada, de novo! Fiz como ensinou! Mas é tão pequenininho!

    Excelente dia, recebendo tudo que deseja.

    Beijo

    ResponderExcluir
  9. Oi coração.
    Está muito bem explicado,obrigado.
    bjtos.Nile.

    ResponderExcluir
  10. È um amor e tu sempre com ótimas dicas! beijos,obrigada,chica

    ResponderExcluir
  11. Elaine, você é dez, queria muito um favicon, há tempo, mas achava bem complicado, rsrs. Eu fiz tudinho o que vc falou, mas até agora o favicon não apareceu, será que tem um tempo pra aparecer? Bjsjs!

    ResponderExcluir
  12. Oi Elaine querida!
    Adoro suas dicas e estou aqui fazendo tudo direitinho, mas não achei o tal do favicon em design.... beijos

    ResponderExcluir
  13. Muitas novidades... E eu até agora não entendi pra que serve aquele mais 1 que fica no rodapé do post, na parte que podemos compartilhar os posts em outros canais das mídias sociais...
    :( Bjbj!

    ResponderExcluir
  14. Bem legal, dica ótima. Vou colocar na lista de coisas para fazer rsrs, está enorme!
    Beijos.

    ResponderExcluir
  15. Oi, Elaine
    Fiz tudo direitinho, mas, como as outras aí em cima, também não aparece. Será que é problema no Blogger?
    Um beijão!

    ResponderExcluir
  16. Elaine, fiz o que vc ensinou e deu certinho! é mais uma dica preciosa q vc nos ensina.

    brigadis
    bjs

    ResponderExcluir
  17. Oi Elaine!!!
    Não tinha achado o favicon e mesmo seguindo os passos da sua atualização não deu certo :(
    Queria tanto ter conseguido.
    beijos

    ResponderExcluir
  18. @Renata, boa noite
    caso realmente não consiga e ainda deseje eu posso fazer pra você. Ofereço este tipo de serviço, e caso se interesse envie um email pra mim com a imagem que deseja usar e a gente combina o valor, tá?
    Beijossss e boa noite

    ResponderExcluir
  19. Já faz algum tempo que eu uso nos meus blogs, e nunca deixaram de funcionar.
    Mesmo assim foi de uma utilidade incrível para os que se deixam se complicar.
    Abraço

    ResponderExcluir
  20. Boa noite Elaine.....como esses tags são difíceis não....Acho tão lindo a criação de paginas que entrei num curso web...estou começando html....nossa, parece uma mistura de ciencia(células) com matemática ...a construção parece uma expressão matemática....misturada com sinais de música(sustenido) estou doidinha.Parabéns por vc ser um profissional que dá conta do recado....Sei que não vou muito longe,mas quero tentar rsrsrs....legal sua borboletinha...boa noite..um abraço

    ResponderExcluir
  21. Oi Elaine!

    Uso esta gambiarra faz tempo, e inclusive foi lá mesmo onde peguei, no blog da Jú.
    Meu favicon são três estrelinhas, fiz no photoshop.
    Gostei bastante da novidade do Blogger, em aceitar o favicon. Pensei: Poxa! agora vou tirar minha gambirarra. Não teve jeito. Tem que inserir o favicon no Blogger e ao mesmo tempo deixar a gambiarra. =(
    Talvez isto seja só por enquanto, exatamente como você falou:

    "Acontece que o recurso está sendo implementado aos poucos pelo Blogger e pode acontecer de não aparecer, ou demorar."

    Tomara!

    Boa noite!

    ResponderExcluir
  22. Agora Sim...

    Fiz no A história...e ontem só aparecia o antiguinho, mas hoje olhando lá nas atualizações do blog apareceu a arvorezinha linda desenhada pelo Santhiago.
    Ispia pra tú ver...

    Agora vou fazer lá no outro..

    Obrigada, sem você o que seria dessa pobre topeira sem paciência e meio disprovida de intelig~encia para esses códigos tão complexos?

    beijo

    ResponderExcluir
  23. Elaine,

    No meu Design eu não acho como editar um favicom....
    Alguns não tem mesmo ou é so ignorancia minha?
    Segui todos os seus passos, criei e salvei o favicon, mas não consegui inseri-lo.
    É uma pena.....

    bjo

    ResponderExcluir
  24. Comigo não deu certo nem a gambiarra...

    ResponderExcluir
  25. Oi Elaine, eu já coloquei no meu com o seu tutorial, muito obrigado, ficou lindinho!
    Bjks
    Marília
    http://entrefeltrosetecidos.blogspot.com/

    ResponderExcluir
  26. Oi Elaine!
    Desculpe o sumiço...mas tá difícil fazer as minhas visitinhas...
    Suas dicas sempre são ótimas! Eu, graças a Deus, tenho um favicon lindíssimo que minha querida amiga Elaine,(você!) fez para mim! Mas vou guardar para se um dia eu abrir um outro blog...quem sabe...rsrsrs
    Beijos, Renata
    palpitandoemtudo

    ResponderExcluir
  27. Oi Elaine :) sempre com ótimas novidades, né? Ainda bem para todos nós. Vou tentar essa nova dica assim que tiver um tempinho extra. Achei muito interessante.
    Beijo meu.
    Angel.

    ResponderExcluir
  28. Elaine
    Eu acho muito bonitinho mas achei complicado colocar.
    com carinho Monica
    estou indo para o Rio de janeiro

    ResponderExcluir
  29. Boa dica... eu achei um site a um tempinho que deu pra mim fazer direitinho, o meu é um gatinho com o coração em cima... beijoooos adoro a dicas de seu Blog, parabéns!!
    http://artesdosanjos.blogspot.com/

    ResponderExcluir
  30. Elaíne, minha protetora, depois vou precisar de sua assessoria para resolver duas coisas: um tal de getclick que coloquei no meu blog e ele não mostra estatística nenhuma e sobre o meu contador de acessos que está sempre destrambelhado (ou eu?). Pode resolver para mim? Obrigado, abração. Paz e bem.

    ResponderExcluir
  31. Já conheço o favicon e até uso,mas nãopersonalizado.Gostei muito e vou depois tentar mudar.

    Como sempre nos ensinando e dando dicas.

    Gostei também do chamado para votação. Posso usar no final dos meus posts?

    Beijos

    ResponderExcluir
  32. Elaine, você explicou tudo direitinho e bem fácil de seguir. Só que o favicon ainda não aparece no endereço do blog, apesar de aparecer no layout. Será que demora um pouquinho para o blogger absorver a informação?
    obrigada pelas dicas. Estou seguindo-as devagarinho, como novata que sou.
    bjs

    ResponderExcluir
  33. @CEM PALAVRAS, sim, demora umas horinhas até o arquivo se propagar. Mas vai aparecer, pode confiar.
    Beijossss

    ResponderExcluir
  34. Elaine
    estou amando as dicas do blog.
    Obrigada por vc ser dividir com a gente.
    bejinhos
    Simone

    ResponderExcluir
  35. Adorei a dica, fiz mas ainda não apareceu, vou aguardar se não aparecer tento a outra dica que vc deu.
    Obrigada
    Bjs

    ResponderExcluir
  36. Elaine eu tava lendo seu blog e vi isso. resolci fazer e deu certo, teve hora que sumia mais deu certo. valeu pela dica :)

    ResponderExcluir
  37. Mais uma dica que me ajudou muito!
    Obrigada.
    Bjs

    ResponderExcluir
  38. Elaine! Segui seus passos e deu tudo certinho...se eu soubesse que era tão fácil já teria feito antes. Muito obrigada mesmo.

    ResponderExcluir
  39. Hum.... a primeira parte fiz certinho e coloquei a casinha lá.... mas a segunda parte me embananei toda...

    Será que não vou conseguir colocar a casinha para aparecer na barra de endereço?

    Beijos

    ResponderExcluir
  40. OLá laine.Hj q resolvi fazer,mas como a maioria tb não apareceu não.E eu morro de medo de mexer no HTML,jamais mudei nada nele rsrsrsrsrsrsr então vou deixar quieto e ver o q acontece, principalmente pq tenho o adsense e não vou arriscar,já basta q há pouco tempo cliquei em visualisações dinâmica e meu blog enlouqueceu e eu qse enlouqueci junto rsrsrsrsr..Mas amo suas dicas.a sua linguagem é menos complicada rsrsrsr...Bjimmmmm

    ResponderExcluir
  41. OLÁ ELAINE!

    OBRIGADA PELO ENSINAMENTO

    MEU FAVICON FICOU LINDO

    DEUS TE ABENÇOE

    BJOS NO CORAÇÃO

    ACHEI INTERESSANTE VC DIZER CASADA HÁ 16 ANOS COM O MESMO MARIDO. ME IDENTIFIQUEI CONTIGO, PORQUE SEMPRE DIGO: "CASADA HÁ 36 ANOS COM O MESMO HOMEM" RSRSRS E O POVO SE ADMIRA. RSRSR

    OLHA LÁ MEU FAVICON QUANDO TIVER UM TEMPINHO

    www.panoseart.com

    ResponderExcluir
  42. O convertedor oline não tá carregando... porque??

    ResponderExcluir
  43. Quando vou no html procurar o "]]>" não acha... por que?

    ResponderExcluir
    Respostas
    1. o meu tbm nao acha se eu colocar ]]>. eu coloco soh e consigo encontrar.

      Excluir
    2. o trecho "< link href='URL DA IMAGEN PNG' rel=apple-touch-icon'/ >" da erro no meu template...e se eu tento tira-lo, fica mais errado ainda. BLOG: lectergirl.blogspot.no
      o meu favicon demora alguns dias pra mudar, ai resolvi tentar essa "ganbiarra" ai...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…