Configurar el favicono de tu tienda

Layout

Este tutorial solo es válido para tiendas CMS Portal Legado. Para tiendas desarrolladas con Store Framework, sigue las instrucciones de la sección Faviconos de la guía Configurar SEO en la tienda Store Framework.

Un favicono es el pequeño ícono asociado a un sitio web que se muestra en la pestaña del navegador al lado del título de la página, en favoritos, en el historial de navegación y en otros lugares donde aparece la dirección del sitio web, como las páginas de resultados de búsqueda.

${"base64":" ","img":{"width":1915,"height":1026,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":452576,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/es/tutorials/Storefront/Layout/configurar-el-favicono-de-tu-tienda_1.png"}}$

El favicono ayuda a los usuarios a identificar rápidamente un sitio web cuando tienen varias pestañas abiertas o cuando consultan sus favoritos, mejorando la experiencia y reforzando la identidad y credibilidad de la marca.

Para configurar el favicono en tiendas CMS Portal Legado, sigue las instrucciones a continuación:

En el Admin VTEX, accede a 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/es/tutorials/Storefront/Layout/configurar-el-favicono-de-tu-tienda_2.png"}}$
En la segunda columna, haz clic en 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/es/tutorials/Storefront/Layout/configurar-el-favicono-de-tu-tienda_3.png"}}$
Haz clic en Browse for filepara agregar el archivo de imagen en formato .ico.

El nombre del archivo debe seguir el formato {storeName}-favicon.ico. Sustituye la variable {storeName} por el nombre de la tienda registrado en Gestión de la cuenta.
Configura los templates con el elemento <link> dentro de <head> como sigue: <link rel="shortcut icon" href="/arquivos/**{storeName}**-favicon.ico" />. Debes sustituir la variable {storeName} por el nombre de la tienda.

Puedes configurar el favicono con otro nombre de archivo. Sin embargo, eso creará una URL con formato diferente. Se recomienda mantener el formato antes mencionado, ya que Checkout y OrderPlaced lo utilizan al cargar la URL.