Create Dynamic Badges For Favicons – Tinycon.js

Category: Recommended | January 13, 2018
Author: tommoor
Views Total: 1,409
Official Page: Go to website
Last Update: January 13, 2018
License: MIT

Preview:

Create Dynamic Badges For Favicons – Tinycon.js

Description:

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:

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
});

You Might Be Interested In:


Leave a Reply