---
title: Setting a site favicon
related:
  - https://docs.kentico.com/k10/configuring-kentico/managing-sites/configuring-settings-for-sites.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

Favicon is a file that contains one or more icons and is used to differentiate your website.

You can configure a custom favicon file or files for your sites in the [Settingsapplication](https://docs.kentico.com/k10/configuring-kentico/managing-sites/configuring-settings-for-sites.md). The supported file formats for favicons are _ico, png, svg,_ and _gif._

> **Note:** **Location of favicon files**
>
> To ensure correct [import and export](https://docs.kentico.com/k10/deploying-websites/exporting-and-importing-sites.md) functionality, we recommend saving favicon files in the following locations:
>
> - Site favicons: _\~//_
> - Global favicons: _\~/CMSGlobalFiles/_
>
> You need to create the folders manually. If you store site files on the file system, the __ folder is created automatically. For more details, see [Export folder structure](https://docs.kentico.com/display/K10/Export+folder+structure).

&#x20; To set custom favicon files:

1. Open the **Settings** application.
2. In the _Site_ drop-down list, select a site.
3. In the settings tree, navigate to **Settings** -> **Content**.
4. In the _Favicon_ section, _clear_ the **Inherit from global settings** check box.
5. For the **Favicon path** setting, choose one of the following options:
   - **[Single favicon](#using-a-single-favicon-file)**
   - **[Multiple favicons](#using-multiple-favicon-files)**
6. Select a location.
7. Click **Save**.

The change applies immediately on the live site. Favicon used in the administration interface is unaffected by the setting. If your browser uses a different favicon after you modified the setting and refreshed a page, try clearing the browser cache.

## Using a single favicon file

When using the _Single favicon_ option, you can select a single file by using the _Select file_ dialog. Only the supported file types are visible in the dialog.

By default, the system is set to use a single _favicon.ico_ file located in the _\~/App\_Themes/Default/Images_ folder. As a result, the following code is added to the live site HTML markup:

```xml title="Example: Inserted HTML code when using the Single favicon option"

<link href="<domain>/App_Themes/Default/Images/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<link href="<domain>/App_Themes/Default/Images/favicon.ico" type="image/x-icon" rel="icon" />

```

## Using multiple favicon files

When you choose the _Multiple favicons_ option, you need to select a folder that contains appropriately named image files. The file name of these files must match one of the following patterns:

- _favicon._
- _favicon-._

The __ part of the favicon file name refers to the the side size of the image in pixels.

For example, if you use a folder that contains _favicon.svg_, _favicon-16.png_, _favicon-32.png_, and _favicon-64.png_ files, the following code is added to the live site HTML markup:

```xml title="Example: Inserted HTML code when using the Multiple favicons option"

<link href="<domain>/path/to/favicon-16.png" type="image/png" rel="shortcut icon" sizes="16x16" />
<link href="<domain>/path/to/favicon-16.png" type="image/png" rel="icon" sizes="16x16" />
<link href="<domain>/path/to/favicon-32.png" type="image/png" rel="shortcut icon" sizes="32x32" />
<link href="<domain>/path/to/favicon-32.png" type="image/png" rel="icon" sizes="32x32" />
<link href="<domain>/path/to/favicon-48.png" type="image/png" rel="shortcut icon" sizes="48x48" />
<link href="<domain>/path/to/favicon-48.png" type="image/png" rel="icon" sizes="48x48" />
<link href="<domain>/path/to/favicon.svg" type="image/svg+xml" rel="shortcut icon" sizes="any" />
<link href="<domain>/path/to/favicon.svg" type="image/svg+xml" rel="icon" sizes="any" />

```

> **Note:** **HTML 5 doctype**
>
> The generated HTML markup for multiple favicon files contains the _sizes_ attribute for images with a specified size. The _sizes_ attribute is supported only in the HTML 5 specification. This means that, in order to maintain a valid markup, the site's master page must use the [HTML 5 doctype declaration](http://www.w3schools.com/tags/tag_doctype.asp).

## Manually specifying favicon in HTML code

If you want to use custom favicon files and manually specify their HTML markup, you need to disable the automatic HTML markup generation and modify the master page used on your site.

To disable automatic generation of HTML markup:

1. Follow steps 1 to 4 for [setting custom favicon files](#settingasitefavicon-settingcustomfaviconfiles).
2. For the **Favicon path** setting, click **Clear**.
3. Click **Save**.

The system now does not render any additional code.

Next, add the required code to the HEAD section of the master page used on your site:

- For websites using the Portal engine, see [Adjusting the HTML output of master pages](https://docs.kentico.com/k10/developing-websites/developing-websites-using-the-portal-engine/creating-portal-engine-master-pages.md#adjusting-the-html-output-of-master-pages).
- For websites using the ASPX templates, see [Preparing master pages for ASPX templates](https://docs.kentico.com/k10/developing-websites/developing-websites-using-aspx-templates/creating-master-pages-for-aspx-templates.md#preparing-master-pages-for-aspx-templates).
