art with code

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

About Me

My Photo

Built art installations, web sites, graphics libraries, web browsers, mobile apps, desktop apps, media player themes, many nutty prototypes, much bad code, much bad art.

Have freelanced for Verizon, Google, Mozilla, Warner Bros, Sony Pictures, Yahoo!, Microsoft, Valve Software, TDK Electronics.

Ex-Chrome Developer Relations.