Create Dynamic Badges For Favicons – Tinycon.js

Tinycon is a small yet useful JavaScript favicon manipulation library which adds custom, animated, dynamic badges to your browser’s favicon.

Typically used to re-render the favicon to show a notification number.

Also provides a fallback to a number for legacy browsers that don’t support dynamic favicons.

Alternatives:

• jQuery Plugin For Animating Your Favicon With Animated Badges – favico.js
• jQuery Animated Favicon Notification Plugin – Notify Better

How to use it:

To use this library, make sure you have a favicon.

<link rel="icon" href="favicon.ico">

Download and import the Tinycon.js into your html file.

<script src="tinycon.js"></script>

Set the number of notification displayed in the favicon.

Tinycon.setBubble(10);

Customize the favicon badge with the following settings.

Tinycon.setOptions({
  width: 7,
  height: 9,
  font: 10 * r + 'px arial',
  color: '#ffffff',
  background: '#F03D25',
  fallback: true,
  crossOrigin: true,
  abbreviate: true
});