Adding a Favicon to Your Site

A favicon is a small image that is located in the browser tab to the left of a webpage’s title. The image bellow shows the location of a favicon.

First, create the variations of your icon for the favicon. Typically, this is at least three images:

• 16x16px square

• 32x32px square

• 152x152px square

Once these are created, upload them to the asset manager on your site, and take note of their image URLs.

To add a favicon to your site in backstage, first go to the Site Detail Page for your site, and click Settings in the sidebar. On the Settings page, under Resources, click Add Item.

Select Type of your favicon image, enter in the URL of your image in Resource Path, and enter the Attributes of the image you've entered.

For example, for the recommended three icons enter:

Icon	Type	Attributes
16x16px	icon	{"sizes": "16x16"}
32x32px	icon	{"sizes": "32x32"}
152x152px	apple-touch-icon	{"sizes": "152x152"}

When you've added all three, you will then be able to publish you site, and see the favicon.

Note: Favicons are only visible on published sites. Draft mode sites will always display the Backstage favicon.