2011-11-08

Favicon notify

Hack of the day from a few weeks back: show small notification bubble in the favicon. Check out the code at https://github.com/kig/faviconNotify and go to http://fhtr.org/faviconNotify for a demo.

Usage

  FaviconNotify.set(number);
  FaviconNotify.clear();

Longer example of use in HTML

  <html>
    <head>
      <link rel="icon" href="favicon.ico">
      <script src="faviconNotify.js"></script>
      <script>
        window.onblur = function() {
          FaviconNotify.set(1);
        };
        window.onfocus = function() {
          FaviconNotify.clear();
        };
      </script>
    </head>
  </html>

Riffing on the work of +Michael Mahemoff http://softwareas.com/dynamic-favicons
And http://userscripts.org/scripts/show/24430
And +Mathieu Henri http://www.p01.org/releases/DEFENDER_of_the_favicon/

See also http://faviconist.com/favicon-library (updated dynamic favicon library to incorporate badge-setting).
Post a Comment