favicon-badge
v2.0.0
Published
A web component for displaying a badgable favicon
Downloads
402
Maintainers
fallaciousreasoningReadme
Badgable FavIcon
This project makes it possible to badge the favicon of the current page. You can play with a demo here.
Usage
Include the "FavIconBadge.js" file in your project.
Run
npm install favicon-badgeand 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" />API
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 ofbadgeColor. |
| badgeSize | number | The size of the badge. Should be between0and16. Defaults to 10`. |
Badge Values
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 |