Você sabe o que é favicon?
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

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?
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.

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 …

Olá leitores queridos!
ResponderExcluirNotou 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.
Elaine..
ResponderExcluirAmo 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 ♥
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.
ResponderExcluirElaine,
ResponderExcluirVou tentar, novamente, por um favicon no blog, da última vez não consegui, rs.
Abraços, e Feliz 2010.
Adoro estas suas dicas, tô salvando todas!!!! Abraços!
ResponderExcluirElaine!!!
ResponderExcluiradoreiiii 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
Adoro esses seus posts com dicas para melhorar o blog...
ResponderExcluirE 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.
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
ResponderExcluirElaineeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
ResponderExcluircoloquei o favicon no meu blog *--*
muito lindo!!
Obrigada querida por mais essa aula!!
bjinho
Elaine, eu posso não comentar muito, mas leio tudo, viu?
ResponderExcluirE 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
Oie!!!
ResponderExcluir2009 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!
Floooooooooooor, ameiiiiiiiiiiiiiiiii!!! essa é a primeira dica sua que eu desconhecia!!! Já tenho meu favicon agora!!! :)
ResponderExcluirEu 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.
ResponderExcluirTambém nunca ouvi falar disso, e nem consegui entender exatamente o que é...bahhhhhh ( burrinha )
ResponderExcluirElaine, 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
Elaine como estou feliz em aprender a fazer isso. Obrigado pelas dicas e depois passa lá na mayrene para ver.Beijos
ResponderExcluirOlá, Elaine. Já postei a resposta junto so selo da promoção em meu blog.
ResponderExcluirBjs.
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
ResponderExcluirElaine,
ResponderExcluirHá um selo para você no meu blog! Olhe:
http://oblogdalou.blogspot.com/2010/01/selinho.html
Beijos e espero que goste!
Louise
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.
ResponderExcluirTentei 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
Elaine
ResponderExcluirJá 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
Oi Elaine,
ResponderExcluirTudo 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 :]
kkkkkk
ResponderExcluirnão tenho dúvidas, uma vez que não entendi naaaada...isso é português?
Essas minhas amigas cibernéticas...ai ai
este blog é um luxo!é duas mãos para os blogueiros,bjs!
ResponderExcluirElaine, deu tudo certo!
ResponderExcluirAgora 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.
Valeu Elaine, com as suas dicas conseguimos colocar um favicon no nosso blog. bjs
ResponderExcluirEu 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.
ResponderExcluirOs 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
uhuuuuu,esse eu consegui fazer,hehehehehe
ResponderExcluirjá 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?
Olá amore..
ResponderExcluirJá 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!
Você é nossa mestra, Elaine!!! Não tem outra!!
ResponderExcluirrs
Beijãooo
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!
ResponderExcluirMoç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 =)
ResponderExcluirOi, tudo bom?
ResponderExcluirEu tentei colocar o ico no url do meu blogger,mas não tive sucesso. Você pode me ajudar?
Elaine, muito obrigada pela dica! Segui suas instruções e deu super certo! Muchisimas gracias.
ResponderExcluirOlá,
ResponderExcluirProcurei 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
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!
ResponderExcluirEu coloquei no meu..
ResponderExcluirGostei.. Mas ñ consegui mudar a fonte q escolhi. O tamanho muda.. A fonte ñ.
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.
ResponderExcluirOi Elaine, como sempre, ótimas dicas, cliquei no +1 (aprendi pra q servia com vc rsrsrs).
ResponderExcluirVou tentar mudar a caixa de comentários, como vc nao colocou tutorial, suponho que seja nas configurações, certo?
Beijos e obrigada, Pat
Elaine, boa noite!
ResponderExcluirSegui os seus passos e coloquei no meu blog.
Obrigada, pelas dicas.
Beijinho,
Ana Martins
Parabéns pelo seu blog e obrigada pelas dicas fantásticas! Têm sido uma grande ajuda! :)
ResponderExcluirElaine, não tem como copiar o código do trecho, como faço?
ResponderExcluirVc bloqueou a cópia no seu blog!
Elaine, não consegui encontrar este trecho ]]<>/b:skin> no HTML.
ResponderExcluirSalvei 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...
Estou toda alegre, pois agora esta imagem igual a do perfil está aparecendo no favorito e em todos os lugares!
ExcluirBeijinhos...
Infelizmente não consegui colocar meu Favicon porque não consegui entrar no site sem me cadastrar :/
ResponderExcluirMas obrigada pela dica!!! Adoro ler seu Blog!
Beijos!
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?
ResponderExcluirNayama, esse procedimento não é mais necessário porque agora o Blogger permite inserir o favicon direto pelo painel, no modo Layout.
ExcluirBasta 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
Seria ótimo poder copiar o código, mas o site não deixa selecionar ele.. =P
ResponderExcluirEste método e muito antigo. Atualmente vc insere o favicon direto pela aba Layout
Excluir