Favicon (Favorite Icon, em inglês) é aquele ícone que aparece na barra de endereços e/ou na aba do navegador, além de ser exbido quando o usuário adiciona o site aos favoritos. Um blog com um Favicon personalizado se diferencia dentro do oceano de blogs com o clássico ícone “B” laranja do Blogger/Blogspot e pode fornecer uma boa primeira impressão ao usuário.
Para inserir um Favicon no seu blog, faça o seguinte:
Antes de qualquer coisa, você precisa do Favicon propriamente dito, que deve ser uma imagem no formato .ICO com resolução 16x16 pixels. Há duas formas de se obter um:
- Crie seu Favicon através do site Favicon.cc ou em um programa de edição de imagens como o Adobe Photoshop ou Adobe Fireworks (Neste último caso, a imagem deve ser convertida em um arquivo .ICO com o site iConvert).
- Utilize um Favicon pronto, fazendo o download através de sites como o FreeFavicon (Categorias: Negócios, Bandeiras, Diversos, Rede, Objetos, Aplicativos)
Em seguida hospede o ícone num servidor como o Yahoo! GeoCities ou Image Boo Hosting e tome nota da nova URL do seu Favicon.
Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.
Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.
Encontre o seguinte código (utilizando o Ctrl+F do seu navegador):
</head>
Então cole o seguinte código ANTES:
<link href=’URL DO FAVICON’ rel='shortcut icon'/>
<link href=’URL DO FAVICON’ rel='icon'/>
Altere a parte em laranja com a URL que você anotou na Etapa 2.
Visualize para ver se está tudo correto e clique em Salvar Modelo. O hack fará aparecer o Favicon nos principais navegadores, como o Firefox, Internet Explorer, Safari e Google Chrome. Para que o seu Favicon seja exibido inclusive em browsers menos populares como o Opera, veja as dicas de como garantir a compatibilidade do seu Favicon com todos os navegadores.
Se o Hack não funcionar, tente limpar os arquivos temporários do seu navegador e reabrí-lo. Também verifique se os arquivos de imagem do Favicon estão corrompidos. Se o problema persistir, utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.
Anterior
Assine o Feed
Adicione ao Google
Receba por Email
Twitter
Gostei bastante, vou colocar em meus blogs.
E aí,beleza? Tenho uma dúvida. Esse favicon funciona em todos os navegadores? Já vi por aí uns que eram pra IE, pro Firefox precisava outro...Eu queria só um que adicionasse em todos os naveg. Pelo menos os principais: IE, Firefox e Chrome. Valeu...
Pode usar o Hack sem medo. Esse hack funciona tanto com o Internet Explorer, quanto com o Firefox e Google Chrome, eu mesmo testei. Leia atentamente o tutorial e faça tudo de acordo, que o favicon vai funcionar perfeitamente. O único porém, é que em versões mais antigas do Internet Explorer, a pessoa tem que adicionar o site aos favoritos para que o favicon apareça.
Sérgio, consegui criar o .ico seguindo dicas do DicasBlogger e implantar o hack seguindo as suas dicas, mas no Chrome não funciona o favicon.
Já estou feliz, pois no IE e no Firefox funciona, mas no Chrome (navegador que eu uso e adoro) não. Será que fiz algo errado? Até olhei seu código e fiz como você: hospedei o .ico no Yahoo e o png no Picasa. Desculpa te perturbar, mas suas novas dicas estão me ajudando muito! Abraço!
O meu funciona normalmente no Chrome. Tente remover o hack do Favicon e colocar desde o início, seguindo essas duas postagens:
1. Colocando um Favicon no seu Blogger
2. Garantindo a compatibilidade do seu Favicon com todos os navegadores
Oi, Sérgio, tentei também e não sei por que não deu, recuperei o modelo do backup, mudei os códigos e nada, aí de madrugada quase 5h eu consegui!
Misturei com o código que você me enviou uma vez por e-mail e no ícone .png eu coloquei no final do código assim: "rel='icon' type='image/x-icon'/>" ao invés de só "rel='icon' "
Aí funcionou em todos navegadores! Deve ser pelo meu modelo de template e etc. Mas muito obrigado!
Não consegui infelizmente! O Blogger sempre retorna a seguinte mensagem: "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "href"."
Consegui!!! Eu estava tendo problemas porque eu tinha expandido os modelos de Widget. Depois que eu desmarquei, o Blogger parou de retornar erro e salvou. Agora o favicon está aparecendo normalmente. Valeu pela dica!!!
Sérgio, fiz exatamente como sua dica e não funcionou. Foi o mesmo erro... "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Não expandi modelos de widget.
Vou tentar mais tarde e volto para confirmar.
Abraços
Ótimo tbm estava recebendo esse erro, não expandam os modelos de widget, e a parte larnaj pra substituir é só onde tem letras as (') voce deixam, poderia mudar isso na dica sergio, pq eu tbm substitui tudo, deixa em laranja só:
’URL DO FAVICON’e as aspas em preto ai o pessoal erra menos.
Eu sigo a risca os tutos então substitui tudo q estava em laranja!
Tá ótimo vlw
@entrepernasentrelinhas: Excelente ressalva! Já modifiquei o tutorial, colocando as aspas em preto. Valeu!
Sérgio, boa tarde!! Não estou conseguindo. Não expndi os modelos de widget, tentei várias vezes, mas sem sucesso. Sempre aparece a mensagem de erro: "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "href".
Poderia me ajudar?
Obrigada
prá galera que pode tá dando problema...
eu copiei direto o código daqui, e substitui direitinho, mas igual não tava dando... dae, me dei conta que eu tinha que substituir o ’ por ' quando fiz isso, rolou perfeito...
aproveitando: pô, sem palavras... simplesmente MUITO obrigado pelo seu site! tou "aditivando" às ganha o meu blog!!! =D
Abrazzo do ...Tauico!!!
Aah, não apareceu no safari 4.0 nem no novo google chrome!
o blog não está aceitando esse código, eu já tentei varias vezes e não aceita,da erro eu oso o firefox 3
No IE 8 (internet Explorer) o meu blog aparece o Favicon do BLOGGER ¬¬
Eu quero mudar, o meu já está feito isso que vocês disseram acima, porém não aparece no IE...
Apenas nos outros navegadores...
Abraços..
Belomo - www.tirinhasbelomo.com
Ai , já que o Sérgio Estrella não respondeu , então irei comenta sobre o erro que da . Caso você coloque o código e aparecer um erro de XML
É provavél que já tem o código no template , para facilitar procure apertando CTRL+F e coloque ] ] > < / b : s k i n > ( JUNTE OS ESPAÇOS ! )
Logo abaixo vai aperecer alguns links e até códigos que você coloco . No caso pode aparecer como apareceu no meu logo baixo da palavra que pesquisou < ! - - f a v i c o n - - > (JUNTE OS ESPAÇOS !) . Caso não aparece vai procurando por palavras icon , favicon etc.. Espero ter ajudado xP
Um aviso útil aos usuários do Geocities. Recebi recentemente um aviso do Yahoo de que em breve o serviço Geocities será encerrado definitivamente. Recomendo que passem os favicons e quaisquer outros arquivos para outro serviço da web quanto antes puderem.
Muito boa sua postagem parabéns!
Onde você conseguiu esses botões que você utiliza no seu blog igual o dihitt.
Abraço
Olá Sérgio! Simplismente adorei a explicação! eu já havia procurado isto em outros sites, mas nem um foi tão claro quanto esse seu. Olha, eu fiz tudo certinho como diz no tutorial mas sempre aparece o erro: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "href".
Eu não entendo NADA de html :/ e mesmo tentando arrumar como o cara falou alí em cima, não deu certo. Aguardo anciosamente uma resposta. Obrigada e parabéns pelo site :D
Caro Sérgio! Primeiramente parabéns pelo blog. As dicas são sensacionais. Eu coloquei um Favicon no meu blog: http://origineitaliana.blogspot.com Ficou bem legal, mas notei que funcionou no Internet Explorer e no Firefox, porém, não funcionou no Google Chrome. Isso é comum?
Aproveitando, tenho uma sugestão. Notei um problema no Gadget para colocar o acesso a feeds no blogguer. Ele abre a opção para instalar o Feed como "Postagens" e logo abaixo um com "Todos os Comentários". Porém, no segundo, a palavra "Comentários" fica um pouco fora do ícone branco que está em baixo da palavra. Isso fica meio mal-apresentável para o blog. Deixo com isso uma sugestão para um post. Obrigado
Quando eu coloco aquele código ANTES aparece isso: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "href". Oque que eu faço?
Eu nunca consegui mudar o meu template com alterações no HTML. Sempre apareceu: "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente." O que está acontecendo? Estou com um blog a ser montado, e até hoje eu não sai do lugar... abraço
Realmente Sérgio o seu é o que explica melhor. Mas como o Gabriel e o Hbt Allen eu ainda não consegui...
ajuda ai mano...
para funcionar no Chrome e outros, faça assim:
[link href='endereço' rel='shortcut icon' type='image/x-icon'/]
[link href='endereço' rel='icon' type='image/x-icon'/]
subistituindo os [ ] por < >.
se funcionar avisa ai.
abraços.
edsin. www.blogpokerface.com
aki não deu !
pq este seguinte erro
Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: Open quote is expected for attribute "{1}" associated with an element type "href".
Poooow Edson G. Maldonado O seu ex: funfooow legal vlw mto obrigadoo ^^'
Oi!
Esse é um dos melhores sites de ajuda para blogueiras atrapalhadas, como eu. Mas infelizmente essa não deu.
A dica do Maldonado funcionou direitinho no meu blog.
Obrigada!
Não funcionou ake, nem no firefox e nem no chrome, por q?
Não funcinou ta falando que não ta fechado o num sei oke
Essa foi muito boa.
Vamos colocar em pratica as orientações.
Marcelo
sergio boa tarde, nao estou conseguindo por o icone no meu blog da tudo certo nemhum erro de html mais nao aparece o icone e continua aquele laranja do blogspot,se voce puder me ajudar com esse problema eu agradeço.
Item obrigatório, pois da uma boa personalizada de forma muito simples.
Valeu cara, bem melhor agora ^^
Edson G. Maldonado, no meu funcionou com sua orientação. Mto bom! valeu!!!
Consegui!! To tão feliz!! 4 horas depois achei o seu site e lendo os comentários consegui.
Estava dando erro. Daí li um comentário assim "eu tinha que substituir o ’ por '". De primeira eu não notei diferença. Depois eu vi que uma aspas era reta e a outra tortinha. Foi só trocar isso e eu consegui!!!!!!
Feliz demais!