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.

Last updated

Was this helpful?