Favicon e uma novidade

em 5 de janeiro de 2010


Você sabe o que é favicon? Será de comer ou de passar no cabelo?

Favicon é a junção de Favorite icon e é o termo usado para designar essa imagem que aparece na barra de endereço do meu blog. Fiz um para a Ana colocar no Anjogatos e um para a Renata, que aliás foi quem me disse que nunca tinha ouvido falar no termo.

Então, quer aprender a colocar um no seu blog? É legal para identificar nosso blog e dá um ar mais arrumado e mais caprichado, né? Todos os grandes blogs têm, e fica mesmo muito mais bonito do que o b16-rounded tradicional do Blogger.
Vamos lá:
Primeiro você precisa escolher a imagem que vai ser seu favicon. Escolha algo que tenha a ver com seu blog e/ou com seu layout e que não tenha detalhes demais pois a imagem será pequena.

Escolhida a imagem é hora de convertê-la para o formato .icon já que a maioria das imagens têm formato .jpg ou .png. Aí entra a boa notícia:
Eu testei muitos sites que realizam essa conversão e sempre era muito complicado, tinha que hospedar em dois lugares diferentes e mais um monte de passos. Até que encontrei este site aqui! Tudo ficou muito simples!

Para fazer seu favicon acesse o site e clique na aba Icon Generator.  Em seguida clique em Enviar arquivo. Encontre em seu pc a imagem que escolheu préviamente. Agora clique em Upload it e espere a imagem carregar.

Depois do carregamento completo vão aparecer 2 códigos: copie o 2º código, que está abaixo de Simply copy and paste the code below in the head of your web pages:

E agora? Comofaz para colocar no blog?

Para colocar no seu blog é muito simples:
Clique em Layout e daí selecione a aba Editar html.
Marque a caixinha Expandir modelos de widgets.
Usando Ctrl+f encontre este trecho:

]]></b:skin>

Agora cole o código que você copiou imediatamente abaixo do trecho encontrado.
Clique em Visualizar e pronto!
Se estiver tudo certo clique em Salvar.

Facinho, né? Se quiser pode colocar um favicon animado; neste mesmo site onde você fez a conversão da sua imagem tem uma outra aba onde está escrito Animated favicon e aí tem milhares de imagens animadas para você escolher.

076estrelinhas
Já reclamaram com você sobre o tamanho da fonte do seu blog? Tem gente que fala que é pequena, tem gente que diz que é grande…tem quem prefira Verdana, tem quem goste mais de Arial… Como contentar a todos?
Seus problemas siacabaram-se!
Deixe que o próprio leitor decida qual fonte ele quer usar para ler seus posts! E qual tamanho ele, seu leitor, prefere! Como assim? Fácil!

Clique em Layout e depois em Adicionar elemento de página. Escolha a opção Html/javascript. Na janelinha que abrir cole este código todinho, sem pular nada:

<span class="wlWriterPreserve" id="preserve7554fa0939d64018a6c26c1e24d9abc3">
<script> function go1(){if (document.selecter2.select2.options[document.selecter2.
select2.selectedIndex].value != "none"){document.getElementById('main')
.style.fontSize=document.selecter2.select2.options
[document.selecter2.select2.selectedIndex].value}} function go2(){if
(document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value != "none")
{document.getElementById('main')
.style.fontFamily=document.selecter2.select3.options
[document.selecter2.select3.selectedIndex].value}}
</script>
</span>
<form id="forma" method="POST" name="selecter2">
<select name="select3" onchange="go2()" size="1" style="font-family: Arial; font-size: 10pt;"> <option value="Times New Roman">Times New Roman </option><option value="Arial">Arial </option><option value="Book Antiqua">Book Antiqua </option><option value="Bookman Old Style">Bookman Old Style </option><option value="Century Gothic">Century Gothic </option><option value="Comic Sans Ms">Comic Sans Ms </option><option value="Tahoma">Tahoma </option><option value="Trebuchet Ms">Trebuchet Ms </option><option selected="" value="Verdana">Verdana </option></select> <select name="select2" onchange="go1()" size="1" style="font-family: Arial; font-size: 10pt;"> <option value="8px">8 </option><option value="9px">9 </option><option value="10px">10 </option><option value="11px">11 </option><option selected="" value="12px">12 </option><option value="14px">14 </option><option value="16px">16 </option><option value="18px">18 </option></select> </form>
Clique em Salvar. Coloque preferencialmente bem no comecinho do blog.
Legal, né?

Diz prá mim se fizer em seu blog …


076estrelinhas

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. Olá leitores queridos!
    Notou que mudei a posição do formulário de comentários? Então, é um teste. Inseri um hack para numerar os comentários e ele só funciona em comentários abaixo incorporados e não em janela popup como sempre foi por aqui.
    Se tiver qualquer problema me diz, e se demorar para carregar me avise, tá?
    Agora pode comentar, e muito obrigada.

    ResponderExcluir
  2. Elaine..
    Amo vir aqui ver as dicas que tu dá.
    Fiz a da fonte...ficou perfeita..
    só que queria muito colocar essas estrelinhas
    coloridinhas que tu botou no teu, mas não sei onde achar a imagem.
    Seria muito abuso se tu achasse umas para mim, que tem a ver com meu blog e me mandasse por email??? Amiga sou meio lesa pra essas coisas, tentei entrar no site que tu indica, mas é tudo em ingles e não consegui achar imagem lá.
    Se puder fazer meu email é: marrilfa@yahoo.com.br

    brigadão...
    bjos no ♥

    ResponderExcluir
  3. Elaine, sempre boas dicas.Também nunca havia ouvido falar em favicon(isso não é nenhuma novidade, pois não sei nada de nada,rsrsr). O comentário abriu normalmente!beijos,tudo de bom e lindo dia.

    ResponderExcluir
  4. Elaine,

    Vou tentar, novamente, por um favicon no blog, da última vez não consegui, rs.

    Abraços, e Feliz 2010.

    ResponderExcluir
  5. Adoro estas suas dicas, tô salvando todas!!!! Abraços!

    ResponderExcluir
  6. Elaine!!!
    adoreiiii a mudança!!! rs

    e juro q um dia vou ter um pc em casa tb e vou deixar meu blog tão lindo qto o seu!!!!

    infelizmente o meu é atualizado na hr do meu almoço, com pressa e já pré programado o q vou fazer... por isso q não consigo ainda, com a calma q merece, fazer as mudanças...
    mas chego lá!!!
    me aguarde!!! rsrsrs

    mtooo obrigada pelas dicas!!!!

    bjão
    da Li

    ResponderExcluir
  7. Adoro esses seus posts com dicas para melhorar o blog...
    E estou com dificuldades de novo, pra variar....rsrs...
    No meu, aparece só esse código: "<" eu coloquei o código da imagem abaixo, mas não mudou nada....
    Beijos.

    ResponderExcluir
  8. Oi Elaine, não consigo mais comentar no seu blog no meu computador não funciona os formulários assim...bom, to pedindo para meu namo postar do computador dele so queria avisar q to participando da sua promoção. Esta tudo lá no post de hoje espero q tenha feito corretamente. Bjs

    ResponderExcluir
  9. Elaineeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

    coloquei o favicon no meu blog *--*
    muito lindo!!

    Obrigada querida por mais essa aula!!

    bjinho

    ResponderExcluir
  10. Elaine, eu posso não comentar muito, mas leio tudo, viu?
    E estou adorando as dicas sobre layouts, widget e todos os acessórios para a funcionalidade do blog!

    Usei a dica para aumentar/diminuir a fonte! Thanks!

    Bjooo

    ResponderExcluir
  11. Oie!!!
    2009 terminou... Entre as coisas boas que me aconteceram está você, que sempre partilha comigo, seja com uma visita, comentário, selo, elogios, fidelidade... enfim com tanto carinho! Você faz parte de todos os meus melhores momentos do ano que se passou e isto me fez e ainda me faz muito, muito feliz!
    Desejo que neste ano de 2010, você tenha:
    2010 festas para se divertir
    2010 amizades novassssssss para abraçar
    2010 momentos de paz
    2010 pirukas ajeitadas
    2010 idéias brilhantes
    2010 tempos de felicidade
    2010 sonhos CONCRETIZADOS!
    Enfim 2010 ótemossssssssss motivos para ser sempre feliz e dar muitas risadas!
    Bjinhos da Madrasta!

    ResponderExcluir
  12. Floooooooooooor, ameiiiiiiiiiiiiiiiii!!! essa é a primeira dica sua que eu desconhecia!!! Já tenho meu favicon agora!!! :)

    ResponderExcluir
  13. Eu adorei esse post..muito útil...já coloquei o ícone bonitinho no meu blog, passa lá pra ver...e muito obrigada por ajudar seus amigos blogueiros que não entendem muitos desses truques.

    ResponderExcluir
  14. Também nunca ouvi falar disso, e nem consegui entender exatamente o que é...bahhhhhh ( burrinha )
    Elaine, trouxe o link do post que fiz da promoção
    http://olhosepensamentos.blogspot.com/2010/01/promocao-um-pouco-de-mim-no-ano-novo.html

    bjs

    ResponderExcluir
  15. Elaine como estou feliz em aprender a fazer isso. Obrigado pelas dicas e depois passa lá na mayrene para ver.Beijos

    ResponderExcluir
  16. Olá, Elaine. Já postei a resposta junto so selo da promoção em meu blog.
    Bjs.

    ResponderExcluir
  17. Adorei a dica, rs. Já pensou em criar um caderninho com elas para a gente (preguiçosa que nem eu) poder fazer um download e ir testando? Obrigada Elaine de coração pelo meu favicon, ficou uma graça. Beijos, fique com Deus

    ResponderExcluir
  18. Elaine,

    Há um selo para você no meu blog! Olhe:
    http://oblogdalou.blogspot.com/2010/01/selinho.html

    Beijos e espero que goste!
    Louise

    ResponderExcluir
  19. Elaine minha amiga como é gostoso vir aqui e cada momento tem uma coisa nova. Tou muito feliz com o favicon da mamyrene e graças a vc. Obrigadooo.
    Tentei fazer no meu outro cantinho( A Vitrine de Sonhos) que é no mesmo perfil e não consegui. Aparece o chapéuzinho da mamyrene. Será que não pode ou tem alguma dica a mais?
    Espero que possa me ajuda senão a gente fica feliz assim mesmo.
    Beijos

    ResponderExcluir
  20. Elaine

    Já conseguiiii fazer o mesmo na Vitrine de Sonhos. Alguma bobeira que fiz e não apareceu. Estou pulando de alegria .... Desconsidere o meu comentário anterior. Beijos mil

    ResponderExcluir
  21. Oi Elaine,

    Tudo ok com a nova forma de comentar. Tem sempre novidade por aqui, hein? Fica cada vez melhor.
    Elaine de Deus!!!!!!
    Eu consegui (sozinha!!) colocar o favicon!
    Lua é a minha faz tudo nessa área, já sabe né?
    Só que hoje ela não está aqui. Já tentamos várias vezes colocar o favicon, mas ele não sustenta, fica uns dias depois some...
    A minha imagem já estava pronta, Lua que arrumou, aí ficou fácil rsrsrs. Segui seu maravilhoso passo a passo, e... consegui!
    Obrigada por mais essa dica valiosa.

    Beijos e tudo de bom :]

    ResponderExcluir
  22. kkkkkk

    não tenho dúvidas, uma vez que não entendi naaaada...isso é português?

    Essas minhas amigas cibernéticas...ai ai

    ResponderExcluir
  23. este blog é um luxo!é duas mãos para os blogueiros,bjs!

    ResponderExcluir
  24. Elaine, deu tudo certo!
    Agora o que eu quero saber é como você faz para colocar essas indicações de posts relacionados no final da página. Pode me ajudar, please?
    Agradecida.
    Boa noite!
    Beijos.

    ResponderExcluir
  25. Valeu Elaine, com as suas dicas conseguimos colocar um favicon no nosso blog. bjs

    ResponderExcluir
  26. Eu juro, rejuro e trijuro que fiz tudo direitinho, hum rum, deu, deu certinho, vai la pra você ver, mudou, mas não a imagem que escolhi, um troço la que nem sei explicar o que é...aff.
    Os números nos comentário ficou fofo, mais não gostei da posição do formulário, fica mais ruim pra comentar assim, agente tem que ta subindo a página pra reler o post, enquando que em janela popup não é preciso, agente comenta relendo o post do lado.

    Beijos
    Mah

    ResponderExcluir
  27. uhuuuuu,esse eu consegui fazer,hehehehehe
    já estava na hora de aprender né...vou aproveitar suas dicas aqui e criar coragem em aprender,assim posso deixar o blog como quero...
    Queria lhe perguntar se preciso escolher um modelo especifico pra começar a mudar ou qualquer modelo?

    ResponderExcluir
  28. Olá amore..

    Já tinha ouvido falar desses pequenos icones, mas eu achava tão complicado que nem tentava, ai o teu tutorial ficou tão bem explicadinho que tentei..

    E de inicio fiquei frustrada pq fiz tudo direitinho e o bichinho nao apareci, ai depois de um tempinho apareceu.. adorei o resultado..

    Bjinhos, e obrigada!

    ResponderExcluir
  29. Você é nossa mestra, Elaine!!! Não tem outra!!
    rs
    Beijãooo

    ResponderExcluir
  30. Este Blog é excepcional! pois hoje sem querer vim aqui parar... procurei por favicon e foi um instante em que segui todos os seus passos! obrigada pelas dicas! explica muitissimo bem! beijinhos e votos de boa continuação!

    ResponderExcluir
  31. Moça pelo amoooOR de Deus! Me ajuda, quero muito mudar o desenho da barra de enderço mas não consigo e tenho um sério medo de estragar tudo se mecher na html. Gostaria muito que você me ajudasse e queria de verdade entrar em contato com você. Adc meu e-mail: Bruno_Gyn_Designer@hotmail.com e o link do meu blog é: http://poderioaereo.blogspot.com/ dê uma olhada e entre em contato comigo por favor, quero que vc me ajude a resolver isso ok. Agradeço desde já!! Beijo, vlw =)

    ResponderExcluir
  32. Oi, tudo bom?
    Eu tentei colocar o ico no url do meu blogger,mas não tive sucesso. Você pode me ajudar?

    ResponderExcluir
  33. Elaine, muito obrigada pela dica! Segui suas instruções e deu super certo! Muchisimas gracias.

    ResponderExcluir
  34. Olá,
    Procurei a internet ineira por essa informação, mas todas as dicas que eu achei não funcionaram, só esta.
    Porem tenho uma dúvida, por não aparece o meu favicom também, no meu link nas páginas dos amigos. Alguns personalidos aparecem, mas o meu é o b do blogger/
    Valeu .
    Bjoks

    ResponderExcluir
  35. Oii! Então, quando vou transformar uma imagem que é transparente de fundo - de formato .png para .icon - a imagem fica retorcida atrás, com alguns quadradinhos em vermelho, azul e preto! Entenda Melhor: o seu favicon é uma Rosa, que por sinal é transparente atrás, pois não possui fundo branco (ou de outra cor). O meu favicon que eu queria colocar tbm é sem fundo, mas quando transformo em .icon ela fica como retratei acima. Me ajuda? Obrigada!

    ResponderExcluir
  36. Eu coloquei no meu..
    Gostei.. Mas ñ consegui mudar a fonte q escolhi. O tamanho muda.. A fonte ñ.

    ResponderExcluir
  37. Elaine seu blog é maravilhoso e me ajuda muito, fiz este favicon e deu certo, queria q vc me ajudasse em outra coisa, se vc puder claro, eu colokei um menu sanfona igual a esse q vc tem no seu blog e queria saber como faço p colocar outros gedgets nele tipo marcadores, arquivo, blogrol e afins. me dá uma luz!!! desde já agradeço. bjsss.

    ResponderExcluir
  38. Oi Elaine, como sempre, ótimas dicas, cliquei no +1 (aprendi pra q servia com vc rsrsrs).
    Vou tentar mudar a caixa de comentários, como vc nao colocou tutorial, suponho que seja nas configurações, certo?
    Beijos e obrigada, Pat

    ResponderExcluir
  39. Elaine, boa noite!
    Segui os seus passos e coloquei no meu blog.

    Obrigada, pelas dicas.

    Beijinho,
    Ana Martins

    ResponderExcluir
  40. Parabéns pelo seu blog e obrigada pelas dicas fantásticas! Têm sido uma grande ajuda! :)

    ResponderExcluir
  41. Elaine, não tem como copiar o código do trecho, como faço?
    Vc bloqueou a cópia no seu blog!

    ResponderExcluir
  42. Elaine, não consegui encontrar este trecho ]]<>/b:skin> no HTML.
    Salvei minha imagem do site que vc indicou e coloquei no gadget do Favicon. Minha imagem fica lá no alto só não aparece quando salvo no favorito, só mudaria se eu conseguisse colocar no HTML?
    Obrigada por vc existir e ser esta luz para nós.
    Beijinhos sempre...

    ResponderExcluir
    Respostas
    1. Estou toda alegre, pois agora esta imagem igual a do perfil está aparecendo no favorito e em todos os lugares!
      Beijinhos...

      Excluir
  43. Infelizmente não consegui colocar meu Favicon porque não consegui entrar no site sem me cadastrar :/

    Mas obrigada pela dica!!! Adoro ler seu Blog!

    Beijos!

    ResponderExcluir
  44. Fiz tudo direitinho. Colei o html e nada. Tambem fiz download do icon e inseri pelo wireframe da parte de layout do blog, mas nada ;( o que pode ser?

    ResponderExcluir
    Respostas
    1. Nayama, esse procedimento não é mais necessário porque agora o Blogger permite inserir o favicon direto pelo painel, no modo Layout.
      Basta ter uma imagem pequena, quadrada e inserir clicando em Editar abaixo de Favicon no modo layput.
      Esse método que explico no post é antigo.
      beijossss

      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…