Adding a favicon

A favicon, also known as a browser icon or website icon, is an image that is often displayed next to a page's title in web browsers. By adding a custom favicon to your digital workplace, you make it easier for users to recognize browser tabs and bookmarks associated with their digital workplace.

Sections in this article:

Who can do this?

  • Enterprise administrators
  • Workplace administrators

Prepare your image

Make sure your image has the following properties:

  • Size: 32x32
  • File type: PNG

Upload the favicon to a folder in your digital workplace

While you don't have to host the favicon image file in your digital workplace, it is recommended to make it easier for others to access. To do this, you require at least Write access to the folder to which you are uploading.

  1. In your digital workplace, go to the folder channel or folder where you want to upload the image. A themes folder is a good location for this image.
  2. Select Add Files.
  3. Drag your image file into the designated area or choose Select files from your computer to find the file on your device.
  4. Once the file is finished uploading, select Publish All.
  5. While viewing the image preview, select Actions followed by Access.
  6. In the Settings section, change the Anonymous Users rule to View-only Access.
  7. Select Save.
  8. While viewing the image preview, right-click Download and select Copy Link (or your browser's equivalent).
  9. Paste this copied link to a safe location. You will need it when setting up the favicon links.

Add a favicon to your digital workplaces

  1. On the Userbar, select  Control Panel.
  2. Under Optimization, select Meta Tags.
  3. In the provided text box, add the following HTML: 
    <link rel="icon" type="image/png" href="{image URL}" sizes="32x32">
  4. In the link element you just added, replace {image URL} with the URL of your favicon image. For example: 
    <link rel="icon" type="image/png" href="https://customerc.igloocommunities.com/download/favicons/favicon_32x32png;v1?attachment=1" sizes="32x32">
  5. Select Save.

Additional favicons

You can specify additional favicons for larger sizes, different file types, and mobile device home screens (support varies across browsers and devices). To do this, follow the same steps as above, but in Step 3 of Add a favicon to your digital workplace section, use the appropriate link element and properties for the image you are adding. Be sure also to reference the desired image's URL.

Some other common favicon specifications include, but are not limited to:

iOS (180x180 PNG)

<link rel="apple-touch-icon" sizes="180x180" type="image/png" href="{image URL}">

Android (192x192 and 256x256 PNGs)

<link rel="icon" type="image/png" sizes="192x192" href="{image URL}">
<link rel="icon" type="image/png" sizes="256x256" href="{image URL}">