Como colocar favicon em seu website

Criado por Mateus Souza em 13 de outubro de 2009 às 15:39

Já postei este tutorial uma vez (aqui) mais este estava com alguns “bugs” e era restrito somente ao wordpress, então hoje decidi fazer este post sobre favicons, beneficios e como inserir favicons que funcione no IE(Internet Explorer) e em todos ou outros navegadores vai ser bem completinho:

O que é favicon?

Favicon nada mais é do que aquelas pequenas imagens que aparecem no navegador ao lado do endereço do site. Mais para maiores e melhores detalhes veja a descrição do Winkipédia:

Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7⁽⁺⁾, os favicons podem ser encontrados também nas abas e na barra de endereço.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Beneficios

Alguns beneficios que podemos conquistar com o uso de uma favicon são os listados abaixo:

É otimo para marcar seu site tornando a localização deste mais fácil e de brinde tem até um destaque a mais ;
Seu site vai ganhar uma aparência mais profissional e exclusiva que pode levar a mais links para seu site melhorando a parte do SEO (aqui já entra PR).

Preparando o terreno

Como tudo o que vamos fazer tem um requisito este não deixa de ser diferente. Para este processo precisamo de uma imagem no formato .ico com 16×16 pixels que pode ser feita usando o photoshop ou fireworks ou o seu programa de preferência. Para o processo que explicarei agora recomendo que faça a imagem em um formato grande uns 100×100 pixels deve ser o suficiente.

Com a imagem em mãos acesse este link e faça o upload de sua imagem, não precisa mudar nada, mais se quiser se aventurar fique a vontade…. Observe que logo abaixo você terá um preview de sua logo, algo parecido com isso:

Observe que há ainda algumas partes que ficaram imperfeitas…para isso temos um pouco acima deste preview um editor de favicons. Ajuste certinho sua favicon e faça o download.

Se você não quer fazer uma favicon, no mesmo site da www.favicon.cc há varias favicons grátis para download.

Agora começa a brincadeira…

Com a favicon definida vamos partir pra o upload e a programação que tambem é bem fácil. Upe sua imagem no local que deseja, recomendo que seja na pasta raiz de seu site ou se você usa o WordPress, Joomla ou Magento veremos o processo logo mais.

Como inserir uma favicon que funcione no Internet Explorer

Um do maiores problemas não só com favicon mais com tudo o que vamos fazer é bendito IE. Graças a Deus até para o IE temos uma solução…o principal problema é que o IE “não consegue entender” que uma favicon no formato png ou gif é realmente um favicon, por isso que mais acima ja fizemos o processo para deixa no formato .icon

Para o código temos que ter 2 linhas:

<link rel="shortcut icon" href="http://www.mateussouza.com/favicon.ico" />
<link rel="icon" href="http://www.mateussouza.com/favicon.ico" type="image/x-icon" />

Porque 2 linhas? elas fazem exatamente a mesma coisa mais como dizem uma é para o Internet Explorer e a outra é para o Firefox(firefox aqui se refere aos demais navegadores). Copie e cole este código antes de fechar a tag <head>(</head), altere o caminho (href) para o caminho correto de sua favicon, salve o arquivo, teste e veja funcionando.

Como inserir favicon no WordPress

Não tem segredo:

Primeiramente Salve a favicon na pasta do seu tema.ex:
../wp-content/themes/seutema/

Agora temos que editar o arquivo header.php do tema que está em uso :

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />

Este código em php pegara o caminho do template e incluira no href, produzirá algo semelhante a isto:

<link rel="shortcut icon" href="http://www.mateussouza.com/wp-content/themes/mateussouza/favicon.ico" />
<link rel="icon" href="http://www.mateussouza.com/wp-content/themes/mateussouza/favicon.ico" type="image/x-icon" />

Agora salve, e faça o upload novamente para o seu servidor se você não editou diretamente. Pronto.

Como Inserir ou alterar a favicon do Joomla

Para o Joomla o processo é bem parecido. Faça o upload na pasta de seu tema ../templates/seutema/ e cole o código a seguir no arquivo index.php:

<link rel="shortcut icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" />
<link rel="icon" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/favicon.ico" type="image/x-icon" />

Observe se já não existe um código parecido, se tiver apenas teste, se já estiver com a favicon certa nem é necessário editar o arquivo.

Obs. Alguns site falam que é necessário fazer o upload da favicon na pasta imagens também…creio que este processo seja necessário para a versão 1.0 do Joomla. Por via das dúvidas recomendo que upe sua favicon lá também.

Como Inserir ou alterar a favicon de sua loja Magento

E pra acabar mais não menos importante vamos para o processo em um loja Magento. Aqui o processo é bem mais simples apenas faça o upload para a pasta raiz de sua loja e também para a pasta de seu template. Observe os caminhos:

Se você usa o template default, sua favicon está localizada em:
/skin/frontend/default/default/favicon.ico

Se você usa um template personalizado sua favicon está localizada emt:
/skin/frontend/default/SEU_ TEMA/favicon.ico

Teste e confira se não deu nada de errado.

Considerações Finais

É possivel que já tenha uma favicon nos diretorios listados neste tutorial, se houver apenas substitua por sua nova favicon.

Pode acontecer de sua favicon não ser alterada no mesmo momento da alteração devido ao cache de seu website. Limpe-o ou espere algum tempo e teste novamente. Uns F5 também ajuda(na verdade é Ctrl+F5 ).