Favicon: como criar e hospedar imagens .ico
| RSS/Feed
-
Receba
automaticamente todas os artigos deste blog. Clique aqui para assinar nosso feed. O serviço é totalmente gratuito. |
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:
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.
Ó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!
Postar um comentário
Os comentários deste blog passam por uma rigorosa moderação. Leia com atenção os Termos de Uso e evite que o seu comentário seja recusado. Atenciosamente, Equipe do Dicas Blogger