Ao customizar o template do Diário de Bordo me deparei com um problema. O favicon não aparecia em todos os navegadores, somente no Firefox. Eu nunca me preocupei muito com isso pois o Dicas Blogger é hospedado no blogspot e um íconezinho do Blogger não ia fazer diferença. Sem contar que eu achava que todo mundo deveria usar o Firefox. Já com o novo blog, considerei a idéia de fazer diferente, visto que ele tem domínio próprio e ficaria mais elegante com um favicon próprio. Fui ao super blog Compulsivo, peguei o código e…descobri que eu não sabia criar uma imagem no formato .ico – necessário para que o favicon funcionasse nos outros browsers. Pedi um help ao Compulsivo e ao mesmo tempo fui pesquisar no São Google. E aí está a solução que eu encontrei.
Para quem não sabe, favicon, conforme publicado anteriormente, é aquele pequeno ícone que aparece na barra de navegação, do lado esquerdo da url de uma página web.
Nos posts anteriores, ensinei como criá-lo em formato .png. Agora, para que ele seja visualizado em outros navegadores, é preciso transformar a imagem .png em .ico. Uma forma simplificada de se fazer isso é acessando este site: http://www.favicon.ru/en
Devemos clicar em arquivo e procurar a imagem já salva no computador. Depois, iremos clicar em create favicon.ico. Feito isso, aparecerá uma nova janela para o download.
Legal! Mas, neste ponto, apareceu um novo problema: nem Picasa, nem ImageShack, nem Photobucket hospedam imagens no formato .ico. Nova pesquisa no Google e encontrei diversos sites com esta função. Escolhi o Image Boo Hosting.
Para hospedar a imagem, devemos clicar em arquivo, procurar a imagem com formato .ico recém-criada, fazer o upload dela e copiar a url, conforme nos mostra a imagem abaixo:
<link href='URL_DA_IMAGEM_FORMATO_ICO.ico' rel='shortcut icon'/>
<link href='URL_DA_IMAGEM_FORMATO_PNG.png' rel='shortcut icon'/>
Na primeira linha colamos a url da imagem .ico e na segunda, a url da mesma imagem em .png. Agora, é só entrar no html, procurar (Crtl+F) por ]]></b:skin> e colar o código logo abaixo, devendo ficar assim:
Vamos visualizar o template e, se tudo estiver bem, salvar. Para criar a imagem em .png, podemos usar o Paint ou o Photshop e hospedar no Picasa. Não tem erro!
ATUALIZAÇÃO EM 19/04/2009
Para que funcione também no Google Chrome, visualize um novo código aqui.
106 Comments
Ótimo Tutorial Juliana. Parabéns!
ResponderExcluirMuito Bom,Parabens
ResponderExcluirabraço
valeu pela dica juliana, o meu favicon é png...
ResponderExcluireu também acho que todos deveriam usar o firefox..
mas ja estou mudando...
Juliana, meio off topic mas... Indiquei vc para receber o selo Troféu do Amigo, estou indicando para as pessoas que me ajudaram e ainda ajudam nesse mundo virtual. Passa lá no Blogalisando e pega ok?
ResponderExcluirUm grande beijo e obrigado.
Juliana, o Skydrive hospeda esse tipo de arquivo, tanto é que o meu favicon está lá.
ResponderExcluirTambém há o SkyDrive que é liberado de cadastro para todos que já tem email "do MSN".
ResponderExcluirBeijos
Legal!
ResponderExcluirVim aqui pegar o código do outro, formato png.
Mesmo assim, vou colocá-lo primeiro e ver como fica.
Depois, volto para o formato ico.
Muito obrigado!
Parabéns, Juliana, já havia seguido vários tutoriais e no IE não funcionava, acabei de seguir o seu e funcionou no IE! Valeu!!!
ResponderExcluirJuliana, no IE finalmente funcionou, mas no Chrome não funciona. Estou tentando juntas várias dicas de vários blogs para funcionar no Chrome também.
ResponderExcluirEu de novo (risos)! Consegui, Juliana! Segui as suas dicas e as dicas do Icebreaker e ainda uma dica que o Sérgio do Icebreaker havia me enviado há um tempo por e-mail e consegui fazer funcionar o Favicon no Chrome(que eu uso e amo!).
ResponderExcluirNo final, ao invés de "rel='shortcut icon'/>" para a imagem .png eu coloquei "rel='icon' type='image/x-icon'/>" (apenas para a imagem .png).
Não tenho idéia do que significa esse código, mas deu certo e agora funciona o favicon em todos navegadores.
Obrigado e voltei apenas para compartilhar que consegui juntando várias dicas! Um abraço!
Eu tinha mudado o meu a um tempo, ajuda do Compulsivo, usei o site "convertico.com" para hospedar o favicon formato .ico, mas depois de um tempo parou de aparecer, Juliana, esse site q você passou não abriu aqui, e sobre o Firefox, meu blog fica todo desconfigurado tanto no Firefox como no Chrome.
ResponderExcluirmuito bom Juliana,
ResponderExcluirmas demora um pouco para o navegador atualizar o codigo ... muito obrigado
Favicon funcionando legal!
ResponderExcluirPArabens,otima dica.
Sayoan~
BJos
muito boa a dica, obrigado
ResponderExcluirMuito bom! Primeira vez de várias tentativas que deu certo!
ResponderExcluirVi um tutorial do compulsivo, de como colocar um favicon no blogger, tentei tentei, e não deu certo...
ResponderExcluirDepois de várias pesquisas no mestre Google, achei um jeito e deu certo.
Pra quem não sabe hospedar .ico, um excelente post.
Abraço!
Olá! Parabéns pelo Blog e seus excelentes posts. Ótimo para blogueiros inciantes como eu. Ainda estou em fase de construção, mas vou gostar de sua visita também. Abraço.
ResponderExcluirEstou tentando fazer funcionar, mas ainda estou apanhando. Talvez seja algum problema com o Firefox, vou tentar de novo no computador do trabalho com o IE.
ResponderExcluirMuito bom, esse realmente funciona!!! Parabens pelo Dicas!
ResponderExcluirMuito bom.Você descreve de forma didática todas as etapas e até um principiante como eu consegue fazer sem erros. Parabéns e muito sucesso pra você.
ResponderExcluirPrimeiramente, parabéns! Muito bom o seu blog!
ResponderExcluirJá vinha tentando várias e várias vezes colocar o favicon no meu site(http://axeitudogratis.blogspot.com)mas sempre dava errado ¬¬'...Mas agora eu fiz do jeito que você falou e, por enquanto, está dando certo - e espero que continue!
Muito Obrigado.
Tem outro jeito, hospeda no favicon.cc ou no wordpress.org
ResponderExcluirP A R A B É N S !!!!!!! vc é simplismente o cara, ja havia tentado de varias formas, mas VOCE resolveu meu problema muitooooo obrigado cara continui levabndo conhecimentos a todos, vc so tem a ganhar o prestigio de todos nos valeu msm. ABRAÇO
ResponderExcluirConsegui! Muito bom!
ResponderExcluirMuito obrigado, me ajudou muito. Foi o único que funcionou no meu blog.
ResponderExcluirAbraços!!!
Valeu cara, até que fim consegui
ResponderExcluirSer foda é foda...
ResponderExcluirObrigado...
Primeiro conheci o TNB depois o UC ae vem vc tbm DB...
Caramba vcs são fodas...
Depois quando tiver tempo visita meu blog e comenta lá se ele tá bomzinhu, com a ajuda de vcs 3 q consigui por ele no ar e aprendi muito...
como não uso o I8 nunca tinha pensado nisso, mais agora já concertei^^
ResponderExcluirótima dica
Parabens Ju Adorei só conseguir fazer aqui por q em outros lugares nada.
ResponderExcluirMuiiito bom Ju eu sou mais um daqueles que te seguem e tá sempre de olho do dicas, embora nunca tenha comentado aqui!
ResponderExcluirRealmente aprendo muito aqui, estive tentando colocar o favicon de diversas formas (problemas pra hospedar)e só com esse belo tuto pude conseguir. Muito agradecido!
Parabéns!!
www.pontopro.blogspot.com
mais uma dica simplesmente espetacular, acabei de modificar meu template e resolvi testar esta e foi maravilha, sem erro. vc esta de parabéns. Obrigado. e passa lá para v como ficou.
ResponderExcluirTroquei o meu, ficou muito style!!
ResponderExcluirvlww pela dica!(aquele laranjinha ta com nada ne..^^)
Impecável no template que vim buscar ao Dicas Blogger :)
ResponderExcluirObrigado Dra. Juliana!
Oi Juliana, eu tentei de toda maneira colocar o favicon no meu blogger só aparece no chrome, e não IE eu fiz como vc mandou, e não deu certo o que faço um abraço!!! E parabens pelo maravilho blog!!!!
ResponderExcluirMuito bom artigo, vou alterar meu favicon agora mesmo
ResponderExcluirAmei sua dica (aliás, amei várias dicas daqui) e precisava agradecer.
ResponderExcluirMeu blog está de cara nova, em partes, graças a vc.
Abçs!
Podemos usar a conta do picasa para hospedar a imagen .ico? Irá funcionar da mesma maneira?
ResponderExcluirOlá Juliana:
ResponderExcluirSinopse:
Fiquei sem TEL + NET (= TELEFONICA) DE 29/04 A 06/05. Até ai "normótico". Ao retornar lá fui eu ver meu blog...:o
Uns 70% das imagens hospedadas no Image Boo deu xabú... Sumiram! Incluindo os do Favicon... O esquisito que abri conta, e tal. O estranho que no Opera lê, mas nos demais navegadores... Vou refazer a hospedagem por hora... Por hora to refazendo na unha uma por uma, e quebrando o galho com Imagem linkada. Ju...
(Eram todas sniff...)
Complementando...
ResponderExcluirComo vencer a Tsunami de spans do Image Boo? Eu usava o Opera para isto mas agora... Haveria outro local? Bem vou procurando poraqui
Abraços.
Complementando II: "A resenha final"...
ResponderExcluirEncontrei: http://www.imageous.net/
Hospedei e deu certo! Fire Fox, Opera, Chrome, Safari e IE(K)8 também! Por hora todos funcionando e operantes!
Deixa eu voltar pra restauração do Blog :)))
Ju, obrigado e um abraço Arierônico ;)
O meu só não está pegando no IE.
ResponderExcluirTem duas imagens uma em jpg (a do mozila) e outra em ico (do IE), mas esta não pega de jeito nenhum...
Por que será?
Parabéns pelo trabalho. O site é realmente muito bom e elucidador. Tiro MUITAS das minhas dúvidas aqui. Obrigada. :)
ResponderExcluirJuliana:
ResponderExcluirNo Opera não rola...
demorei 1:30 mas consegui paguei só o começo
ResponderExcluir< link href = 'e o final ' shortcut icon ' / >
isso e que interessa e última http da imagem
obs:coloquei só a ICO ñ coloquei a PNG
quem quiser dar uma olhada aí como ficou e só acessar
www.tamison.blogspot.com
Parabéns, método tiro e queda, estava procurando por isso, obrigado!!!
ResponderExcluirMuito grato novamente, tenho fuçado seu blog alucinadamente:) mas uma conquista foi colocar o favicon no meu blog....seguindo seu tutorial deu tudo certo, muito grat0
ResponderExcluirOlá meu nome é Pedro Cabral, sou dono do blog Celular Massa (http://celularmassa.blogspot.com/) estava procurando fazer uma favicon para colocar em meu blog que logo logo sera ".com.br" e para tirar esse favicon do blogspot e deixa-lo com aparencia mais profissional. Pesquisando por ai, achei esse site http://www.html-kit.com/favicon/ que ja faz o favicon inclusive o .icon e ainda com animação se quiser. E só fazer uma imagem .png e mandar para o site que na hora vc escolhe o efeito e simplesmente faz o download do .icon e da imagem em .png.
ResponderExcluirTa ai uma dica.
Abraços e adorei o blog
Parabéns pelo seu blog!
ResponderExcluirMuito útil para os principiantes!
Obrigada e um abraço!
Suely
Muito Bom
ResponderExcluirVery Goood
Éra o que eu procurava
Muito Bom
D+D+D+D+D+D+D+D+D+D+D+D+
Juuu, vc é d++ mto obrigado!!!
ResponderExcluirparabens! achei muito legal! e vc conssegue cada ez mais retirar as aparencias de blog no meu site!
ResponderExcluirQueria muito que vc entrasse no meu site, por favor! ele é praticamente seu pois tudo que eu fiz nele vc que me encinou:
www.caionp.blogspot.com
valeu
ResponderExcluirMuito bom, conseguir colocar normal no meu
ResponderExcluirobrigado pela dica
Olá Juliana.
ResponderExcluirValeu pela dica! \o/ yaaaay!
Super deu certo a hospedagem do arq. ICO, mas não rolou favicon em outros navegadores. Outra, seu link ATUALIZAÇÃO EM 19/04/2009 não tá funcinando.
Procurei aqui nos comentários e achei a dica do
Ruleandson do Carmo (RU):
"No final, ao invés de "rel='shortcut icon'/>" para a imagem .png eu coloquei "rel='icon' type='image/x-icon'/>" (apenas para a imagem .png)."
Super rolou em todos navegadores. \o/
Valeu... Adoro seu blog.
Abraço.
Adorei essa dica também, tava doido por causa deste tal de .ico, não entendo muito deste negócio de blog, fazer site e colocar isso é mais fácil, pensei que era igual ou parecido, fui fazer e não dava certo.
ResponderExcluirobrigado novamente.
adicionei seu blog como parceiro do meu
http://www.diogobiotech.blogspot.com
MUITO BOM, O TUTORIAL CONSEGUI SEM PROBLEMAS RECOMENDO A TODOS USUARIOS,
ResponderExcluirJuliana, já vi este tutorial aqui e outros semelhantes em alguns blogs, geralmente indicando o Image Boo como hospedagem de imagens. Vi algumas características interessantes nele e resolvi usar tanto para colocar o favicon como diversas outras imagens do meu blog, que disponibiliza papéis de parede.
ResponderExcluirHoje tive a surpresa de que o meu favicon ficou indisponível. Não pude verificar ainda, mas temo pelas outras imagens que coloquei lá. Verifiquei também que o favicon do Dicas Blogger não está hospedado no Image Boo, apesar da indicação neste tutorial.
Gostaria de saber se você já teve algum problema com este serviço. Qualquer informação me seria muito útil.
Obrigado.
Nossa ferá essa dica!
ResponderExcluirValeu!
Juliana,tentei trocar o favicon seguindo suas dicas.Coloquei tudo direitinho hospedei as imagens no Tynipic e no Image Boo Hosting,mas não deu certo porque?
ResponderExcluirMuito bom estou mudando a kra do meu blog, e havia esquecido desta dica, vlw mais uma vez.
ResponderExcluirÓ T I M O!!!!!!
ResponderExcluirMuito obrigada MESMO!!!
Sou blogueira iniciante e não entendo PoWHa Nenhuma (sacou a propaganda? =P) de html, já tinha lido vários tutoriais sobre isso, com vários códigos diferentes, mas nenhum explicava ONDE colocar o raio do código! Imagino que, pra todo mundo, tenha sido fácil deduzir e talz, mas sem os seus 'passo-a-passo' e os prints eu não teria conseguido!
BRIGADÃO!!!
DEU CEEERTO
ResponderExcluiramei :d
vc é d+ juh
ResponderExcluirvc me dar dicas d+
melhor blog hein?
www.niovg.blogspot.com
BLOG FODÃO! VLW!
ResponderExcluirVLW, funco bem :D
ResponderExcluiroi meus parabems pelo post bem explicativo ,posso tirar uma duvida fiz o meu belezinha funcionou uns dias depois coloquei aquele codigo ler mais e o favicom sumiu restaurei o html mas nada de voltar mais ,ja troquei as imagem tbm sabe mais o menos que pode ter acontecido ,tbm troquei os servidores das imagem e nada ,se poder me dar uma dica do ocorrido eu agradeço .abçs
ResponderExcluirCara estava há muito tempo tentando fazer aparecer o favicon no IE8, pois aparecia mas de uma hora para outra sumiu, dai so consegui fazer aparecer no FF.
ResponderExcluirVc realmente esta de parabéns, ficou tudo muito explicado.
Apenas no IE8, tem que ter um pouquinho de paciência, pois demora até uns 2 minutos para aparecer...
Mas vc ests de parabéns mesmo...
valeu funcionou direitinho, não de outra.
ResponderExcluirvaleu veio muito bom...
ResponderExcluirNossa! Mto bom! Mesmo!
ResponderExcluirJá tinha tentado colocar no meu blog meu favicon mas naum tinha conseguido. Sempre tinha algo errado, e agora deu certo! O Máximo!
Mto obrigado!
Julianaaaaaaa!!! Todas as vezes que quero modificar algo em meu template corro para cá. Por mais que consulte outro sites, sempre consigo concluir com suas indicações. Agradeço a linguagem clara e sem rodeios. Depois de visitar um montão de outros blogs, e ver milhões de rodeios, finalmente consegui colocar o favicon de maneira simples como você explicou. Deixo uma dica, neste site: http://www.iconj.com/icon_generator.php consegui facilmente gerar a URL para a imagem ico. Mais uma vez obrigada!!!
ResponderExcluirOpa, vi que também tem um código pra funcionar no Google Chrome, que bom, parabéns!
ResponderExcluirNossa!Vc salvou a minha vida!
ResponderExcluirSem exageros,desde que eu comprei um domínio e hospedei no blogger eu estava tentando colocar um favicon e não conseguia,pq o meu navegador é o google chrome,e nele não aparecia de jeito nenhum.
Agora,graças a vc deu certo!
Muito obrigada!
Beijos
Oi Juliana,
ResponderExcluirValeu pelo tutorial!
Utilizei o último código que você postou no dia 19/04, mas não funciona no Google Chrome. Alguma sugestão?
Eu realmente precisava comentar!
ResponderExcluirSão 23:58 agora e eu estou desde as 20:00 rodando sites e mais sits tentando fazer o favicon. Fazia exatamente o que mandavam e não dava certo, deduzi até que era porque eu uso o layout classico e não o novo.
Mas finalmente, graas a você, eu consegui. Comeceu a dar pulos aqui quando vi que tinha ido haha.
Com isso só posso dizer: muitoo parabens pela otima explicação! Arrasou!
Abraços.
Fiquei feliz com o seu comentário ;)
ResponderExcluirMuito bom. consegui pelo código do chrome.
ResponderExcluirParabéns! Muito obrigado.
Obrigada.
ResponderExcluirGostei mto do post, mto explicativo, mas ainda não consegui colocar o icone no meu site!
ResponderExcluirmas mesmo assim Obrigado
Gostaria que visitasse meu blog e me ajudasse a incrementá-lo, ainda está no começo, mas espero que se torne um blog de sucesso
Não sei mais viver sem você!
ResponderExcluir; )
Juliana adoro todos os seus post, voce é 10
ResponderExcluirComessando agora com meu blog http://fazerblogger.com
brigadaça!!! vc salvou minha vidaaa!
ResponderExcluirFinalmente uma dica que funcionou comigo, principalmente com o código para Google Chrome. Tava ficando doido que eu conseguia ver o favicon no IE, Firefox e nada no Chrome. Valeu mesmo!
ResponderExcluirMuito obrigado!
ResponderExcluirNão consigo mudar o favicon, nao sei pq. Uso chrome. O site q vc deu pra hospedar a imagem ico para pegar o url da imagem ico, o site nao aparece nada. o q faço?
ResponderExcluirValeu cara!!
ResponderExcluirMuito importante ter alguem que se importa em ajudar os outros e investe seu tempo em ajudar o pessoal com seus blogs sem ganhar nada com isso. Parabéns.
Ficou joinha no meu blog.. hehehe
Té.
o site Image Boo Hosting de hospedagem está com problemas.
ResponderExcluirUso dicas e truques do DB a um tempão mais nunca comento, mais valeu por todas as dicas que tem dado ^^, e a propósito o imageboohost era o melhor p/esse tipo de serviço mais esta fora do ar, alguém ai tem uma dica de um melhor?
ResponderExcluirAgradeço se poderem ajudar, obrigado Juliana pelo seu blog.
A ta lindo com o novo visu^^.
juliana, por favor me ajude fiz o favicon tudo certinho mas quando chegou nna hora de hospedar aquele endereço não funciona.http://favicon.ru/
ResponderExcluirvc sabe de outro?
É, não consigo fazer porque o imageboohost está fora do ar e não acho outro site tão bom quanto..
ResponderExcluirEsse site tambem é bom pra hospedar favicons
ResponderExcluirhttp://www.iconj.com/index.php
Como o Image Boo estava fora tive que procurar outro
Ow juliana o Site imageboo.com esta foar do ar por tempo endeterminado (se é que vai voltar).
ResponderExcluirBom pro pessoal que esta lendo este tutorial não se desespere, pois há outros sites de hospedagem de arquivos .ICO, como nosso amigo Nicolas falou logo acima tem um site de hospedagem desse tipo de arquivos que é o ICONJ (http://www.iconj.com/) lá além de você hospedar você podera também criar seus próprios .ICO e até mesmo transformar uma imagem (.JPG) em Ícone (.ICO).
Então é essa minha dica pra vocês, dêm uma olhada no meu BLOG...
(www.CheatsPCBrasil.blogspot.com)
Valew
Juliana, pode demorar a aparecer?
ResponderExcluirÉ que eu fiz tudo como o explicado, mas não apareceu ainda...
Brigada!!!
Consegui!!!
ResponderExcluir=)
Brigada mesmo!
Uma boa dica de hospedagem de qualquer arquivo, assim como o .ico é o DropBox.
ResponderExcluirEu coloquei a imagem na pasta Public. Depois foi só clicar com o botão direito sobre ela e selecionar "Dropbox" e depois "Copy public link".
Colei o link no código e coloquei no blogger. Dá uma olhada como ficou: www.avilaodontologia.com.br
Obrigado pelas valiosas dicas!
O meu é o único que não deu certo para Internet Explorer?
ResponderExcluirSou usuária de Internet Explorer e não consegui visualizar o favicon no IE. Somente no firefox...
Gente não estou conseguindo alguem me ajuda?????????????????????
ResponderExcluirTo precissando!!!
MSN: gabrielvclagares@hotmail.co.uk
Tava tendo problemas antes, quis fazer por conta própria, mas não entendo porque, eu tava colocando entre a HEAD, só precisei desse post pra saber que era depois do b:skin, mas mesmo assim, valeu mesmo!
ResponderExcluirEsse foi o único site que eu fiz e deu certo! PARABÉNS...CONTINUE AJUDANDO os Blogueiros!!
ResponderExcluirPoxa ! Que emoção, estava rodando a dias na internet, atrás de um turto que desse certo, nenhum dava.
ResponderExcluirTentei esse, seguir as regras, e deu certo.
Muito agradecido a Juliana por esse turtorial tão bem feito e explicado !
Muito bom, Obrigado
ResponderExcluirMuito bom.
ResponderExcluirTutorial da hora! Vlw
ResponderExcluirmuitissimo obrigado tu e um genio foi o unico site q realmente me explico alguma coisa valeu valeu
ResponderExcluirMuito obrigado, estava igual louco tentado tirar o favicon original. Um pequeno erro no no código era o que me atrapalhava.
ResponderExcluirOlá Amiga, sobre transformar a imagem escolhida num formato ICO ou PNG ou em outros formatos, o programa chamado "Format Factory" faz isso e muito mais.
ResponderExcluirEu transformei uma imagem JPEG em ICO e PNG, depois carreguei no Blogger, e ele aceitou os formatos. Fiz o que instruiu nessa e na pagina http://www.dicasblogger.com.br/2009/04/atualizacao-do-codigo-para-favicon.html e deu tudo certo.
Então o negocio agora é mais simples ainda.
Abraço.