Como colocar um favicon num website

Um favicon (favorites icon) é uma pequena imagem que, nos browsers modernos, se associa ao nosso website (podem ver em baixo um exemplo). Uma imagem deste tipo, além de favorecer a estética do website, dá uma imagem mais profissional do mesmo. Tudo o que é necessário é acesso ao FTP e uma imagem/símbolo que se possa associar ao website pretendido. Ainda existem imensos websites na internet que não possuem um favicon, mas esse é um erro que eu não quero que vocês, os leitores, cometam!

Antes de mais, escolham uma imagem ou um símbolo que se possa associar ao vosso website. Se em vez de uma imagem ou de um símbolo preferirem uma sigla, também é possível, mas como o favicon é algo muito pequeno, recomendo que não o façam. Após edição da imagem, guardem num formato jpeg ou gif com todos os lados iguais (por exemplo 250×250 ou 340×340). O importante é formar um quadrado.

Para passar a imagem do formato guardado para icon existem várias alternativas. Existem alternativas a nível de software, mas já muitos webmasters facilitaram o trabalho de outros webmasters ao criar um website que faz essa conversão.

Agora que já temos a imagem no formato ico (icon), já podemos proceder à colocação do código na página. Esta é a parte mais simples, sendo apenas necessária a edição das páginas em que querem colocar o favicon. O favicon tem de ser colocado entre as tags:

<head> </head>

Entre as tags especificadas anteriormente (procurem no vosso código onde elas se encontram, mas como diz respeito ao cabeçalho deve estar no topo), colocar o seguinte código:

*You can add a favicon to your web page by uploading favicon.ico to Root of your
website and inserting the following HTML tag between the <head> … </head>
tags of your web page.

<link rel=”shortcut icon” href=”favicon.ico”>

*How to use the Animated FavIcon: if you would like to display the animated favicon, upload
animated_favicon1.gif also and insert the following HTML tags.

<link rel=”shortcut icon” href=”favicon.ico” >
<link rel=”icon” href=”animated_favicon1.gif” type=”image/gif” >

 
E é só. Após a colocação deste código no código fonte da página, o icon já deve ser visível!

Comments 14

  1. Boa tarde,exelente postagen!!

  2. Até que enfim achei algo que resolve. Otima dica, excelente. Parabéns pelo artigo.

  3. levi nobre disse:

    eu já vi várias postagens assim e já tenho o código mais eu não acho as tags no meu blog.eu posso colocar em outro canto?aonde?me responda por email

  4. jacques disse:

    Muito bom o Tutorial Vlw.

  5. Pedro Teles disse:

    Lembrando que dá para fazer com arquivos .png sem ter que converter para .ico =D

    Ótimo post =D

  6. Muito bom mesmo!
    Pessoas como vcs que colaboram para nossa cibercultura

  7. Luciano disse:

    Não sei porquê aqui só aparece no IE8. Firefox 8.0 não aparece nada. MAs o ícone deste site aparece normal. Fiz exatamente como indicado, mas devo ser azarado demais…hehehe – brincadeirinha. Alguém sabe lá que diabo acontece para eu incluir este código no head certinho, o de voc~es cunfar e o meu não? rsrs

  8. Dica disse:

    Um modo muito simples que utilizo é renomear a imagem em favicon.ico e jogar na pasta principal do site pelo ftp sempre funciona.

  9. Fredcar disse:

    Valeu pelo artigo” Hey “Dica” obrigado pelo comentário, melhor, pela dica rs.
    Deu certinho.

  10. Rennan disse:

    Muito Obrigado, esta perfeito!

  11. Eu disse:

    Não funciona

  12. Rick disse:

    valeu deu certo so o codigo que coloquei foi esse

    rel=”shortcut icon” href=”favicon.ico” />

  13. neto disse:

    Bom dia,

    eu coloquei o favicon mas fica aparecendo um F em vermelho ao inves do meu href escolhido? o que fiz de errado?

  14. Pessoal que esta tendo problemas em inserir o icon:

    1) fiquem atento as ” (aspas-duplas) do código quando você copia daqui ele vai com outra codificação para o editor de texto ou IDE de desenvolvimento, re-escreva-os…

    2) Dica: coloquem o favicon na raiz do seu site (aonde a sua index.html/index.php fica) e informe o caminho relativo (href=”favicon.ico”), pois com isso, caso você venha a alterar o dominio do site futuramente você não terá problemas…

    3) coloque somente esse código no cabeçalho (head) do site:

    Pois o outro (rel=”icon”) já esta sendo informado nessa tag (rel=”shortcut icon”), não há necessidade de informa-lo duas vezes… é o ‘type’ ajuda a navegadores mais antigos reconhece que isso e um arquivo do tipo ICO…

    4) Essa tag NÃO PODE ser inserida em outro local a não ser o cabeçalho do site (… ) pois os navegadores lêem esse cabeçalho como TODAS as informações do site, após o cabeçalho eles ingnoram qualquer tag que deveria esta lá…

    5) Dica: caso você não encontre na web um icone agradável, monte seu próprio icone através do seu logo original, com o Fireworks (ou qualquer outro editor de imagens, para web eu uso ele…), abrar um arquivo novo especificando seu tamanho de 16px por 16px, posicione sua imagem e salve em .png, depois de salvo vá até o arquivo e altere a extensão de favicon.png para favicon.ico e pronto, seu icon foi criado, eu sempre monto para meus clientes com o proprio logo, com fundo alpha e as cores originais…

    Com essas dicas, você dificilmente encontrar problemas ao colocar o icon no site… Ainda tem dúvidas??? skype chinnon.santos god luck!

Comments are closed.