aviconist
find an image edit download

No Need!

Make a beautiful favicon in seconds

 

favicon.js

This is the home of Favicon.js, a JavaScript library that lets you change favicons dynamically.

Demo

  1. Type a letter.
  2. Look up. Favicon has changed.

Or try

Or set badge text:

Usage

1. Download the library or link directly to faviconist's copy:

<script src="http://faviconist.com/favicon.js"></script>

2. Use the library in your JavaScript:

mySexyVideoPlayer.onplay = function() { favicon.change("/icons/play.gif"); };
window.onload = function() {
 favicon.animate(["/s.ico","/e.ico","/x.ico","/y.ico"]);
 favicon.scrollTitle("s e x y a p p");
};
addVideo.onclick = function() { favicon.badge(++videoCount); }

Compatibility

Favicons work on all modern browsers and favicons from the faviconist editor will work everywhere. But the favicon.js library is a different story ...

Changing the favicon works on all versions of Firefox, Opera, and Chrome. Unfortunately, Internet Explorer and Safari don't support favicon manipulation.

Setting badge text works on all versions of Chrome, and modern versions of Firefox and Opera (it requires canvas support and all of these browsers have supported canvas for several years now).

Setting and animating the title works on all major browsers.

History

I discovered that favicons could be dynamically manipulated in 2006 and released the first version of favicon.js along with the announcement. Over the years, it's evolved to include title setting, rotation of images and scrolling of the title, and badge text for notifications.

Since that discovery, we have seen many interesting applications of dynamic favicons, such as:

  • Video games! Has to be the all-time winner :).
  • A graphic equalizer display.
  • There's even a nefarious use for it: Tabnapping. It's not endorsed here! Well, except for April Fools jokes involving Mr. T. But it's a fascinating example of unintended consequences. This is a "phishing" attack in which the site quietly metamorphizes itself while the user is in another tab.