> For the complete documentation index, see [llms.txt](https://docs.poweredbybackstage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.poweredbybackstage.com/guides/adding-a-favicon-to-your-site.md).
# 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.
{% hint style="warning" %}
Note: Favicons are only visible on published sites. Draft mode sites will always display the Backstage favicon.
{% endhint %}
