Add a favicon

Article
08/12/2022

This article explains how to add a favicon to your site.

A favicon is a small graphics file that is shown on a web browser tab, in the Address bar, in the browsing history, and in bookmarks or favorites, among other places. We recommend that you add a favicon to your site, because it represents and reinforces your brand, and helps distinguish your site from other sites that your customers visit.

Although you can add multiple favicons of various sizes and file types to your site, this article shows how to add a single favicon. However, the same process and location are used to add more favicons.

Upload a favicon to your site's asset collection

To upload a favicon to your site's asset collection, follow these steps.

In the left navigation pane, select Media Library.
On the command bar, select Upload > Upload Media Items.
In the File Explorer window, browse to the favicon image file that you want to upload, select it, and then select Open.
In the Upload Media Item dialog box, enter the required title and alt text.
If you want to publish the image immediately after upload, select the Publish media items after upload check box.

Note

If you don't select the Publish media items after upload check box, you must return to Media items page and manually publish the favicon later.
Select OK.
In the property pane on the right, copy the public URL of the favicon. You will use this URL later.

Create the HTML for your favicon

To create the HTML for the favicon, use the following HTML string. For the href attribute, replace Public_URL_for_your_favicon with the public URL that you copied earlier.

<link rel="shortcut icon" href="Public_URL_for_your_favicon">

Create a fragment that contains a metatag for your favicon

To create a fragment that contains a metatag for your favicon, follow these steps.

Go to Fragments, and select New.
In the New fragment dialog box, select Metatags as the module that the fragment is based on.
Enter a name for the fragment, and then select OK.
In the fragment hierarchy tree, select the Default metatags child.
In the right pane, under Meta Tags, select Add, and then enter the HTML string that you created earlier for the favicon.
Select Finish editing, and then select Publish to publish the fragment.

Add the metatag fragment to the HTML head section of your pages

To add the metatag fragment to the HTML head section of your pages, follow these steps.

Go to Templates, open the template for the pages that you want to add your favicon to, and then select Edit.
In the template hierarchy tree, select the ellipsis (...) button to the right of the HTML head container, and then select Add fragment.
In the Select fragment dialog box, select the metatag fragment that you created earlier, and then select OK.
Select Finish editing, and then select Publish to publish the template.