Configurar o favicon

Aparência da Loja

Danilo Juliani

Danilo Juliani

Última atualização

O favicon é o ícone exibido na aba do browser, ao lado do título da página. O browser carrega essa imagem a partir do elemento <link rel="shortcut icon"> que referencia uma imagem com extensão .ico.

Exemplo:

Favicon 2

Usei o Google como exemplo apenas para reforçar que esse recurso não é exclusivo da VTEX e pode ser utilizado em qualquer conteúdo reproduzido em um browser. Leia mais sobre esse assunto no Google. 🙂

Favicon na VTEX

Na VTEX, para garantir que o favicon estará carregado durante toda a navegação do cliente (portal, checkout e orderPlaced), as boas práticas indicam que os templates sejam configurados com o elemento <link> dentro do <head>, da seguinte forma:

<link rel="shortcut icon" href="/arquivos/**{storeName}**-favicon.ico">

Obs.: No portal (/admin/a/) é possível configurar o favicon em outro padrão de URLs (por exemplo, outro nome de arquivo). No entanto, como o Checkout e o OrderPlaced carregam a URL nesse padrão, o indicado é carregar também no portal da mesma forma.

Obs. 2: A variável {storeName} deve ser substituída pelo nome da loja, como cadastrado no License Manager.