Favicon: como criar e hospedar imagens .ico
em 03 Fevereiro 2009 | Marcadores: HacksAo 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:
Agora, vamos adaptar o código e inserir no html do nosso template. Este código é de autoria do Compulsivo, com todos os direitos reservados.
<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 comentários:
Ótimo Tutorial Juliana. Parabéns!
Muito Bom,Parabens
abraço
valeu pela dica juliana, o meu favicon é png...
eu 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?
Um grande beijo e obrigado.
Juliana, o Skydrive hospeda esse tipo de arquivo, tanto é que o meu favicon está lá.
Também há o SkyDrive que é liberado de cadastro para todos que já tem email "do MSN".
Beijos
Legal!
Vim 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!!!
Juliana, 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.
Eu 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!).
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).
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.
muito bom Juliana,
mas demora um pouco para o navegador atualizar o codigo ... muito obrigado
Favicon funcionando legal!
PArabens,otima dica.
Sayoan~
BJos
muito boa a dica, obrigado
Muito bom! Primeira vez de várias tentativas que deu certo!
Vi um tutorial do compulsivo, de como colocar um favicon no blogger, tentei tentei, e não deu certo...
Depois 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.
Estou 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.
Muito bom, esse realmente funciona!!! Parabens pelo Dicas!
Muito 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ê.
Primeiramente, parabéns! Muito bom o seu blog!
Já 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
P 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
Consegui! Muito bom!
Muito obrigado, me ajudou muito. Foi o único que funcionou no meu blog.
Abraços!!!
Valeu cara, até que fim consegui
Ser foda é foda...
Obrigado...
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^^
ótima dica
Parabens Ju Adorei só conseguir fazer aqui por q em outros lugares nada.
Muiiito bom Ju eu sou mais um daqueles que te seguem e tá sempre de olho do dicas, embora nunca tenha comentado aqui!
Realmente 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.
Troquei o meu, ficou muito style!!
vlww pela dica!(aquele laranjinha ta com nada ne..^^)
Impecável no template que vim buscar ao Dicas Blogger :)
Obrigado 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!!!!
Muito bom artigo, vou alterar meu favicon agora mesmo
Amei sua dica (aliás, amei várias dicas daqui) e precisava agradecer.
Meu 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?
Olá Juliana:
Sinopse:
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...
Como 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"...
Encontrei: 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.
Tem 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. :)
Juliana:
No Opera não rola...
demorei 1:30 mas consegui paguei só o começo
< 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!!!
Muito 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
Olá 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.
Ta ai uma dica.
Abraços e adorei o blog
Parabéns pelo seu blog!
Muito útil para os principiantes!
Obrigada e um abraço!
Suely
Muito Bom
Very 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!!!
parabens! achei muito legal! e vc conssegue cada ez mais retirar as aparencias de blog no meu site!
Queria 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
Muito bom, conseguir colocar normal no meu
obrigado pela dica
Olá Juliana.
Valeu 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.
obrigado novamente.
adicionei seu blog como parceiro do meu
http://www.diogobiotech.blogspot.com
MUITO BOM, O TUTORIAL CONSEGUI SEM PROBLEMAS RECOMENDO A TODOS USUARIOS,
Juliana, 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.
Hoje 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!
Valeu!
BOM TUTORIAL VALEU !!!!!!
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?
Muito bom estou mudando a kra do meu blog, e havia esquecido desta dica, vlw mais uma vez.
Ó T I M O!!!!!!
Muito 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
amei :d
vc é d+ juh
vc me dar dicas d+
melhor blog hein?
www.niovg.blogspot.com
BLOG FODÃO! VLW!
VLW, funco bem :D
oi 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
Cara 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.
Vc 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.
valeu veio muito bom...
Nossa! Mto bom! Mesmo!
Já 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!!!
Opa, vi que também tem um código pra funcionar no Google Chrome, que bom, parabéns!
Nossa!Vc salvou a minha vida!
Sem 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,
Valeu 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!
Sã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 ;)
Muito bom. consegui pelo código do chrome.
Parabéns! Muito obrigado.
Obrigada.
Gostei mto do post, mto explicativo, mas ainda não consegui colocar o icone no meu site!
mas 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ê!
; )
Juliana adoro todos os seus post, voce é 10
Comessando agora com meu blog http://fazerblogger.com
brigadaça!!! vc salvou minha vidaaa!
Finalmente 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!
Muito obrigado!
Nã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?
Valeu cara!!
Muito 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.
Uso 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?
Agradeç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/
vc sabe de outro?
É, não consigo fazer porque o imageboohost está fora do ar e não acho outro site tão bom quanto..
Esse site tambem é bom pra hospedar favicons
http://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).
Bom 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?
É que eu fiz tudo como o explicado, mas não apareceu ainda...
Brigada!!!
Consegui!!!
=)
Brigada mesmo!
Uma boa dica de hospedagem de qualquer arquivo, assim como o .ico é o DropBox.
Eu 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?
Sou 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?????????????????????
To 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!
Esse foi o único site que eu fiz e deu certo! PARABÉNS...CONTINUE AJUDANDO os Blogueiros!!
Poxa ! Que emoção, estava rodando a dias na internet, atrás de um turto que desse certo, nenhum dava.
Tentei esse, seguir as regras, e deu certo.
Muito agradecido a Juliana por esse turtorial tão bem feito e explicado !
Muito bom, Obrigado
Muito bom.
Tutorial da hora! Vlw
muitissimo obrigado tu e um genio foi o unico site q realmente me explico alguma coisa valeu valeu
Muito obrigado, estava igual louco tentado tirar o favicon original. Um pequeno erro no no código era o que me atrapalhava.
Postar um comentário
Os comentários passam por um sistema de moderação, ou seja, eles são lidos por nós antes de serem publicados. Não serão aprovados os comentários:
- não relacionados ao tema do post;
- com pedidos de parceria;
- com propagandas (spam);
- com link para divulgar seu blog;
- com palavrões ou ofensas a pessoas e marcas;