Key Features • Demo • Installation • How To Use • Browsers support • License • Contributing
## Key Features ✨ * **Small.** ~ 2.78KB (minified and gzipped). Size Limit controls the size. * **No dependencies.** * **Friendly and flexible configuration** * **Easy to use** * **Typescript** support * **SSR friendly** ## Demo 👀 ### [DEMO](https://favoritos.vercel.app/) ## Installation 🚀 ### Using package managers #### npm ```shell script $ npm install favoritos --save ``` #### yarn ```shell script $ yarn add favoritos ``` ### via CDN Add script right before closing `| Option | Default value | Description |
|---|---|---|
iconSelector |
'link[rel*="icon"]' |
A selector for your favicon where magic will be drawn. |
backgroundColor |
'#d21f3c' |
Background color for the icon. Used when rendering the progress bar. May be a string or an array. If an array is passed, a gradient will be drawn. |
shape |
'circle' |
The shape for the icon. Can take the following values: circle, rect.
|
lineWidth |
4 |
Line width for your icon. |
width |
32 |
Width for your icon. Initially, there is the width of a standard favicon. |
height |
32 |
Height for your icon. Initially, there is the height of a standard favicon. |
| Option | Default value | Description |
|---|---|---|
fontSize |
18 |
Font size of badge text. |
backgroundColor |
'#d21f3c' |
Background color for the badge. |
fontFamily |
'Helvetica, Arial, sans-serif' |
Font family for the badge text. |
shape |
'circle' |
The shape for the icon. Can take the following values: circle, rect.
|
position |
'bottom-right' |
Position for your badge. Can take the following values: top-left, top-right, bottom-left, bottom-right.
|
minWidth |
22 |
Minimal width for your badge. |
minHeight |
22 |
Minimal height for your icon. |
| Option | Default value | Description |
|---|---|---|
enabled |
false |
Turns debugging on and off. |
debugSelector |
'#favoritos-debug' |
Element selector where the canvas will be drawn. |
shape passed during library initialization.
The method takes two arguments: progress and useFavicon. progress indicates how much has already been completed. Value from 0 to 100. useFavicon indicates whether to draw the progress bar on top of the favicon.
---
**favoritos.setOptions()**
```js
/* For example, set icon background color to green if task was done */
favoritos.setOptions({
icon: {
backgroundColor: 'green'
}
})
```
You can change any options for the library. But after the change, you must definitely call the icon renderer with the method of which you use (drawBadge() or drawProgress()).
---
**favoritos.setIcon()**
```js
/* Change favicon on tab change */
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
document.title = 'Hello again! 😀';
favoritos.setIcon('./on-visible.png')
} else {
document.title = 'I miss you! 😭';
favoritos.setIcon('./on-visible.png')
}
})
/* Change favicon on theme change */
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
const newColorScheme = event.matches ? "dark" : "light";
if (newColorScheme === 'dark') {
favoritos.setIcon('./dark-favicon.png')
} else {
favoritos.setIcon('./light-favicon.png')
}
});
```
Simply draws a new favicon.
---
**favoritos.reset()**
```js
favoritos.reset();
```
Resets the library to its original state. Draws your default favicon.
---
## Browsers support 🌎
| [
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)
](http://godban.github.io/browsers-support-badges/)setIcon method only works there.
If you want to send a polyfill only to browsers that need it, there's a handy service called [Polyfill.io](https://polyfill.io/v3/url-builder/) which does just that, it offers a wide array of polyfills.
Here's an example of using [polyfill.io](https://polyfill.io/v3/url-builder/) to polyfill only the `Object.assign` feature, so if we put this right before closing `` tag of `index.html` and `Favoritos` script, Polyfill.io will read the user agent and use that information to determine if the browser requires a polyfill for the feature or features listed. Since I'm using Chrome it will send back an empty response since my browser doesn't need it, pretty slick.
```html
```
## License 📄
### [MIT](https://github.com/webistomin/favoritos/blob/master/LICENSE)
## Contributing 🎉
Found a bug? Missing a specific feature?
Your contributions are always welcome! Please have a look at the [contribution guidelines](https://github.com/webistomin/favoritos/blob/master/CONTRIBUTING.md) first.
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 Alexey Istomin 🚇 💻 🤔 |