Favicon-badge NPM

Badgable FavIcon

This project makes it possible to badge the favicon of the current page. You can play with a demo here.

Include the "FavIconBadge.js" file in your project.

Run

npm install favicon-badge

and then, if using WebPack:

import "FavIconBadge";

or if using VanillaJS

<script type="text/javascript" src="path/to/FavIconBadge.js"></script>

To use, simply add a <favicon-badge/> tag to the <head> of your document.

<!-- Badges the favicon for the current page with a '1' -->
<favicon-badge src="/favicon.png" badge="1" />

The API provides methods for controlling and customizing the badge.

Attribute	Type	Description
src	`string`	The url of the favicon to display. This must be set in order for a favicon to be displayed.
badge	`string` \|`int` \|`boolean`	The badge to display. See badge values for more detail.
badgeColor	`string`	A string representing the color of the badge. Defaults to `#FF0000`. Not used if `badgeBackgroundSrc is set.
textColor	`string`	A string represnting the color of the text on the badge. Defaults to `#000000`.
badgeBackgroundSrc	`string`	Url for an image to display as the badge background. Used instead of `badgeColor`.
badgeSize	`number`	The size of the badge. Should be between `0` and `16`. Defaults to `10`.

An attempt has been made to provide sensible defaults for different badge values.

5 years ago

5 years ago

5 years ago