How to dynamically change the favicon

Many customers have asked about the ability to change the favicon within Interact. Whilst this is something that we are looking to support properly in the application, there is a way of doing it through javascript and the developer framework as shown below.

$('head').append('<link id="dynamic-favicon" rel="shortcut icon" href="" />');

This works by adding a link to the head of the page, which changes the shortcut icon of the page to the specified image. Causing the image on the tab in the browser to change.

Whilst this works well, there are a couple of caveats to bear in mind if using this.

  • The favicon is changed by javascript, so there may be a brief moment when the standard interact favicon is visible in the tab

  • The developer framework is not loaded for the login screen, or for popup windows, so those pages will still show the standard interact favicon

  • This function may not be supported in older versions of browsers such as IE8