https://github.com/fallaciousreasoning/badgable-favicon
A WebComponent for applying a badge to a favicon
https://github.com/fallaciousreasoning/badgable-favicon
Last synced: 12 months ago
JSON representation
A WebComponent for applying a badge to a favicon
- Host: GitHub
- URL: https://github.com/fallaciousreasoning/badgable-favicon
- Owner: fallaciousreasoning
- Created: 2019-08-02T01:44:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-07-20T12:44:30.000Z (almost 4 years ago)
- Last Synced: 2025-02-16T03:07:12.962Z (over 1 year ago)
- Language: TypeScript
- Size: 156 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Badgable FavIcon
This project makes it possible to badge the favicon of the current page. You can play with a demo [here](https://fallaciousreasoning.github.io/badgable-favicon/).
## Usage
Include the "FavIconBadge.js" file in your project.
Run
```
npm install favicon-badge
```
and then, if using WebPack:
```js
import "FavIconBadge";
```
or if using VanillaJS
```html
```
To use, simply add a `` tag to the `` of your document.
```html
```
## 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](#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`. |
### 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 |