Como Alterar Ícone da Loja no Navegador

Quando você abre uma janela no seu navegador, próximo à url do site, você visualiza um ícone. Esse ícone representa e identifica seu site. Mas ao instalar o Magento, o ícone exibido é o da empresa Magento Inc.

Tecnicamente, essa alteração não vai trazer vantagens para sua loja. Mas ajuda na ergonomia do site, pois é dando atenção a estes pequenos detalhes que você se torna mais profissional e ganha a confiança do usuário.

Favicon

fav-icon. Significa ícone de favoritos. Pois de início eram exibidos apenas quando você armazenava o endereço do site aos seus favoritos. Mas com a evolução dos navegadores, logo foram ganhando espaço e sendo exibidos ao lado da url, e depois nas abas do navegador.

Separação silábica: fa-vi-con

Favicon no Navegador

Veja que todas as grandes empresas utilizam um ícone personalizado, que represente o site. A maioria dos sites prefere utilizar a própria logo em miniatura.

Criando o ícone

Para o criar o ícone não existe muito mistério. Basta solicitar ao webdesigner a criação de uma imagem 16×16 com extensão de formato .ico.

Se você não tem um webdesigner na sua equipe, pode acessar o site www.favicon.cc, fazer upload da sua logo, e gerar automaticamente o ícone.

Favicon Preview

Ainda é possível visualizar no próprio site como o favicon ficará visível no navegador, antes de você fazer o download.

Também existe a opção de usar o Logaster, um site especializado na criação de favicons, ícones, e logos.

Alterando o favicon da loja

Nas versões mais antigas do Magento, anteriores a 1.4.2.0 você não vai encontrar essa opção disponível no backend do sistema. Então se você estiver utilizando a versão 1.4.2.0 ou superior, navegue em:

Sistema > Configuração > GERAL > Visual [Cabeçalho HTML]

Logo na primeira opção você encontra “Ícone Favicon“, e a opção para selecionar e enviar sua imagem.

Alterar Favicon no Backend

Lembrando que você pode enviar um ícone para cada loja instalada, basta selecionar a visão de loja no menu a esquerda antes de efetuar as alterações.

Alteração Hard-code

Como eu acabei de mencionar, nas versões mais antigas do Magento não era possível fazer essa alteração pelo sistema. Sobrando apenas a opção hard-code (na unha), ou seja, é uma opção que continua funcionando se você é oldschool.

Basta sobrepor a imagem favicon.ico que fica no diretório skin seu template/tema. Por exemplo:

skin > frontend > default > default

Depois que você alterar a imagem, é preciso atualizar o cache do Magento, e também o cache do seu navegador.

E para quem esta desenvolvendo temas Magento, não se esqueçam de incluir um favicon.ico personalizado dentro da pasta template/tema que estão criando.

Outro favicon

Talvez você já tenha observado, mas o favicon que aparece no frontend do Magento é diferente do favicon que aparece no backend.

Ou seja, quando você fizer a alteração pelo sistema, ou nos arquivos de template, a imagem do favicon no backend vai continuar sendo aquela padrão da Magento Inc.

Favicon do Backend

Se você deseja alterar essa imagem, basta sobrepor o arquivo favicon.ico que fica no diretório da sua instalação Magento, no primeiro diretório.

Sucesso!

O Autor

Mario SAM

Desenvolvedor Magento com certificação M1 Developer e M1 FrontEnd Developer. Graduado em Web Design e Programação, pós-graduado em Gestão de Projetos e TI. Não sou matemático mas estou aqui para somar.