Menu
Feedback
Start here
Tutorials
Developer portal

Known Issues
Support Rules
Troubleshooting

Frequently Asked Questions
Announcements
Tutorials
Tutorials
Explore in-depth tutorials for operating your VTEX store.
Tutorials
Storefront
Layout
Configuring Favicon in your store
Configuring Favicon in your store

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:

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

    {"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/en/tutorials/Storefront/Layout/configuring-favicon-in-your-store_2.png"}}

  2. 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"}}

  3. 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":"  ","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/en/tutorials/Storefront/Layout/configuring-favicon-in-your-store_4.png"}}

  4. 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.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page
Still got questions?
Ask the community
Find solutions and share ideas in the VTEX community.
Join our community
Request support from VTEX
For personalized assistance, contact our experts.
Open a support ticket
GithubDeveloper portalCommunityFeedback