Favicon.ico - Ícone personalizado para o seu site ou blog

Domingo, 25 de Fevereiro de 2007

Favicon.ico - Ícone personalizado para o seu site ou blog

No Internet Explorer ele aparece quando você adiciona um site aos favoritos, por isso o nome de favicon. Mas em navegadores com abas como o Firefox, Opera e o IE7 você vê esse ícone do lado esquerdo do endereço do site.

Muita gente coloca seus sites no ar e nunca mexe nesse detalhe, as vezes por não saber ou simplesmente por não achar importante. Eu que navego com muitas abas abertas gosto do ícone para identificar mais facilmente cada uma delas.

O modo tradicional de personalizar esse ícone é criar um com o tamanho de 16x16 ou 32x32 pixels e salvar com o nome de favicon.ico na raiz do seu domínio (Ex: http://www.interney.net/favicon.ico). Você pode usar o Irfanview para salvar a imagem no formato ICO.

Outra alternativa é usar os serviços do FavIcon from Pics, nesta página você envia uma foto e ele a transforma em ícone, dai basta baixar e transferir par ao seu site.

Se você não puder gravar o favicon na raiz do seu site ou se quiser usar ícones diferentes para outras páginas você pode gravar o favicon em outro diretório e indicar na página onde você quer personalizar qual é o ícone a ser utilizado usando as seguintes tags no template:

Obs: Substitua http://www.interney.net/blogs/ pela url e diretório do seu site ou blog.

Essas tags devem ser colocadas entre as tags <head> e </head>

Apesar de apenas a segunda tag ser suficiente para a maioria dos browsers atuais é recomendável utilizar também a primeira para garantir compatibilidade com browsers antigos e que não acompanham os padrões adequadamente.

Pronto, agora seus visitantes já podem identificar seu site ou blog com mais facilidade.

(Os comentários abaixo exprimem a opinião dos visitantes, o autor do blog não se responsabiliza por quaisquer consequências e/ou danos que eles venham a provocar.)

Atalho pra o formulário

Comentários:

Comentário de: Douglas

Como faz para colocar o favicon no lado do feed de determinado site no Bloglines? Isso fica por conta do próprio Bloglines ou do dono do site?

Digo isso porque seria bom ter um do Interney Blogs lá, pra diferenciar.

Permalink 25.02.07 @ 18:10

Comentário de: Edney Souza

· http://www.interney.net/

Oi Douglas,

O Bloglines lê a informação do Blog/Site, pega o favicon.ico e coloca o ícone lá junto dos feeds, existem outros sites que fazem isso, é outra utilidade bacana do favico.

Quem tem de colocar o favicon é o dono do site usando as instruções que eu deixei no post acima. Pretendemos mexer no logo do InterNey Blogs, daí criaremos um favicon personalizado.

Fui dar uma olhada no Bloglines e pra alguns blogs ele não está carregando a informação do favicon.ico ou está carregando um favicon.ico antigo. Descobri que existe a opção de requisitar a autoria do blog e editar algumas configurações do feed, não sei se entre estas configurações esta o favicon, vou testar isso mais tarde porque agora o site do Feedburner está com problemas :'(

Permalink 25.02.07 @ 18:23

Comentário de: Daniel Nass · http://www.microestudio.com.br

Otimo post Edney!

Lembrando que tambem pode-se utilizar favicons no formato gif!

Sim eu sei que isso é um terror para os sobrinhos mas fazer o que faz parte da internet!

Sucesso com o novo empreendimento!

[]'s

Permalink 25.02.07 @ 21:11

Comentário de: Edney Souza

· http://www.interney.net/

Oi Daniel,

Bem lembrado, inclusive no site mencionado no post tem uma opção de animar o gif.

Particularmente eu odiaria um ícone se mexendo no meu navegador, mas como vc disse, faz parte da internet.

Obrigado pelos votos de sucesso.

Permalink 25.02.07 @ 21:15

Comentário de: renato

eu não sei onde colocar o meu arquivo .ico que criei.

Onde faço a barra do menu raiz no ftp?

Renato, dependendo do software de da sua hospedagem a forma de colocar um arquivo na raiz muda, sugiro que vc pergunte ao suporte do seus sitema de hospedagem

Permalink 24.04.07 @ 18:21

Comentário de: elson · http://cafecomdesign.wordpress.com

Eu sou leigo em programação, e ja coloquei o .ico no servidor e tenho o link em maos. Como eu faço pra colocar ele no wordpress? Onde entro?

o wordpress não deixa você mexer nisso...

Permalink 22.05.07 @ 16:40

Comentário de: carlinhos · http://www.bodegacultural.blogspot.com

Infelizmente não encontrei as tags no meu blog. Fica pra próxima,
abs

Se você achou o <head> já pode colocar abaixo dele

Permalink 24.11.07 @ 18:46

Comentário de: carlinhos · http://www.bodegacultural.blogspot.com

Consegui!!! eu estava procurando duas tags paralelas e ao abrir as dicas do blogger vi que elas são separadas mesmos e só deu certo quando inseri o código após a tag head que fica no início do blog. Valeu, Ney!!!

Abs!

Permalink 24.11.07 @ 19:06

Comentário de: Arnaldo Valvulado · http://jardimtecnicolor.blogspot.com

Lí e testei várias formas de inserir um favicon no blogspot, das milhares de formas que encontrei disponíveis na internet, somente o seu conselho deu certo... obrigado.

Permalink 04.12.07 @ 01:11

Comentário de: Rodrigo · http://www.rodrifernandes.com

Tenti fazer isso para o meu site, mas no internet explorer não funciona de jeito nenhum. Vc sabe o que eu posso fazer para arrumar isso?

Obrigado

Rodrigo Fernandes

Rodrigo, provavelmente ainda vão arrumar algo no Internet explorer, porque é uma instrução que ele deveria entender. Mas no seu caso como vc tem um domínio principal basta criar o arquivo favicon.ico no diretório raiz que deve funcionar.

Permalink 15.12.07 @ 20:13

Comentário de: NO-GaVeX · http://www.danielcosta.pt.vu

tmbm puderá ser colocado em formato .jpg !

Obrigado

Permalink 27.12.07 @ 21:17

Comentário de: Savio · http://www.interneti.com.br

Muito classe sua explicação. Agora funciona perfeitamente. Saúde and "good luck" para você.

Permalink 05.01.08 @ 11:23

Comentário de: eu

cara, nao entendi uma coisa:
como é que eu adiciono o icon no blog.
porque eu ja fiz o icone mas onde eu "ponho" ele para que ele possa aparecer ao lado do link.

Você precisa fazer upload dele em algum lugar na web, geralmente qualquer lugar que aceita imagens aceita ícones também.

Permalink 18.01.08 @ 15:45

Comentário de: danilo souza · http://xtudo10.blogspot.com/

onde fica a raiz do seu domínio pelo amor De Deus!
nao consigo colocar nda!

Danilo, como você não tem domínio próprio (seu blog está no blogspot) realmente não vai conseguir colocar nada na raiz do domínio

Permalink 27.02.08 @ 15:26

Comentário de: Weydson · http://www.teixeirasfm.v10.com.br

Cara de vc não tem dominio proprio, vc deve colocar "shortcut icon" ou seja ataçho para o icone e não "icon" que quando o icone se encontra em seu diretorio raiz, ou seja, dominio proprio.

bl?

Weydson, para quem não tem domínio próprio é só hospedar o ícone em outro lugar e colocar as instruções link rel

Permalink 09.03.08 @ 15:52

Comentário de: Weydson · http://www.teixeirasfm.v10.com.br

Pelo menos pelo que li, é isso!

Permalink 09.03.08 @ 15:53

Comentário de: Nayane · http://www.dranayanemothe.blogspot.com

Ney não consigo colocar o favicon, já fiz no site da favicon, coloquei entre as duas tags head e nada, não aparece.
Me ajuda aê.

Nay

Nay, fui olhar o seu blog e não achei o código no head...

Permalink 26.03.08 @ 02:22

Comentário de: Francisco · http://www.guiafast.com.br

Meu gostei muito da dica inclusive coloquei no meu site. Gostaria de saber porque que não funciona no Internet Explorer no Mozilla Firefox e Opera funcionou. Fico muito grato obrigado.

Aqui no meu FireFox está funcionando, talvez seja problema no seu cache. Já no IE realmente ele tem problemas com o favicon

Permalink 11.04.08 @ 20:58

Comentário de: Fellipe Prado · http://em andamento...

Opa! Tudo bem?
Só uma dúvida... no seu site funciona o FAVICON no IE... xD Por que no meu não roda? =(

No meu site o favicon.ico está na raiz do domínio...

Permalink 15.05.08 @ 18:26

Comentário de: jr · http://www.guiademudancas.com.br

Cara isso é otimo!!!
legal, vou adicionar no meu site

Permalink 30.09.08 @ 20:35

Comentário de: Clelia · http://www.astrologiahumana.com

Estou lendo vocês, e gente já tentei de tudo no IE. Dá pra ver se aparece meu favicon no firefox? Que eu saiba está no diretorio raiz. Me ajudem, vocês que conseguiram!

No chrome e no firefox aparece seu favicon sem problemas, o problema é com o IE mesmo

Permalink 01.10.08 @ 22:51

Comentário de: Fabricio · http://www.oarmario.com

Realmente, o IE tem sérios problemas com o favicon. Grato pelo post. Apenas editaria ele e colocaria que dá para salvar em gif sem precisar converter. De resto, foi uma mão na roda. Valew!

Permalink 25.10.08 @ 08:54

Comentário de: TiesTo

Preciso de uma ajuda com os favicon....
Tenhum um Blogspot....
e naum consigo postar os icone animado, ja fiz o download do favicon e tudo, fikou como animated_favicon1.gif....
Porem naum consigo por no meu blog....
Ja tentei colokar no HTML da pagina onde edita a pagina e naum da CERTO
se possivel alguem me ajuda aew...
ABS

TiesTo, você não pode customizar o favicon do blogspot

Permalink 25.10.08 @ 14:21

Comentário de: Joao

Obrigado pela ajuda, muito bem explicado. Valeu

Permalink 16.12.08 @ 17:21

Comentário de: Henrique Beckmann · http://www.conceitoecologico.blogspot.com

Já criei me favicon e o salvei em meus documentos, tentei passa-lo para o picassa e lá não aceita .ico!

To me sentindo um verdadeiro tapado...rs

Como eu faço para transferir o favicon criado, do meu pc para a web, e então seguir as dicas do Edney?

Abraços

Permalink 21.12.08 @ 05:14

Comentário de: Henrique Beckmann · http://www.conceitoecologico.blogspot.com

UFA!

De pois de hrs procurando algum lugar para hospedar o meu .ico encontrei e consegui alterar o meu favicon.

A dica para quem tem blogspot é hospedar no Yahoo!geo cities.

Abraços!

Permalink 21.12.08 @ 06:29

Comentário de: CARLOS

Consegui resolver meu problema só lendo as resposta que vc passou para os outros, vc é fera. valeu.Meu unico problema é que não consigo atualizar, refiz meu favicon, mas ele não esta atualizando no IE.
OBRIGADO.
VALEU

Permalink 07.05.09 @ 10:29

Comentário de: caio · http://www.itudoo.com.br

Assim fica mais facil!!
entra no site:

http://www.iconj.com/icon_generator.php

faz upload de qualquer imagem, ele altomaticamente a transforma em icone e lhe da o codigo pra colar no seu html
vc deve copiar a ultima opçao do site e colar antes da tag

aqui

Permalink 03.07.09 @ 16:19

Comentário de: André · http://www.vassourasurgente.com

coloquei tudo como você explicou mais não funcionou, infelizmente parece que não vai dar certo.

Permalink 22.08.09 @ 18:47

Comentário de: Robson · http://www.rm2comunicacao.blogspot.com

boa tarde !!!
o que eu gostaria e colocar uma barra de anuncio no meu blog....

Permalink 03.11.09 @ 17:32

Comentário de: Kelly · http://www.kellycalegaro.xpg.com.br

De todos os tópicos que vi relacionado, nenhum foi tão bem explicado, no entanto, não consigo fazer com que meu favicon apareça de jeito nenhum, já verifiquei o Firefox e Internet Explorer, não aparece em nenhum. Se alguém puder me ajudar...agradeço

Abraço e Parabéns pelo Blog

Kelly, se a parte do link rel="shortcut icon" não resolveu então deve ser alguma limitação do seu serviço de hospedagem mesmo

Permalink 12.11.09 @ 15:08

Comentário de: fabiana · http://www.detetivemg.com.br

ADOREI O SITE ... PARABENS

Permalink 04.02.10 @ 15:07

Comentário de: Raphael Faria · http://www.raphaelfaria.com

Enfim consegui colocar o favicon! Valeu Edney. Passei por uns 20 blogs com essa sugestão e nenhum funcionou. E acabei entendendo o erro q eu vi nos blogs. Os códigos, quando vc copia ficam com problema nas(")aspas, não validando a sintaxe entre elas e portanto não dando certo. No seu, quando copiei ficou certinho. Parabéns!

Permalink 22.04.10 @ 23:01

Comentário de: telmo · http://www.sinalplano.pt

So tenho um problema . ja fiz tudo como está explicado. criei o icone , coloquei entre as tags, mas eu tenho redireccionamento na pagina. ela está como www.sinalplano.pt mas direcciona para http://www.wix.com/sinalplano/sinalplano, e estou a instalar o link na primeira pois é a unica a que tenho acesso html. existe alguma solução? sendo assim o icone não aparece. devia de direccionar tudo ou não??

Se você redireciona tem que mexer na página destino...

Permalink 08.06.10 @ 15:39

Comentário de: Poiesis · http://livrosnosobrenaturalcontigo.blogspot.com/

Eu descobri que no blogspot se criarmos uma mensagem ou post, e colocarmos as imagens lá, depois guardamos o post como rascunho, não preciso de hospedar as imagens noutro site. Isso serve para as imagens e ícones que coloco na minha própria página de blogue.

Permalink 13.08.10 @ 22:08

Este post tem 2 comentários aguardando aprovaçăo...