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
{ 21 comments… read them below or add one }
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…).
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!
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!!
Fabio,
Obrigado pela visita e pela dica.
Vou averiguar isso.
Abraço!
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.
Celso
Muito obrigado, ajudou muito.
Leandro
Você também ajudou, se não fosse esse site ficaria boiando….
Abraços
quero aprender a colocar questionário no meu site , e tbm uma página onde visitante podem conversa
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!
ola celso gostaria de saber se é possivel colocar um favicon no webnode?
Rodolfho,
No webnode não dá porque não é possível editar o código do cabeçalho.
Abraço!
Mais uma duvida celso, o servidor do 000webhost aceita o formato .ico ??
Estou a tentar e ainda n apareceu
Esqueça celso.
Ja consegui.
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!
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!
Blz! vou tentado mas aguardo aciosamente este video aula
Abraço brother.
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.
Paulo,
Eu não tenho nenhum artigo ou vídeo que mostra isso. Vou pensar em fazer um.
Abraço!
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?
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!
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?
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!