16/02/2008

Ícone na barra de endereço

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.
Related Posts with Thumbnails

40 comentários:

  1. Onde coloco o icone?

    Valeu pelo blog, massa!

    ResponderExcluir
  2. 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.

    confere ai o meu blog,
    http://www.tendenciavirtual.blogspot.com/

    o meu e-mail
    dionedcampos@gmail.com
    aguardo a sua resposta

    ResponderExcluir
  3. fiz um teste e agora funcionou normalmente

    talvez tenha faltado alguma letra no código ou no endereço da imagem

    ResponderExcluir
  4. ñ consigo!!!

    jah tentei de tudo e num vai T.T me ajuda.

    ResponderExcluir
  5. 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)

    não adianta somente renomear o arquivo .jpg pra .ico é preciso um programa que salve já neste formato

    ResponderExcluir
  6. sim......já consegui este programa que transforma pra .ico

    mas e agora?
    onde eu hospedo, no imageshack não funcionaaaaaa!

    ResponderExcluir
  7. onde eu edito o javascript eu ano consigo

    ResponderExcluir
  8. esse codigo esta errado o correto e mudar o final das 2 linhas e colocar assim " />


    por isso voces estao recebendo a mensagem de erro no fechamento do XML

    ResponderExcluir
  9. MartinezSSA

    quando publiquei isso estava difícil fazer o blogspot mostrar o código em vez de executar que acabou ficando invertido. Obrigado por avisar

    ResponderExcluir
  10. 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

    ResponderExcluir
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
  12. fiz isso aew ki o cara falou, colokei nas duas ultimas linhas " /> e não deu certo =/

    ResponderExcluir
  13. Este comentário foi removido pelo autor.

    ResponderExcluir
  14. No Fire Fox pega até imagem hospedada em .png, mas no Internet Explorer não, tem de ser .ico mesmo.
    Onde hospedar imagens neste formato?
    Não achei...

    ResponderExcluir
  15. o pior que ainda não consegui tirar este icone, mas vlw pela dica
    meu site é novo ainda é um projéto
    mas passa lá faz uma visitas abraços

    coletanea filmes

    ResponderExcluir
  16. AFF CARA NÃO TO CONSEGUINDO ACHAR UM SITE PRA FAZER O UOLOAD DO ICO
    :(

    ResponderExcluir
  17. naum acho um site pra fazer o upload do icoooooo

    ResponderExcluir
  18. Valeu!!!!!!!!!!!!!!!!!!!!!
    obs.O teu blog é show! ;D

    ResponderExcluir
  19. Hospeda o ICO aqui bee:
    http://www.imageboo.com

    Bjo !
    Adorei a dica ... mas fica instavel ... uma hora aparece e outra naum.

    ResponderExcluir
  20. Bom dia amigo Fabiano,

    Em 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?

    ResponderExcluir
  21. Renato HappyBlue

    muito 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

    ResponderExcluir
  22. Muito Obrigado!
    Ajudou bastante!
    se não fosse vcs, eu não teria conseguido.
    obrigado mesmo!

    ResponderExcluir
  23. porfavor analise meu blog e veja se ele esta massa ... e se poder add o link dele ai no seu

    ResponderExcluir
  24. olha meu blog ai abraços de umas dicas para eu melhoraro ele esta super massa mais falta alguma coisa

    ResponderExcluir
  25. Lander

    blog 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

    ResponderExcluir
  26. veja esse novo tutorial sobre o assunto, lá a explicação está melhor do que neste, e ainda está com sites mais atualizados.

    http://www.dicasparablogs.com.br/2009/09/como-alterar-o-favicon-no-blog.html

    ResponderExcluir
  27. o codigo funciona perfeitamente, esses nubes que reclamam são os que não sabem fazer nada.

    ResponderExcluir
  28. Fabiano, 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.

    ResponderExcluir
  29. Oi prof. Fabiano, boa tarde!

    O favicon do meu blog funcionou perfeitamente no Firefox, mas não na Internet Explorer. Por quê? Como faço isso funcionar no IE?!

    ResponderExcluir
  30. as vezes é necessário clicar para atualizar a pagina para ver a mudança

    ResponderExcluir
  31. Olá professor Fabiano!

    Boa 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!

    ResponderExcluir
  32. Gustavo Reis
    pode 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.

    ResponderExcluir
  33. 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!

    1) 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?

    ResponderExcluir
  34. tente excluir seu historico de internet no computador de casa, talvez seja esse o problema.

    aqui no meu computador consigo ver o icone, efeito neve ...

    ResponderExcluir
  35. Fiz isso e fica escrito No Thumbnail em cima do meu blog! Socorro!!! Olha só: pinguinadoresdocp.blogspot.com

    ResponderExcluir
  36. provavelmente o endereço da imagem está errada

    ResponderExcluir