Como trocar o Favicon no Blogger e no WordPress

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

favicons-blogger-wordpress Olhe a barra de endereços do navegador de internet que você usa e repare que há um ícone ao lado do endereço do meu blog, que também aparece junto ao nome do Blog. No Blogger, por exemplo, esse ícone é padrão, um “B” laranja. Isso nós chamamos de “Favicon” e você pode personalizar isso para o seu blog. Vou mostrar como usar um tanto no Blogger quanto no WordPress e que vai funcionar em todos os navegadores. Isso determina a identidade de seu blog e dá mais características de profissionalismo para seu trabalho. É uma mudança simples, mas que ajuda a destacar seu trabalho.

Quer ser um(a) Blogueiro(a) de Elite? Acesse AGORA: http://blogueiro.pro

Introdução:

A primeira coisa a fazer é criar uma imagem quadrada que tenha 16x16px – um quadradinho bem pequeno. Você vai precisar criar essa imagem do tipo PNG (formato do arquivo de imagem). Pode ser até no Paint do Windows. Então envie essa imagem para alguma hospedagem na web, que pode ser até o do PicasaWeb ou de um host particular. Aqui eu ensino como fazer isso no PicasaWeb:

Você vai precisar da URL dessa imagem para fazer as devidas alterações que vamos descrever nos códigos abaixo.

Se você usa o WordPress.org

(Com hospedagem e domínio próprios)

Envie sua imagem criada para sua pasta padrão de imagens do seu blog, dentro do seu Host (hospedagem). Entre na sua conta e no painel de controle clique no menu “Aparência” ~> “Editor” e selecione o arquivo “Funções do tema (functions.php)”, como ilustra a imagem:

WP-functions-analytics

Então cole o seguinte trecho de função:

function childtheme_favicon() { ?>
<link rel="shortcut icon" href="<?php echo bloginfo('stylesheet_directory') ?>/imagens/favicon.png" >
<?php }
add_action('wp_head', 'childtheme_favicon');

Onde está destacado de vermelho, nessa função ele buscará a imagem do Favicon dentro de uma pasta “imagens” do seu host. Mas você pode substituir todo esse trecho de vermelho por uma URL do endereço da imagem.

Salve e veja o resultado se funciona bem em todos os navegadores.

Se você usa o Blogger/Blogspot

Agora o Blogger tem um gadget (elemento de página) só para fazer a troca do Favicon de forma padrão e mais fácil. Veja a imagem abaixo:

Ao clicar em “Editar” junto ao “Favicon”, na janela que abrir basta adicionar a imagem do ícone que deseja usar. Salve e veja o resultado já funcionando no seu blog.

De toda forma, se ainda quiser usar o modelo de código só para garantir, veja o procedimento manual logo aqui.

Você terá de enviar a imagem para uma hospedagem ou para o PicasaWeb como descrevemos logo no início desse artigo e pegar a URL dessa imagem. A seguir, entre no painel de sua conta no Blogger.

Clique no menu “Modelo”, clique no botão “Editar HTML” e procure pela linha “]]></b:skin>”. Imediatamente ABAIXO disso, cole o trecho:

<link href='URL_da_IMAGEM.png' rel='icon' type='image/x-icon'/>
<link href='URL_da_IMAGEM.png' rel='shortcut icon' type='image/x-icon'/>

Substitua o que está destacado de vermelho pela URL, o endereço, da imagem do ícone (faicon) que escolheu para seu blog. Salve o modelo e veja o resultado na barra de endereço dos navegadores que você usa.

Para os dois casos, tanto para Blogger quanto para o WordPress, eu só verifiquei o resultado no Google Chrome, no Internet Explorer 8 e no FireFox 3.6. Se você usa outro navegador e encontrar isso funcionando bem, nos avise aqui nos comentários, especialmente se você usa o IE7 ou IE6.

Outras coisas para colocar em seu blog:

68 Comentários

  1. Marcos, como sempre, funcionou muito bem ! Estou usando o Opera 10.10 e tudo deu certo. Gostaria de parabenizá-lo pelo trabalho que você desenvolve; eu diria que ele, nos dias atuais, se tornou de utilidade pública, afinal, ter uma "segunda vida" no mundo virtual é cada vez mais necessário para se comunicar.

    Por isso, gostaria de saber se posso indicar seu site em meu Blog. Ele tem um espaço para indicações mensais de sites e blogs, e como é voltado para os meus alunos, público na faixa de 15 até 17 anos, penso que vão gostar de suas dicas !

    Mais uma vez agradeço sua imensa ajuda para os "analfabetos programacionais" como eu!

    Responder

  2. Excelente! dá um ar mais proficional…

    noss, já li diversos posts desse blog e está me ajudando muito a incremetar o meu.
    Parabens. (muito agradicido… hehehe)

    Responder

  3. No blogger n é preciso fazer esta gambiara toda n.. basta deixa ele acima do all include que gera o fave icon do blogger.
    ou excluir o include .

    Responder

  4. Excelente dica!!!
    No começo eu tive um pouco de trabalho para seguir esse tutorial, pois estranhamente o PicasaWeb do Google não está aceitando imagens no formato .ICO (pelo menos na minha conta), mas achei um outro ótimo que aceita qualquer formato de imagens: http://www.imageboo.com

    Parabéns ferramentasblog

    Responder

  5. Muito obrigado! Funciomou direitinho. Eu achava que isso dava o maior trabalho mas em minutos o favicon do meu blog já estava pronto. Parabéns pelo seu blog! Ele já me ajudou muito desde que eu criei o meu blog. Espero que continue sempre a ajudar os outros blogueiros como ajuda agora.

    Abraços!

    Responder

  6. No final do dia vou ter que colocar um template by Ferramentas Blog no meu blog de tanto que estou atualizando meu lay out com suas dicas. De vez em quando venho aqui, navego e atualizo algumas coisas no meu blog)!
    Valeu!

    Responder

  7. @Conteúdo Animal,
    Leia com atenção e verá que é justamente para adicionar essa função. Ela não consta, basta então adicionar o trecho fazendo as devidas modificações.

    Responder

  8. Muito bom, custei mais encontrei um código que funciona no Chrome *o melhor navegador" mas, é pena que eu coloquei um GIF, mas ele não se move no crhome, mas no mozilla tah trankuilo, e no IE ele tambem naum aparece… mais valeuu….

    Responder

  9. Super Marcos,

    Eu sempre encontro as dicas que preciso aqui… De forma simples e bem explicada para leigos, como eu, em HTML.
    Suuuuuuuuper obrigada! Meu blog está ficando a cada dia mais lindo, graças a você!

    Responder

  10. Queria esta solução há tempos. Mas, achei complicado reduzir a img. Finalmente, sim!

    Só que no Firefox, o favicon aparece. Já no IE 8 ele trocou o ícone do blogger pelo do IE. Uai!!!

    Pra carregar o background tb aparece antes um código … Argh!

    Responder

  11. Corrigindo: no Safari, só aparece na barra de endereços, mas não na aba, ao lado do nome. Diferentemente do Firefox, a versão atual do Safari só mostra os favicons em um lugar.

    Responder

  12. No IE não deu mesmo. Mas no Chrome deu bem tranquilo. Parabéns pelo blog. As dicas são ótimas. Continuem assim.

    Responder

  13. Cara procurei pra baralho um post pra editar favicon só aqui encontrei um resultado satisfatório obrigão pela dica!!!
    parabéns ótimo post, valeu!

    Responder

  14. Oi Marcos. Você está de parabéns. Estou começando agora e as vezes me atrapalho muito. Coloquei um Favicon há algum tempo atrás no meu Blog e agora queria trocar e não lembrava mais o que eu tinha feito. Achei seu Blog nas Pesquisas e consegui facilmente trocar.
    Estou a tarde toda aqui lendo seus posts e não consigo sair mais daqui, rsrsrs. Muito bom mesmo. E suas explicações são bem fáceis de entender. Obrigada por dividir conosco tudo o que sabe.
    Em agradecimento estou linkando seu blog nos meus recomendados.
    Fica na Paz!
    Jurema Barroso.

    Responder

  15. Funcionou melhor do que aquela antiga dica de colocar o primeiro código dentro da tag "<head>", que parece que agora não funciona mais!de qualquer forma muito obrigado peladica e sucesso para seu blogger!

    Responder

  16. Olá! procurei isso em todos os sites das explicações, e até que enfim consegui finalmente colocar no meu blogger!
    Estão de parabéns pela explicação! Show de bola!!!

    Responder

  17. Mutito bacana mesmo, torna o blog uma coisa bem mais pessoal. Obrigado mesmo Marcos, de toda a Equipe do Blog Re Jump! (Eu, rsrs)

    Responder

  18. Olá,
    Eu já tentei fazer isso várias vezes, só que não aparece a imagem que eu fiz. Aparece um quadradinho branco com uma coisa azul em cima e isso não é a minha imagem. A única coisa que eu fiz de diferente do seu tutorial, foi que eu hospedei a imagem no ImageShack e peguei o direct link. Você saberia me informar o que está dando errado por favor?
    Obrigada.

    Responder

  19. Bem aqui vai tmbm meus agradecimentos, más gostaria de citar que a imagen não precisar ser no formato 16×16 e pode ser em outros formatos tmbm alem de Png.. Att+ abraços ^^

    Responder

  20. Legal, muito simples e prático =}

    Consegui aqui sem dor de cabeça pra fazer… Já tinha tentado com outros tutoriais mas só deu certo com esse. =}

    Parabéns e obrigado.

    Responder

  21. marcos, comigo aconteceu um problema, inseri corretamente a função, porém deu um erro, então apaguei a função e atualizei a edição.

    Aí deu um bug geral, que não consigo mais acessar o meu site, nem o painel administrativo, você sabe o que pode ser ? aparece o seguinte erro:

    Parse error: syntax error, unexpected ‘}’ in /home/rodrigomen1/public_html/wp-content/themes/mystique/functions.php on line 161

    Se alguém poder me dar uma luz….

    Responder

  22. Consegui resolver Marcos, obrigado.

    Eu não tinha apagado nada não, também não sei o que pode ter acontecido para dar este erro, acabei utilizando um plugin para por a favicon no meu blog. Para resolver o seguinte problema, como não estava conseguindo acessar o painel de administração, abri o ficheiro via FTP, e apaguei o código.

    O erro aconteceu , justamente quando eu apaguei o código e atualizei, mas no painel de administração, e na verdade o código não tinha sido apagado.

    Responder

  23. Valeuuuu Marcos, não tinha conhecimento de seu site e sempre precisei de dicas tanto para worpress como blogger, FASTASTICO ja add no meu favoritos.

    Obrigado

    Responder

  24. Oi marcos, usei sua dica e nao consigo mais acessar o site.
    Aconteceu igual com o Rodrigo Menezes, só que eu nao tenho a mínima ideia de como recuperar, nem usar os passos que ele usou. O erro é: Parse error: syntax error, unexpected ‘}’ in /home/meusite/www/wp-content/themes/wp-andreas01/functions.php on line 76
    Simplesmete nao acesso nenhuma página mais do meu blog.

    Responder

    • Você terá de abrir manualmente, pelo FTP o arquivo das funções e apagar as linhas adicionadas.
      O que você fez errado foi colocar o código fora da linha de fechamento das funçòes, por isso deu erro.

      Responder

  25. Não gostei o para o wordpress, deu um erro aqui que só fez eu ter que falar com meu surporte, aí em cima voce fala que é para inserir o codigo mas não diz onde, se no final dos codigos todos ou não, acabei errando e mim dei mal, dessa forma não faço mas Marcos, fiquei chateado.

    Responder

    • Rafael,

      Vc deve ter colado o código da FUNÇÃO, fora do campo de função. Não preciso dizer onde, se já disse que é uma função e é para colocar dentro da área de funções do arquivo PHP indicado.

      Responder

      • Me desculpe, Marcos. Mas você precisa dizer SIM onde é pra colar. Você vai encontrar muitos leigos pela frente. Dizer apenas “cole” no meio de um código-fonte imenso é complicado pra nós leigos? Cole aonde? No final? No início? No meio de onde? Cole só o que está em vermelho? cole tudo?

        Eu, leigo, peguei o código, procurei o “functions.php” colei no final e atualizei. Deu um erro master, dito acima. Fui lá e apaguei esse código e colei dentro, deu o erro novamente e não consigo acessar nada no meu blog. Nem painel, nem nada. Sei que vou resolver, mas este tutorial aqui é pra quem tem noção de onde colar o código ou pra todos que buscam a melhora do seu blog. Quem é leigo feito eu e alguns, seria interessante que você dissesse exatamente a onde colar o código.

        Abraço.

        Responder

  26. Olá Marcos! Tudo bem? Muito boas suas dicas! Sempre me ajudam. 🙂
    Tentei trocar meu ícone e ele aparece mudado so no mozilla, o que sera que eu fiz de errado?
    Um abraço!

    Responder

  27. Pingback: Wordpress: A verdade sobre desempenho e plugins - [ Ferramentas Blog ] | [ Ferramentas Blog ]

  28. No Chrome e no IE não funcionou. Tentei apagar o cache de ambos, não adiantou. Tentei atualizar o programa. Nada. Também fiz o teste de colocar a imagem diretamente no layout do blogger (como está no tutorial) no formato favicon, 16×16. Sem sucesso. O que devo fazer?
    OBS: Funcionou no Mozilla. E já tentei usar site de geradores de favicon, e não funcionaram no meu blog.

    Responder

  29. Sou blogueiro desde 2008, de vez em quando a gente se esquece como faz as coisas, ou não sabe. Quando uma das duas acontecem, sempre venho aqui. E como escritor, me identifico muito com a forma clara e concisa das explicações. Obrigado

    Responder

  30. Muitooo obrigadooo!!!
    Você não faz ideia de quantos dias/horas passei tentando vários tutoriais para que o favicon não só aparecesse nas abas como também aparecer no link personalizado do meu canal do youtube.

    Muito obrigado mesmo!

    Responder

  31. Olá! Eu não consigo modificar… me explica por favor?
    Tipo! eu coloco onde o código em funções do tema? porque dependendo de onde coloca vai dar kao! Me ajuda? ainda não consegui mexer… coloquei a imagem na biblioteca do worpress e nem tchum

    Responder

  32. Olá! Boa tarde. Eu tenho o wordpress e troquei o plugin All in one pelo WordPress SEO. Ele oferece mais coisa mas em compensação alterou um tanto de coisa! Por exemplo: antes, na aba do navegador, aparecia o nome do blog, um traço assim | e a descrição dele (Maquiagem, moda, beleza e muito mais!). Agora a descrição sumiu e só aparece o nome. Como faço para restaurar a descrição, sem ter que remover o novo plugin?
    Obrigada!

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.