Personalize seu site com um Favicon.ico

by Celso Lemes on 11/07/2008

in Webmaster

Reforce a marca de seu site com o Favicon.ico

O que é o Favicon.ico
Favicon.con é um pequeno ícone que serve para representar um site na barra de endereços, nos favoritos e abas dos navegadores.
Trata-se de uma imagem com a extensão .ico que deve ter o tamanho máximo de 16×16 px.

Confira o atual icone do Criar Sites

Acima você pode conferir os locais onde o Favicon.ico pode aparecer no Firefox 3.

Pra que usar o favicon.ico
Destaque nos Favoritos – O favicon serve para dar mais destaque a um site que tenha sido adicionado aos favoritos dos navegadores, já que o ícone é adicionado antes do nome do site.

Destaque nas abas dos navegadores – Em navegadores que permitem navegar por abas, o favicon.ico é adicionado a aba antes do nome do site.

Reforço da marca – Ao ver várias vezes o ícone de seu site, sua marca é reforçada na mente do visitante.

Como criar seu favicon.ico
O atual ícone que está sendo utilizado aqui no Criar Sites eu fiz com a ajuda do site Dinamyc Drive. É necessário que você tenha previamente criado uma imagem quadrada com até 150.00 kB para que o favicon maker possa trabalhar com a imagem.

Também existem outras opções que permitem criar seu favicon como o Favicon from Pics ou o Favicon.cc que permite que você desenhe seu favicon.

Você também pode criar o seu utilizando um editor de imagens que permita trabalhar com arquivos .ico

Como inserir o favicon.ico em seu site
Se você tiver acesso FTP do seu servidor, basta que você envie para o servidor seu favicon.ico a pasta raiz de seu site. O próprio navegador se encarrega de encontrar o favicon.

Para quem não tenha acesso ao servidor como os usuários do Blogger, poderá hospedar o favicon em um serviço de armazenamento de imagens e incluir o favicon utilizando o código abaixo.

Insira entre as tags <head>e </head> das páginas de seu site o seguinte código
<link rel=”shortcut icon” href=”http://www.criarsites.com/favicon.ico”>

Deverá ficar algo assim:
<head>
<link rel=”shortcut icon” href=”http://www.criarsites.com/favicon.ico”>
</head>

Troque o atual endereço para o endereço onde o arquivo favicon.ico esteja armazenado.

Obs: Mesmo que você tenha inserido o ícone diretamente no seu servidor, é aconselhável que inclua a linha acima para ter certeza que o navegador encontre o seu favicon.ico

Nota
O favicon não é suportado por todos os navegadores e suas versões. No meu site eu testei no Firefox 3, no Internet Explorer7 e Ópera. Em todos funcionaram perfeitamente.

Se após incluir o Favicon em seu site, ele não aparecer no navegador, experimente limpar os arquivos temporários e reiniciar o navegador.

Artigos relacionados
Crie banners online facilmente
Gifs animados – 20 sites grátis
Animador de imagens – Gif Animator

Related Posts with Thumbnails

Mais Artigos que você pode estar interessado


Cursos 24 Horas

{ 21 comments… read them below or add one }

1 Marco Moura 12/07/2008 às 6:39 pm

Parabéns pelo artigo! É interessante como você trata de assuntos bastante específicos. Particularmente, me identifico com sua maneira de analisar, principalmente no que diz respeito à recursos de WordPress e relacionados.

Contudo, você esqueceu de citar uma outra coisa importante: nem todos os provedores de hospedagem suportam arquivos com a extensão .ico.

É importante verificar esta questão antes de passar um tempão criando o arquivo. Afinal, perda de tempo pode ser frustrante e desgostosa (não que isso tenha contecido comigo…rsrs…).

Responder

2 Celso Lemes 15/07/2008 às 3:50 am

Marcos,
Não tinha pensado nesse pequeno detalhe, vou procurar algum serviço de hospedagem de imagens que aceite arquivos .ico

Obrigado pela dica. Abraço!

Responder

3 Fabio FM 20/10/2008 às 6:22 pm

Hj eu estava pesquisando como colocar o tal do favicon no site e encontrei este como primeiro na pesquisa(parabens ^^) e queria complementar que para aparecer corretamente eu tive que adicionar mais coisas no codigo, ficou assim:

Onde eu inclui o ” type=”image/x-icon” ” só assim apareceu no meu site!!
Esta de parabens pelo site, estou comecando com sites e to achando muita coisa aqui, precisando é só falar, terei prazer em ajudar!!

Abraços!!

Responder

4 Celso Lemes 21/10/2008 às 12:02 am

Fabio,
Obrigado pela visita e pela dica.
Vou averiguar isso.

Abraço!

Responder

5 Leandro Alves Pimenta 18/12/2008 às 1:49 pm

Caro Celso, como visitante antigo do seus sites, tenho a obrigação de te mostrar o caminho, http://www.iconj.com/icon_generator.php aí você cria ou carrega o seu ícone já pronto, hospeda o seu ícone e ainda pega o código html prontinho pra usar. É mole ou quer mais…
Detalhe, no internet explorer só aparece o ícone se você fizer uma limpeza no cache. Pra deixar ainda mais fácil, deixo este caminho também completo: Dentro do Internet Explorer vá em ferramentas/opções da internet/ excluir/ excluir tudo/sim.
Confiram o resultado do meu ícone:
http://megaciencias.blogspot.com/
Espero ter ajudado.

Responder

6 Victor - Tobimax 30/12/2008 às 1:43 pm

Celso
Muito obrigado, ajudou muito.

Leandro
Você também ajudou, se não fosse esse site ficaria boiando…. :grin:

Abraços

Responder

7 samuel 29/01/2009 às 10:49 am

quero aprender a colocar questionário no meu site , e tbm uma página onde visitante podem conversa

Responder

8 Celso Lemes 30/01/2009 às 8:37 pm

Samuel
Você pode utilizar uma enquete http://www.criarsites.com/enquete-coloque-uma-enquete-no-seu-site/
E uma chat para seus visitantes conversarem http://www.criarsites.com/tag/chat/

Abraço!

Responder

9 rodolfho 04/02/2009 às 6:51 pm

ola celso gostaria de saber se é possivel colocar um favicon no webnode?

Responder

10 Celso Lemes 05/02/2009 às 1:29 pm

Rodolfho,
No webnode não dá porque não é possível editar o código do cabeçalho.

Abraço!

Responder

11 Oscar 16/09/2009 às 4:18 pm

Mais uma duvida celso, o servidor do 000webhost aceita o formato .ico ??

Estou a tentar e ainda n apareceu

Responder

12 Oscar 16/09/2009 às 6:09 pm

Esqueça celso.

Ja consegui.

Responder

13 Paulo Marques 20/11/2009 às 3:42 pm

Celso show de bola em seu site, gostei muito e vou prescisar muito mais rsrsr. valeu mesmo se tivor como me enviar passo a passo de de como inserir este fivecon te agradeço mesmo e porque estou começando mas desde ja agradeço se tiver alguma coisa que estiver no meu alcance que podemos fazer para te ajudar e so tc ok.

abraço!

Responder

14 Celso Lemes 21/11/2009 às 7:07 am

Paulo,
Na verdade o processo de inserção do favicon no site é bem fácil. Para eu deixar mais fácil do que isso, só se eu criar uma vídeo aula.
Vou ver se eu consigo fazer algo e publico aqui no site.

Abraço!

Responder

15 Paulo Marques 21/11/2009 às 9:10 pm

Blz! vou tentado mas aguardo aciosamente este video aula

Abraço brother.

Responder

16 Paulo Marques 08/12/2009 às 6:59 pm

Celso lemes

Boa noite

sera que voce tem passo a passo ou uma video aula de como inserir fivecon no end de um site nosso como eu preciso estou apanhado e muito rsrs te agradeço mesmo e porque estou desde ja agradeço se tiver alguma coisa que estiver no meu alcance que podemos fazer para te ajudar em parceria e so nos enviar um email ok..

abraço.

Responder

17 Celso Lemes 09/12/2009 às 9:22 am

Paulo,
Eu não tenho nenhum artigo ou vídeo que mostra isso. Vou pensar em fazer um.

Abraço!

Responder

18 Guilherme Amorim 26/01/2010 às 1:35 am

Celso,

Primeiramente gostaria de parabenizar seu site e sua disposição e hospitalidade em nos ajudar. Agora uma pergunta: Isso funciona num Blog do Blogger?

Responder

19 Celso Lemes 26/01/2010 às 10:58 am

Guilherme,
Funciona sim, no entanto o processo é um pouco diferente.
Vou preparar um artigo falando sobre o assunto para publicar nos próximos dias.

Abraço!

Responder

20 Anderson 05/02/2010 às 3:00 pm

Celso,
em que pasta eu devo colocar o favicon(eu uso o wordpress), na pasta wp-admin, includes ou content? E em que pasta de wp-admin, includes e content?

Responder

21 Celso Lemes 05/02/2010 às 4:17 pm

Anderson,
Nenhuma dessas aí. Você deve adicionar na pasta raiz, que é a mesma em que se encontra todo o blog. Dependendo do servidor que você está utilizando, o nome desta pasta pode ser public_html, www, httpdocs e etc.

Abraço!

Responder

Deixe um comentário

Atenção antes de Deixar um Comentário!
- Se o seu comentário for relacionado ao post, tenha certeza de que o leu.
- Todo comentário obsceno, ilegal, ofensivo, anônimo, escrito todo em maiúscula, contendo gírias em excesso ou estritamente publicitários, serão "apagados".
- Somente inclua links no comentário se ajudar a explicar o seu comentário.
- Se precisa de ajuda, procure deixar o máximo de informação possível.
- Não peça para adicionar ao MSN.
- Spam não será tolerado.


Este site lhe foi útil? Então ajude na divulgação clicando aqui.

Previous post:

Next post: