Overview

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.

How to add a favicon

These instructions walk you through how to add a favicon to your digital workplace that should work in most modern browsers. 

Preparing your image

Make sure your image has the following properties:

• Size: 32x32
• File type: PNG

Uploading 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 level access to the folder you are uploading to.

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, select Select files from your computer to find the file on your device.
4. Once the file upload reaches 100%, select Publish All.
5. While viewing the preview of the image, select Actions followed by Access.
6. On the image's Access page, under Settings, change the Anonymous Users rule to View-only Access.
7. Select Save.
8. While viewing the preview of the image, 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.

Adding a favicon to your digital workplaces

You must be a workplace administrator to access the locations required to complete this task.

1. 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 that you just added, replace {image URL} with the URL of your favicon image. For example:

   <link rel="icon" type="image/png" href="https://dune.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 Adding a favicon to your digital workplace, 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}">