Para alterar o ícone na barra de endereços use esse código:
<link rel="icon" href="icone.ico" type="image/x-icon"/ >
<link rel="shortcut icon" href="icone.ico" type="image/x-icon"/ >
Onde está icone.ico, você deve colocar a url da imagem que deseja que apareça, mas tem que ser uma imagem com o tamanho 16x16 pixels. Imagens maiores também funcionam mas serão encolhidas para esse tamanho portanto se usar outro tamanho faça uma imagem quadrada(30x30, 100x100...).
Quanto ao formato da imagem deve ser .ico, tem programas que fazem esse tipo de imagem, as versões mais novas dos navegadores(Firefox 2, Internet Explorer 7, Opera 9.2) já aceitam o formato .jpg ou .gif.
Coloque o código antes da tag </head>e pronto. Além de aparecer a imagem na barra de endereço quando alguém adicionar seu site aos favoritos essa imagem também aparecerá no menu favoritos. No site Dynamic Drive você encontrará um gerador de icone(.ico) é só enviar uma imagem e o site converte para o formato .ico e então use o código acima.
Add aos favoritos jáaa.
ResponderExcluir=)
Onde coloco o icone?
ResponderExcluirValeu pelo blog, massa!
pocha cara muito legal essa dica, mais quando eu colocar ele no meu html, o do blogger some, como que funciona essa parada, vc pode esplicar melhor.
ResponderExcluirconfere ai o meu blog,
http://www.tendenciavirtual.blogspot.com/
o meu e-mail
dionedcampos@gmail.com
aguardo a sua resposta
fiz um teste e agora funcionou normalmente
ResponderExcluirtalvez tenha faltado alguma letra no código ou no endereço da imagem
ñ consigo!!!
ResponderExcluirjah tentei de tudo e num vai T.T me ajuda.
salve a imagem no formato .jpg ou .gif, pois no formato .ico é preciso um programa certo para fazer isso e também é dificil achar um lugar para hospedar esse arquivo(.ico)
ResponderExcluirnão adianta somente renomear o arquivo .jpg pra .ico é preciso um programa que salve já neste formato
sim......já consegui este programa que transforma pra .ico
ResponderExcluirmas e agora?
onde eu hospedo, no imageshack não funcionaaaaaa!
onde eu edito o javascript eu ano consigo
ResponderExcluiresse codigo esta errado o correto e mudar o final das 2 linhas e colocar assim " />
ResponderExcluirpor isso voces estao recebendo a mensagem de erro no fechamento do XML
MartinezSSA
ResponderExcluirquando publiquei isso estava difícil fazer o blogspot mostrar o código em vez de executar que acabou ficando invertido. Obrigado por avisar
de nada fabiano esse codigo seu foi de grande utilidade, eu to tentando outro aq pra ve se aparece no IE tambem se der certo eu posto aqui
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirfiz isso aew ki o cara falou, colokei nas duas ultimas linhas " /> e não deu certo =/
ResponderExcluirEste comentário foi removido pelo autor.
ResponderExcluirNo Fire Fox pega até imagem hospedada em .png, mas no Internet Explorer não, tem de ser .ico mesmo.
ResponderExcluirOnde hospedar imagens neste formato?
Não achei...
Muito boa dica!!
ResponderExcluiro pior que ainda não consegui tirar este icone, mas vlw pela dica
ResponderExcluirmeu site é novo ainda é um projéto
mas passa lá faz uma visitas abraços
coletanea filmes
AFF CARA NÃO TO CONSEGUINDO ACHAR UM SITE PRA FAZER O UOLOAD DO ICO
ResponderExcluir:(
naum acho um site pra fazer o upload do icoooooo
ResponderExcluirValeu!!!!!!!!!!!!!!!!!!!!!
ResponderExcluirobs.O teu blog é show! ;D
Hospeda o ICO aqui bee:
ResponderExcluirhttp://www.imageboo.com
Bjo !
Adorei a dica ... mas fica instavel ... uma hora aparece e outra naum.
valeu o/
ResponderExcluirBom dia amigo Fabiano,
ResponderExcluirEm primeiro lugar...
Parabéns pelo blog amigo! Cheguei até aqui através do blogblogs.
Finalmente consegui personalizar a barra de endereço do meu blog!
Nunca estive em uma aula de informática, mas vou tentar deixar aqui o caminho que utilizei para colocar o meu icone, ok?
1. Precisa ter a imagem no tamanho 16x16 em seu HD. Esta imagem deve ter o formato gif, jpg, png, ou bmp. (No meu caso, o meu icone estava no formato .jpg)
2. Agora siga o link aqui de seu post que nos direciona para o site Dynamic Drive (http://tools.dynamicdrive.com/favicon/).
3. Ainda no site Dynamic Drive, para transformar a imagem em um arquivo .ico, siga os passos abaixo:
3.1. No campo "Image to create icon from:" clique em "Procurar..."
3.2. Encontre a imagem de seu icone em seu HD, selecione e em seguida clique em abrir.
3.3. Agora clique no botão abaixo "Create Icon".
3.4. Perceba que no campo mais abaixo, "FavIcon (16x16) preview:" irá aparecer uma prévia com o seu icone no exemplo "Address".
3.5. Agora clique no botão "Download FavIcon" e salve a imagem em seu HD. (Já tem o seu icone no formato .ico)
4. Hospede esta imagem em seu novo formato (.ico), no site http://www.imageboo.com/ (indicado pelo amigo Weslei, aqui no campo comentário). É preciso ser registrado neste site, para fazer o upload da imagem ".ico". Faça o login e em seguida o upload. Guarde o código gerado da imagem que consta no campo "Direct".
5. Agora vá até o Layout de seu blog em "Editar HTML". Antes de qualquer procedimento de alteração no modelo de seu blog, faça um download clicando em "Baixar modelo completo" e guarde em seu HD por questões de segurança. (No meu caso, o meu blog foi criado no "blogspot". Não sei se esses procedimentos funcionam em outras plataformas). Siga os seguintes passos:
5.1. Clique em "Expandir modelos de widgets"
5.2. Procure a tag "head". Não procure "/head".
5.3. Agora vai precisar do código da imagem (que guardou) gerado no site http://www.imageboo.com/. A do campo "Direct".
5.4. Abaixo da tag "head" cole o seguinte código:
link href='COLE AQUI O REFERIDO CÓDIGO' rel='shortcut icon'/
Obs1. Coloque no início deste código o sinal < e no final o sinal > (Não use espaços, nem antes, nem depois e nem mesmos entre os sinais, letras e/ou caracteres).
Obs2. O 'REFERIDO CÓDIGO' é o código da imagem (no formato ".ico") de seu icone que guardou. Gerado no site http://www.imageboo.com/ no campo "Direct".
5.5. Clique em "Visualizar" e veja se está tudo ok... Se o seu icone aparece na barra de endereço na visualização da página de seu blog. Estando tudo correto... Clique em "Salvar Modelo" e Pronto! O Link do seu blog irá aparecer na barra de endereço com o icone personalizado.
\o/ Fim!
Amigo Fabiano, por favor, não me entenda mal. Gosto de ajudar e percebi que a maioria dos amigos que comentaram o seu artigo por algum motivo não conseguiram. Tudo que tenho no Quiosque Azul, meu blog, criei, fiz e consegui através de tutoriais da internet e muitas vezes pela lógica e/ou matemática, por mais incrível que pareça... rsrs
Qualquer dúvida, sua ou de qualquer leitor seu, porfavor deixe um comentário no "Post Mensagem" de meu blog http://quiosqueazul.blogspot.com/2008/07/post-mensagem.html ou clique direto no link em seguida para abrir o formulário de comentário do referido post https://www.blogger.com/comment.g?blogID=6574227066563725589&postID=824284041484302384&page=1&isPopup=true#form
Muito Obrigado Amigo e a todos!
Torço para que este meu comentário seja colaborativo para o sucesso de todos! Luz!
Forte abraço,
Renato HappyBlue
http://quiosqueazul.blogspot.com/
NOTA: Sou apenas um "aprendiz" desta arte de bloggar. Não me responsabilizo por qualquer dano no modelo de seu blog. Reforço aqui a atenção... Antes de qualquer procedimento faça um upload de modelo de seu blog que está no ar antes de editar e ainda assim antes de salvar as alterações clique em "Visualizar" para ver se está tudo, ok?
Renato HappyBlue
ResponderExcluirmuito boa a sua explicação
é bom mostrar mais de um jeito de fazer porque o blogspot as vezes não aceita o código ou funciona apenas em um navegador
Muito Obrigado!
ResponderExcluirAjudou bastante!
se não fosse vcs, eu não teria conseguido.
obrigado mesmo!
porfavor analise meu blog e veja se ele esta massa ... e se poder add o link dele ai no seu
ResponderExcluirolha meu blog ai abraços de umas dicas para eu melhoraro ele esta super massa mais falta alguma coisa
ResponderExcluirLander
ResponderExcluirblog nunca fica pronto, não se preocupe com essa sensação que falta algo rsrs
já tenho blogs faz mais de 5 anos e sempre estou pensando em alguma coisa que falta fazer neles.
minha sugestão é visitar outros blogs e coisas que achar interessante tente fazer no seu, mas cuidado para não copiar conteudo isso é lamentável
Onde eu coloco o código?
ResponderExcluirveja esse novo tutorial sobre o assunto, lá a explicação está melhor do que neste, e ainda está com sites mais atualizados.
ResponderExcluirhttp://www.dicasparablogs.com.br/2009/09/como-alterar-o-favicon-no-blog.html
o codigo funciona perfeitamente, esses nubes que reclamam são os que não sabem fazer nada.
ResponderExcluirFabiano, quero te alertar: corte o site ImageBoo que Renato HappyBlue nos citou, pois esse site tem imagens pornográficas abaixo. Senão, o pessoal vai pensar que você é devasso e safado.
ResponderExcluirOi prof. Fabiano, boa tarde!
ResponderExcluirO favicon do meu blog funcionou perfeitamente no Firefox, mas não na Internet Explorer. Por quê? Como faço isso funcionar no IE?!
as vezes é necessário clicar para atualizar a pagina para ver a mudança
ResponderExcluirOlá professor Fabiano!
ResponderExcluirBoa noite!
Na lan, o favicon, o efeito neve e a imagem no cursor de imagem funcionaram perfeitamente em ambos os navegadores — FF e IE.
Mas na casa, eu vi que o favicon, o efeito neve e a imagem do cursor do mouse não funcionavam na IE. A favicon foi substituída pela favicon da IE e o efeito neve e a imagem do cursor do mouse se converteram em um quadro de "X" vermelho. O que aconteceu?
Eu acho que talvez, porque eu não sou administrador, parece que as imagens foram bloqueadas. Será isso mesmo?
Obrigado pela atenção, compreensão e ajuda!
Gustavo Reis
ResponderExcluirpode ser uma falha na hora de carregar as imagens, ou então alguma delas pode ter sido excluida, as vezes sites de hospedagem gratis fazem isso.
Fabiano, eu resolvi ir à lan house para ver se as imagens do favicon, do efeito neve e do cursor do mouse funcionavam. Agora estou na lan, vi que as imagens funcionam normal e perfeitamente na lan e não em casa! Por que não funcionam em casa? Não entendi!
ResponderExcluir1) As imagens foram bloqueadas pela Proteção para a Família? Acho que Windows e K9 acusam os sites que hospedaram as imagens, de ser vírus e de spam, por isso, bloquearam o funcionamento.
2) Se não for isso, quais os recursos devo instalar para que as imagens funcionem?
3) Eu ainda tenho um problema. Meu blog funciona perfeitamente na lan, e não em casa, como nos casos das imagens do favicon, do cursor do mouse e do efeito neve, outra página não funcionou na lan nem em casa! Eu acrescentei mais uma página no meu blog. Cliquei na página e o Blogger que a página que eu estava procurando não foi encontrada. O que aconteceu?
tente excluir seu historico de internet no computador de casa, talvez seja esse o problema.
ResponderExcluiraqui no meu computador consigo ver o icone, efeito neve ...
Fiz isso e fica escrito No Thumbnail em cima do meu blog! Socorro!!! Olha só: pinguinadoresdocp.blogspot.com
ResponderExcluirprovavelmente o endereço da imagem está errada
ResponderExcluir