Working with favicons

A favicon (favorite icon) is the small image associated to the website displayed in various locations: browser tabs, address bar, browser history, and so on. Favicons are important to a website for many reasons which includes helping drive brand awareness by displaying the company logo and colors in multiple locations, as well as making your website easier to distinguish when working with multiple webpages in a browser- see examples below.

Favicons can be found in multiple sizes and formats: 16 x 16, 32 x 32, 48 x 48, or 64 x 64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth; however, the recommended size is 16 x 16. They can also be created in multiple formats: .gif, .png, jpeg. However, the industry standard for sometime now is the .ico format.

Use the following instructions to add a favicon to your website.

1. Acquire a favicon image, which should be 16px x 16px in size.
   
   Note: There are multiple favicon generators available online if you don't have access to an existing favicon image file.
2. The file should be created in the .ico format and named favicon.ico.
3. Upload the favicon.ico file to the /images folder.
   
   Note: It may take a while for the image to display- 5-10 min, performing a hard refresh could decrease the wait time.
4. As a best practice, include the following code in the head of your HTML document.

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

Adding a favicon to a site

1. Access the Admin Console.
2. Go to Websites select a website.
3. Click Edit.
4. Within the Details tab, click Browse adjacent to the Website Favicon field.
5. Select the desired image.
   Note: There are multiple favicon generators available online if you don't have access to an existing favicon image file.
6. Click Save to accept changes.