Hoje decidi fazer este post sobre favicons, mostrar seus benefícios 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. 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.

Benefícios

Alguns benefícios 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.

Bom pessoal hoje o post num é lá aquela programação toda, é mais pra mim dar inicio aos posts falando sobre o Magento. Vamos lá.

Alterando ou Adicionando o logo em Sua Loja Magento

Para isto podemos usar 3 formatos de imagens, que são os mais usados, JPEG, GIF e PNG, recomendo o PNG mais fica a sua escolha.

Usando GIF
Se usarmos o gif o processo é mais simples, basta fazer o upload e subistituir a imagem que esta localizada em skin/frontend/default/default/images/logo.gif usando o FTP.

Usando PNG e JPG
O primeiro passo é upar a imagem em skin/frontend/default/default/images/. Logo após acessamos o admin do magento http://www.oenderecodasualoja.com.br/admin e seguimos este caminho: Sistema » Configurações, selecione o link de menu Design (está a esquerda da página) e vá mais abaixo na parte Header do acorddion como na figura abaixo:

Clique na imagem para ver em tamanho original

Para o segundo passo, devemos colocar o nome da imagem que upamos no campo Logo Image Src; recomendo que renomeie com o nome de sua loja para os motores de busca, é mais questão de SEO.

Considerações Finais
Este pequeno tutorial foi desenvolvido tendo em mente o template padrão do Magento, por isso a localização skin/frontend/default/default/images/, se você usa o template blue que também já vem no magento o caminho é o mesmo: skin/frontend/default/blue/images/. Uma maneira de saber o caminho da logo é clicar com o botão auxiliar na foto e escolher a opção exibir imagem ou exibir imagem de fundo.

Até a próxima.