Change Favicon in AD FS

A hallmark of any well branded web site is the favicon displayed in the browser tab. With a small amount of effort, we can apply a custom favicon to AD FS as well.

Firstly, take a look at this Gist from Mathias Bynens. It demonstrates how to use JavaScript and HTML5 to change a page’s favicon. As we can’t touch the HTML in AD FS, this is what we need.

The procedure

First, you’ll need a favicon.ico file. Mine is 32x32. Drop this on your AD FS server - we’ll need this in a moment.

Add the following to your onload.js file:

This will tell your visitors’ browsers to look at https://youradfsdomain/adfs/portal/logo/favicon.ico for this particular page’s favicon. Now, let’s upload the custom onload.js file and the favicon.ico file into the theme:

Written on November 4, 2016