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.
| Badge Value | Shows Badge | Shows Text |
|---|---|---|
"" |
Y | N |
true |
Y | N |
false |
N | N |
0 |
N | N |
[1-9] |
Y | Y |
"\w+" |
Y | Y |