Favicon no Blogspot

Atenção, há uma nova versão deste tutorial:
Corrigindo a exibição do Favicon no Blogspot
Utilizar um ícone personalizado em seu blog é uma forma de diferenciá-lo entre tantos. O ícone personalizado aparece no início da barra de endereços do browser quando o site é acessado e também quando é adicionado aos favoritos.

Em um site hospedado através de FTP, normalmente basta subir a imagem em formato .ICO, com resolução de 16x16px, nomeada como favicon.ico para a raiz do site. Mas no Blogger é um pouquinho mais complicado:

Crie um ícone 16x16 em formato PNG e hospede onde preferir. Depois inclua a linha abaixo dentro da tag HEAD do seu template adaptando o endereço onde salvou o ícone:
<link href='http://UsuarioCompulsivo.png' rel='shortcut icon'/>
Update: Para funcionar no Internet Explorer é necessário converter a imagem para o formato ICO e repetir o procedimento acima.

OBS: No Google Pages o nome da imagem não pode ser "favicon.ico", caso contrário irá aparecer o ícone do próprio Google Pages.

Dica do Fabrício do Orthodoxia nos comentários.

Comentários

  1. post muito legal, consegui add o favicon no nosso blog por aqui graças a este post, muito obrigado.

    ResponderExcluir
  2. opa!
    grato man!
    vou tentar mudar o meu agora ^^

    ResponderExcluir
  3. espero que eu consiga também, muita gente até explica, mas o problema é que explica como se fosse para um webdesigner. peguei vários exemplos, já mandei a foto para o favicon, a fotinha e o arquivo numa caderneta já estão na área de trabalho, mas daí saber o que é "raiz da parafuseta do blog" é que são elas...

    ResponderExcluir
  4. Legal Luciano, parabéns!

    Felipe, conseguisse implementar?

    Moço da Bodega, acesso o MyFavatar e tire suas dúvidas por lá, garanto que com um pouquinho de esforço mental você consegue...

    ResponderExcluir
  5. Ufa!!
    Consegui!
    Vlw!
    Amplexos Libertários

    ResponderExcluir
  6. funciona no blogger sim

    eu coloquei no meu

    http://umdenosdois.blogspot.com

    ResponderExcluir
  7. Opa! Claro que funfa... Olha eu lá na barra de endereços...

    []'s
    Compulsivo

    ResponderExcluir
  8. ae cara, muito bom funcionou perfeitamente comigo. flw vlw pelo tutorial.

    ResponderExcluir
  9. Puxa demais mano esse post, sem palavras, será de grande serventia para mim, muito obrigado por compartilhar!

    ResponderExcluir
  10. po o meu naw deu, fico com o ICO do google pages :(

    ResponderExcluir
  11. Muito útil a dica! Havia procurado em vários blogs, mas os códigos não funcionavam; este deu certo.

    O problema é que nem todos os navegadores mostram o ícone em PNG, mas é fácil resolver isso, e talvez valha até um outro update.

    É só criar a imagem 16x16 em .png e depois ir em: http://converticon.com e converter pra .ico e hospedar no GooglePages.

    *Nota: no Googlepages o nome da imagem não pode ser "favicon", caso contrário irá aparecer o ícone do próprio GooglePages.

    Ótimo blog!

    Abs!

    ResponderExcluir
  12. Obrigado pela dica Fabrício. Já atualizei o post ;-)

    []'s
    Compulsivo

    ResponderExcluir
  13. como eu armazeno imagens::???

    ONDE?

    vlw!

    ResponderExcluir
  14. admin, pode ser no Goope Pages (pages.google.com), no 000webhost.com, ou qualquer outro serviço se sua preferência...

    []'s
    Compulsivo

    ResponderExcluir
  15. Valeu! Funcionou legal e agora meus blogs estão ficnado do jeito que eu quero!

    ResponderExcluir
  16. Ai cara, bem útil esse post consegui colocar no meu blogspot o favicon, o problema é que ainda não encontrei um site para hospedar o arquivo ico.
    Mas esse não é problema pra quem tem firefox, porque eu que tenho visualizo legal, mas já no IE... Ai você conhece algum site tipo tinypic (esse não aceita) que hospede imagens e que aceite esse tipo de arquivo?

    ResponderExcluir
  17. BB, não precisa ser uma hospedagem exclusiva de imagens. Eu hospedo no Google Pages (pages.google.com) ou no 000.webhost.com.

    ResponderExcluir
  18. É eu sei, é que a preferência era por uma só de imagens...mas quanto de espaço tem o google pages?

    ResponderExcluir
  19. @bb, se não me engano, são 100 megas...

    []'s
    Compulsivo

    ResponderExcluir
  20. Eu nao concigui fazer tentei mais de 5 vezes e nao deu sertou pq?
    ajuda aew galera
    obg

    ResponderExcluir
  21. @Allyson, engraçado pois acesse seu blogue e está com o favicon sim...

    []'s
    Compulsivo

    ResponderExcluir
  22. Oi. O favi png deu certo para o firefox. Acrescentei o .ico para o ie (deixei os 2 no head aí já não aparece no firefox. Há algum hack para eu manter os dois no html? Brigadim...

    ResponderExcluir
  23. @Riva, fiz como você e pra mim funcionou!

    []'s
    Compulsivo

    ResponderExcluir
  24. cara esse foi o unico poster que fucionou e olha que eu ja tentei mais de 20 modelos diferente o seu blog e 10 ou melhor 1000 valeu

    ResponderExcluir
  25. @Shirley, quando acessei a url do seu arquivo, recebi a seguite mensagem:

    File Manager
    Logout successful, to login back click File Manager icon from control panel.

    Seu arquivo .ICO precisa estar hospedado e acessível através de uma URL no seu navegador.

    []'s
    Compulsivo

    ResponderExcluir
  26. bom dia...eu gostava de mudar o meu favicon mas nao encontro um programa para alterar a extensão de png para ico...o convertico ja nao funciona nao sei porquê...gostava da vossa ajuda...obrigada

    Cumprimentos

    ResponderExcluir
  27. Muito Obrigado pela dica!! Foi muito útil!!
    Parabéns pelo blog!
    abraços

    ResponderExcluir
  28. antes funcionava mas agora nao sei porque e deixou de funcionar de repente... o que tera acontecido?

    ResponderExcluir
  29. Verdade david, parou de funcionar, em todos os blogues que eu entro o favicon esta o padrão do blogger

    ResponderExcluir
  30. è impressão minha ou este favicon não funfa mais?
    por que e todos blogs nao tá funfando mais

    só no teu, Compulsivo...
    oque seria? acho que a hospedagem da imagem não é
    pois até peguei o teu exemplo de favicon

    e tambem não deu, apareceu o padrão do blogger,
    comfirme pra mim se ainda esta legal o TUTORIAL.

    Abraços!

    ResponderExcluir
  31. Realmente muito útil; minha Favicon tava bichada até encontrar este post. :D

    ResponderExcluir
  32. Nossa eu tava atras disso faiz muito tempo e os códigos que eu pegava nenhum dava, esse aqui foi de primeira!
    Parabens compulsivo

    ResponderExcluir
  33. Olá achei este blog em minhas pesquisas, quando estou, batendo cabeça com algo, e dessa ves foi este blog qm me ajudou um pouco, vou ser franco eu ja entendo bastante de html php, esses trço doido e talz, mais como todo ser humano, apanho pkas, pra elis, rsrsrs, Então so tenha a Agradecer e Vo dechar akie no Favorito,xD,
    Att, Nathan, Muito Obrigao ;D

    ResponderExcluir
  34. Valeu cara, agora sim consegui colocar um favicon no meu blog (blogspot). Obrigado mesmo.

    ResponderExcluir
  35. ola
    tentei por o favicon no meu blog mas nao funcionou deu um erro que e element type "link" must be followed by either attribute specification ">" or "/>"!
    Nao sei o que se passa :S
    se puder ajudar
    obrigado ;P

    ResponderExcluir
  36. Muito bom!! Acabo de implementar a meu blog, achei muito dificil e achei aqui no site com tanta facilidade, valeu pessoal

    ResponderExcluir
  37. Não consegui mudar meu favicon...
    Ele salva normal ,ais não aparece nada ...
    Meu navegador é o Mozilla Firefox

    ResponderExcluir

Postar um comentário

Postagens mais visitadas deste blog

O que significa DVDRip, DVDScr, R5, etc?

Nomes de todas as igrejas do Brasil

Hospedar JavaScript no Blogger / Blogspot