Configurar o favicon em sua loja

2 min de leitura

Tutorial válido apenas para lojas CMS Portal Legado. Para lojas desenvolvidas com Store Framework, siga as instruções da seção Favicons no guia Configurando SEO em sua loja Store Framework.

Favicon é um pequeno ícone associado a um site. Ele é exibido na aba do navegador ao lado do título da página, nos favoritos, nos históricos de navegação e em outros locais onde o endereço do site aparece, como as páginas de resultados de busca.

O favicon ajuda os usuários a identificar rapidamente um site quando tem várias abas abertas ou quando estão consultando os favoritos, melhorando a experiência do usuário e reforçar a identidade e a credibilidade de uma marca.

${"base64":" ","img":{"width":1917,"height":1024,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":451426,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/configurar-o-favicon-em-sua-loja_1.png"}}$

Para configurar o favicon em lojas CMS Portal Legado, siga as instruções abaixo:

No Admin VTEX, acesse Storefront > Layout > CMS > Files Manager > imagens.

${"base64":" ","img":{"width":879,"height":679,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":37316,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/configurar-o-favicon-em-sua-loja_2.png"}}$
Na segunda coluna, clique em Add.

${"base64":" ","img":{"width":1477,"height":661,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":105088,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/configurar-o-favicon-em-sua-loja_3.png"}}$
Clique em Browse for file para adicionar o arquivo de imagem no formato .ico.

O nome do arquivo deve seguir o padrão {storeName}-favicon.ico. Substitua a variável {storeName} pelo nome da loja cadastrado no Gerenciamento da conta.

${"base64":" ","img":{"width":1462,"height":679,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":105277,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/configurar-o-favicon-em-sua-loja_4.png"}}$
Configure os templates com o elemento <link> dentro do <head>, da seguinte forma: <link rel="shortcut icon" href="/arquivos/**{storeName}**-favicon.ico" />. A variável {storeName} deve ser substituída pelo nome da loja.

É possível configurar o favicon com outro nome de arquivo, o que criará uma URL diferente do padrão. No entanto, como o Checkout e o OrderPlaced carregam a URL nesse padrão, é indicado seguir a forma mencionada.