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.
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:
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:
Funcionando perfeitamente no Flock 2.5.6
ótimo post!
Amei isso *-* estava pensando nesse favicon esses dias, mesmo. Sempre muito bom, aqui!
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!
@Prof. Alexandre,
Receber indicações em outros sites e blogs é sempre bom.
Um tutorial simples rápido e fácil. Ja adicionei ao meu Blog sem nehum problema.
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)
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 .
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
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!
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!
Ola,
Eu uso instalação do wordpress gerado pela locaweb
Não achei essa função
Será que posso coloca-la ? ou tem outro método ?
Hoje os wordpress usam o favicon do portal principal….
[]´s
Marcos
http://www.conteudoanimal.com.br
@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.
Muito bom esse recurso…
Ele também funciona no navegador "Opera",
testei hoje. Obrigado.
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….
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ê!
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!
Funciona no safari e no firefox para mac!
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.
Excelente Post! Estava procurando isto há muito tempo para colocar no meu Blog, Muito Obrigado!
Simplesmente o melhor site de dicas da Web! Parabens! Já me ajudaram muito!
No IE não deu mesmo. Mas no Chrome deu bem tranquilo. Parabéns pelo blog. As dicas são ótimas. Continuem assim.
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!
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.
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!
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!!!
Cara, você é demais! Deu tudo certo!
Otimo !!! Obrigado fucionou é simples e rapido !!!Parabéns
Mutito bacana mesmo, torna o blog uma coisa bem mais pessoal. Obrigado mesmo Marcos, de toda a Equipe do Blog Re Jump! (Eu, rsrs)
Opa valel pela ajuda muito facil fazia tenpo que eu tava procurando um tutorial assim valel pela diga .
Nossa! valeu, super simples, faz tempo que eu queria mudar o meu…
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.
@Juuh,
Pode ser que o problema esteja justamente na forma como vc escolheu para a imagem.
Não sei se esse serviço suporta.
Ok obrigada, vou tentar fazer hospedando a imagem no Picasa.
Agora deu certo.
Muuuuito obrigada!!
Olá!
Que post bacana!
Fiz em meu blog e fiquei muito contente!
Grande abraço!
=)
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 ^^
Eu uso o WordPress instalado, muito obrigado pois funcionou perfeitamente!
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.
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….
Rodrigo,
Nunca vi esse tipo de erro. você deve ter apagado algo indevidamente. Será preciso, acho, restaurar seu backup do layout.
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.
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
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.
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.
hospedar a imagem na propria plataforma tambem dá certo
Pow cara faz um tutorial pra fazer no webnode
Muito bom! Tava procurando isso faz tempo. Valeu!
Oi Marcos, coloquei um no meu blog, passa por lá tá, o blog é sobre futebol, obrigado pela dica que tinha ja lido aqui e relembrei.
Para quem não quiser mexer no código utilize o plugin JR Favicon for WordPress.
\o/
conseguiiiii!!!
valeuuuu!!
foi o único site que eu consegui aprender!!!
obaaa!!!
No meu blog no menu das aparências, não tem o botão “editor”, poderia me ajudar?
Atualizei o tutorial para ficar mais fácil de fazer a mudança no Blogger.
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.
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.