Setting a site favicon

✖
Copy to clipboard

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. The supported file formats for favicons are ico, png, svg, and gif.

Location of favicon files

To ensure correct import and export functionality, we recommend saving favicon files in the following locations:

  • Site favicons: ~/<SiteCodeName>/
  • Global favicons: ~/CMSGlobalFiles/

You need to create the folders manually. If you store site files on the file system, the <SiteCodeName> folder is created automatically. For more details, see Export folder structure.

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:
  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:

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.<extension>
  • favicon-<size>.<extension>

The <size> 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:

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" />

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.

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.
  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: