Home›Customise & extend›Dynamically change the favicon

Dynamically change the favicon

Use custom JavaScript to change the favicon shown in the browser tab for your intranet.

Before you start

  • You need access to the Control Panel with permission to manage the Developer Framework.

Note: This script is a sample, not officially supported by Interact Technical Support. Review and test it with your development team before use, as it may need amends to work in your environment.

Overview

You can change the favicon within Interact through JavaScript and the Developer Framework. Add the following to MasterPage JavaScript:

$('head').append('<link id="dynamic-favicon" rel="shortcut icon" href="https://www.interact-intranet.com/favicon.ico" />');

This adds a link to the head of the page, which changes the shortcut icon and so changes the image shown on the browser tab.

Bear in mind the following caveats:

  • The favicon is changed by JavaScript, so the standard Interact favicon may be visible briefly in the tab before it updates.
  • The Developer Framework is not loaded for the login screen or for pop-up windows, so those pages still show the standard Interact favicon.
  • This may not work in older browsers such as IE8.
Section: Customise & extend