Configuring Favicon in your store

Layout

This tutorial is only applicable to Legacy CMS Portal stores. For stores developed using Store Framework, follow the instructions in the Favicons section in the guide Configuring SEO in your Store Framework store.

Favicon is a small icon associated with a website, displayed on the browser tab next to the page title, in bookmarks, browsing histories, and other places where the website address appears, such as search results pages.

${"base64":" ","img":{"width":1916,"height":1029,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":445002,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/configuring-favicon-in-your-store_1.png"}}$

The favicon helps users quickly identify a website when multiple tabs are opened or when browsing their favorites, improving the user experience and reinforcing a brand's identity and reliability.

To configure the favicon in Legacy Portal CMS stores, follow the instructions below:

In the VTEX Admin, go to Storefront > Layout > CMS > Files Manager > images.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAKElEQVR4nGNYtHDBOxhgUFJSqqqs/f//P4gze86c1WvX/v////OnTwAJqxuLglNXEwAAAABJRU5ErkJggg==","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/configuring-favicon-in-your-store_2.png","width":879,"height":679,"type":"png"}}$
In the second column, click 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/en/tutorials/Storefront/Layout/configuring-favicon-in-your-store_3.png"}}$
Click Browse for file to add the image file in the .ico format.

The file name should follow the pattern {storeName}-favicon.ico. Replace the variable {storeName} with the store name in Account management.

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAI0lEQVR4nGO4du1KXn4BK5eQlp4Jw4cP7z09Pe2sbZYsXgwAjvgKxN5kspoAAAAASUVORK5CYII=","img":{"src":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/Storefront/Layout/configuring-favicon-in-your-store_4.png","width":1462,"height":679,"type":"png"}}$
Configure the templates with the element <link> inside <head>, as follows: <link rel="shortcut icon" href="/arquivos/**{storeName}**-favicon.ico" />. The variable {storeName} should be replaced with the store name.

You can configure the favicon using another file name, which will create a URL different from the default. However, as Checkout and OrderPlaced load the URL following this pattern, we recommend following the format above.