Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Tutoriais Blogger Vanessa S.

Configurar o Favicon pelo painel do Blogger

Veremos aqui configurar o favicon pelo painel do Blogger.
Eu já publiquei um tutorial onde expliquei como personalizar a barra de endereço do seu blog colocando um logo exclusivo no ícone da barra de endereços do navegador: Personalizar Favicon no blogger.

No artigo citado, era necessário incluirmos algumas linhas de código html para conseguirmos personalizar o favicon.
Agora é possivel incluirmos um favicon personalizado, diretamente pelo painel, sem necessidade de mexer no html do template. Achei bem legal esse novo recurso, testei e resolvi compartilhar com vocês essa nova opção.

Para trocar o favicon é necessário que você tenha um ícone criado no tamamnho 16×16 na extensão “.png

Agora vamos ver como fazer upload do favicon personalizado no painel do Blogger in Draft.

Configurar o favicon pelo painel do Blogger

1. Acesse o painel do Blogger e faça login no seu blog.
2. Vá em “layout
3. Onde está “favicon“, clique em “editar(veja a imagem abaixo)

4. Faça upload do seu favicon, clicando em “Selecionar arquivo” e clique em “salvar“.

Prontinho, o Blogger já fará a substituição automática do seu favicon personalizado de forma fácil e rápida.

Observações:
Pelo que pude notar, pode ocorrer da alteração demorar um pouco, portanto, tenha paciência e aguarde, ok?
Em alguns casos, pode ser que o blogger requeira que sua imagem esteja na extensão “.ico
Eu particularmente consegui colocar o favicon pelo painel do blogger in draft, utilizando um icone na extensão “.png” mesmo, mas pode ocorrer que com você não dê certo.

Se você tentar inserir o icone na extrensão “.png” e aparecer uma mensagem “tipo de arquivo inválido“, pode ser que você tenha que converter seu icone para uma extensão “.ico“, antes de fazer upload.
Mas não se desepere, pois o site Dynamic Drive, oferece um serviço online de gerador de favicon.
A única coisa que você precisará, é ter uma imagem já criada, que o site converte a sua imagem para extensão “.ico
Vejamos como fazer:

Convertendo seu icone para extensão “.ico”

Acesse o site Favicon Generator.
– Selecione a sua imagem e clique em “create Icon“.
– Depois clique no botão “Download FavIcon” e salve no seu pc o icone que você acabou de gerar.
– Depois é só fazer upload do seu favicon convertido diretamente no painel, conforme eu expliquei no inicio deste tutorial, e pronto!

configurar o favicon pelo painel do Blogger

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

33 Comentários

  1. Shade Saint disse:

    Amiga como excluir o Gadget do Favicon? Pois o mesmo se encontra em cima dos Gadgets da sidebar me impedindo para adicionar algo. Eu não quero o Gadget de Favicon. Já procurei o código deste tal Gadget e não o encontro no HTML. Me dá uma força, pois não posso colocar a sidebar mais para baixo porque vai ficar desproporcional. Eu só queria apenas excluir o Gadget do Favicon na parte de Layout! No aguardo!

  2. Camilaa disse:

    Gostei muito ajudou mesmo valeu

  3. Muito boa a dica. Após a conversão do figura para o formato .ico funcionou! Obrigado.

  4. Maria Eduarda disse:

    Eu inverti o simbolo da reliquias da morte com o fundo BRANCO no iPad e deu certo ele n deu nada de que estava invalido eu salvei as alterações mas ele não aparece aqui quando eu entro blog o que eu faço??

    • Vanessa disse:

      Lamento, mas não tenho como saber o que pode estar ocorrendo no seu template. Não tenho como te ajudar.

    • Hensi disse:

      Bom,se você estiver usando o blogger,atualize o seu blogvárias vezes,se não funcionar,vá até o layout e remova e coloque novamente o favicon,se você usa outro site (sem ser o blogger) ,tente fazer a mesma coisa.
      Espero ter ajudado.

  5. Renato disse:

    Oi foi muito bom na mesma hora funcionou muito obrigado, tentei várias fezes e forma mais sua foi perfeita. Vlw…

  6. .:: Clau ::. disse:

    Marisa
    Eu não sei o pode ter acontecido com o seu..geralmente é no IEca que costuma dar problema e não no Chrome. Lamento,mas não tenho como te ajudar.

  7. Marisa Toledo disse:

    Olá! Estou com uma dúvida: coloquei o favicon com êxito no meu blog, mas por algum motivo que não sei, ele não aparece no Google Chrome (no firefox e no opera, por exemplo, aparece). Por que isso? Como faço pra acontecer tb no chrome?
    Obrigada desde já!

  8. .:: Clau ::. disse:

    Ian
    Procura pelo tutorial "efeito tooltip nos links do blog".

    Obrigada pelos comentários pessoal, voltem sempre 😉

  9. Clube da risada disse:

    O Blogger só tá melhorando, não tenho nada a reclamar do serviço! Está cada vez melhor, essa do favicon foi boa e facilitou a vidade muito gente que não entende muito de HTLM!

    Abraço.

  10. . disse:

    Oi Clau! Primeiramente queria agradecer pelo post é muito bom e já utilizo no meu blog! O problema é que como eu uso o Google Chrome, fica aquele "mundinho" no lugar do favicon. Teria como me Ajudar? Ah! E também gostaria de saber como vc fez esse efeito de quando passar o mouse sobre algo aparecer tipo a descrição dele, tipo quando passa o mouse em cima do texto Widget By Mundo Blogger

    Obrigado

  11. Bruno Batista disse:

    Legal!
    Agora em alguns leitores de rss do iPad/iPhone ainda aparece o icone do Blogger.

  12. Eu Amo Cães... disse:

    Ótimo!

    Parabéns pelas dicas!

    Ainda aguardando aqui…

  13. FUTEBOL E OUTROS disse:

    valeu

  14. Sybylla disse:

    De fato, ele demora um pouquinho para aparecer. E no meu caso ele pediu em formato .ico, mas sem problemas. Uma ótima ferramenta. Vamos torcer para virem mais novidades boas como essa.

    Que bom que voltou, Clau!

  15. IgorFox disse:

    Eu sei que isso que eu vou falar não tem nada a vê mais!! esse blog é muito bom,a aparência dele é muito maneira é muito gótica e eu acho maneiro!! parabéns pelo blog

  16. Luisaeadriano disse:

    Obrigada pela ajuda .

  17. Trashy Girl disse:

    Oi Clau, parabéns pelo blog e obrigado por tudo! Você poderia fazer mais tutoriais de JavaScript, jQuery e Ajax se você souber é claro… obrigado mais uma vez!

  18. Rayanne disse:

    Aff, a maior sorte da minha vida foi ter encontrado esse blog. Com uma autora que explica definitivamente, super BEM!

    Obrigada e continue dando dicas maravilhosas.. Tô adorando! Me sinto uma expert em templates..

  19. Junior disse:

    Vlw não sabia que podia demorar e nem sabia como botar kkk vlw

  20. .:: Clau ::. disse:

    Olá Tatii
    Obrigada pelo comentário e pela visita. Quanto a sua pergunta, no final de cada artigo, existe um aviso que trata a respeito de cópia do nosso conteúdo publicado aqui, onde informamos que a cópia e a reprodução dos artigos deste blog não estão autorizadas, portanto, gostaria de pedir que, por favor,dê uma lida na nossa Licença no item sobre "Licença de conteúdo" que vc entenderá melhor.
    Obrigada!

  21. Tatii disse:

    Olá. Bom, para começar quero te dizer que adorei esse site, eu estava a um tempo procurando umas dicas de html para blog e etc e encontrei esse site. Aqui tirei muitas de minhas dúvidas e achei tudo que estava procurando, então queria agradecer. Também queria perguntar se não posso pegar algumas de suas dicas e postar no meu blog, com créditos, é claro. Meu blog não é sobre isso, é um blog de notícias sobre uma artista que admiro muito, mas para passas as dicas e poder ajudar também meus followers. Se não puder, eu entendo, mas se puder, saiba que terão os devidos créditos e, de qualquer forma, irei indicar este site, pois gostei, de verdade. Obrigada pela atenção, beijos :*

  22. .:: Clau ::. disse:

    DGomez
    Obrigada pelo comentário 😉

  23. DGomez disse:

    Eu já tinha visto o Favicon o Blogger in Draft!

    Eu prefiro utilizar o hack para isso direto no HTML, pois já vi alguns comentários de que as vezes não aparece ou até mesmo demora a aparecer, mas para os iniciantes uma boa dica ;D

  24. .:: Clau ::. disse:

    Renato S. Oliveira
    Esse recurso só está disponivel no Blogger in Draft..releia o tutorial.

    Arierom,
    Adm

    Pois é, acabei de abrir o IEca aqui e o favicon apareceu…que bom né? Tomara que seja assim pra todos..tomara 🙂

  25. Adm disse:

    Não sei o que aconteceu, mas pelo menos aqui em meu computador os favicons instalados pelo blogger in drafit estão funcionando (o meu, o da Clau, da Talita e do Adelson), o pessoal do Blogger pode ter aperfeiçoado a questão para resolver o problema – Tomara que sim.

    Esta é uma coisa simples, porém faz toda a diferença em blog/site – fica mais profissional – já havia tentado vários códigos, no entanto nunca foi tão satisfatório quanto esta simples dica. Te amo Clau, obrigadão

  26. Adm disse:

    Muito bom Clau ótima descoberta, pena que não funcione no navegador infelizmente mais usado. Sem comentários esse navegador, muita dor de cabeça.

  27. Arierom disse:

    Clau,

    o IE9 é esquizo… Ele só começou a mostrar o favicon depois que utilizei este novo recurso, com ".ico", para mim.

    Com ele, visualizo normal o Mundo Blogger e o Gerenciando Blog, mas é falho para mostrar os meus seguidores. Coloco em modo de compatibilidade para tal, aí não mostra a caixa de pesquisa… Ôhlelê!

  28. Renato S. Oliveira disse:

    Abri meu blogger, fui em design, mas na navbar aqui não tem a opção editar favicon… pq será???
    Alguém ae pode me dar uma mão!!!
    bloguedorenato.blogspot.com
    Até mais

  29. .:: Clau ::. disse:

    Talita
    Eu tb achei ótima essa nova opção. Ainda bem que hje resolvi "fuçar" o Blogger in Draft, pq nem eu sabia que tinha essa novidade por lá..rs.
    Que bom que gostou. Obrigada pelo comentário. 🙂

    Adelson
    O IEca sempre é "O problema". Ow navegadorzinho viu?aff…Eu tb não consegui encontrar uma forma para o IEca. Qdo eu souber de algo, aviso aqui.Obrigada pelo comentário.

  30. Adelson Smania disse:

    Olá, Clau!

    Achei muito bacana esta nova funcionalidade do Blogger, que tornou mais fácil o trabalho de colocar um favicon no blog, especialmente para quem está começando.

    Uma pena que nem esta opção esteja funcionando corretamente no IE9. Não encontrei forma nenhuma de exibir corretamente o favicon de meu blog nesse navegador.

    Um abraço!

  31. Talita Uoya disse:

    Que máximo Clau! Eu estava querendo colocar no meu, mas não conseguia no html. Ótima dica, obrigada por compartilhar! Beijo grande!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.