Introducing Dynamic favicons in JSF applications

Being in New Orleans for a festive conference like ODTUG brings me in a mood to write about something colorful – even if not very useful. And perhaps every now and again you may find it useful after all. You probably know of favicons – if not the word itself. Websites can define a favicon – a small icon that will display on the tab and/or the location bar of your browser (if the browser supports it, which not all browsers do). The favicon is a 16×16 icon that is typically referenced from a link element in the web page. You can use a site-wide favicon by placing a favicon.ico file – with exactly that name – in the web root of the site (just like the index.html file). 

 

In this article, I will demonstrate how easy it is to add dynamic – programmatically set – favicons.
This allows you to have the favicon depend on dynamic conditions, such as the data currently displayed on the page or even the time of day. It also allows you to allow your visitors and end users to select their own favicon if they feel so inclined. All it takes is a little JavaScript library and a simple call in each page. 

Here we see a simple example of a Departments overview page for which the favicon has been set to a cute little home icon:

When we select an employee who is a manager and then press the Employee Details button, we are taken to the Employee page with a manager-like icon displayed as favicon:

When we select an employee with a different job or change the job of the selected employee and press submit, the page is displayed with a ‘normal employee’ favicon:

 

This functionality is implemented in very simple way. The departments page has this script element included:

 <trh:script source="favicon.js"/>
 <trh:script text="addLink ('#{'department.ico'}')" /> 

And the Employee page this slightly more complex element that uses an EL Expression to determine the icon based on the Job for the current employee:

 <trh:script source="favicon.js"/>
 <trh:script text="addLink ('#{bindings.Job.inputValue=='MANAGER'?'manager.ico':'empicon.ico'}')" />
 

Both pages include a simple JavaScript library that does the dynamic assignment of the favicon.

// based on http://softwareas.com/dynamic-favicon-library-updated by Michael Mahemoff's 

function addLink (iconURL) {
  var link = document.createElement("link");
  link.type = "image/x-icon";
  link.rel = "shortcut icon";
  link.href = iconURL;
  removeLinkIfExists();
  document.getElementsByTagName("head")[0].appendChild(link);
}

function removeLinkIfExists() {
  var links = document.getElementsByTagName("head")[0].getElementsByTagName("link");
  for (var i=0; i<links.length; i++) {
    var link = links[i];
    if (link.type=="image/x-icon" && link.rel=="shortcut icon") {
      document.getElementsByTagName("head")[0].removeChild(link);
      return; // Assuming only one match at most.
    }
  }
}
 

This library is based on the work by Michael Mahemoff (see http://softwareas.com/dynamic-favicon-library-updated  )

Resources

Site to generate favicons from just about any image format: http://www.html-kit.com/favicon/