favorite-icon-badge

A small library for manipulating the favicon, in particular adding alert bubbles and changing images.

Usage no npm install needed!

<script type="module">
  import favoriteIconBadge from 'https://cdn.skypack.dev/favorite-icon-badge';
</script>

README

📛 Favorite Icon Badge

NPM version NPM downloads Bundlephobia

A small library for badge manipulating in favicon.

Installation

npm install favorite-icon-badge

Demo

Using

import FaviconBadge from 'favorite-icon-badge';

const badge = new FaviconBadge();

badge.set(count);

Advanced settings

import FaviconBadge from 'favorite-icon-badge';

const badge = new FaviconBadge({
    backgroundColor: '#ff0000',
    fontFamily: 'arial, sans-serif',
    fontStyle: 'normal',
    strokeColor: '#000',
    textColor: '#fff',
    faviconSrc: '/my-icon.png',
    maxCount: 99,
    size: Favicon.size,
    links: Favicon.icons,
    positionX: 'right',
    positionY: 'bottom'
});

badge.set(count);

API

.set(count: number)

Set the favicon with the badge.

import FaviconBadge from 'favorite-icon-badge';

const badge = new FaviconBadge();

badge.set(count);

.reset()

Reset the favicon.

import FaviconBadge from 'favorite-icon-badge';

const badge = new FaviconBadge();

// ...

badge.reset();

Browser support

  • Chrome: ✅
  • Firefox: ✅
  • Opera: ✅
  • IE: ❌
  • Edge: ❌
  • Safari: ❌ (Safari hides favicons)

License

MIT License