Create Dynamic Badges For Favicons – Tinycon.js

Category: Recommended | January 13, 2018
Views Total:1,348 views
Official Page:Go to website
Last Update:January 13, 2018


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.


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.


Customize the favicon badge with the following settings.

  width: 7,
  height: 9,
  font: 10 * r + 'px arial',
  color: '#ffffff',
  background: '#F03D25',
  fallback: true,
  crossOrigin: true,
  abbreviate: true

You Might Be Interested In:

Leave a Reply