useAnimatedFavicon
loads a spritesheet and converts it to an animated favicon!
First, make sure you have a <link>
element on your page with rel="icon"
. You can even set the href
of the element to a static favicon. useAnimatedFavicon
will just overwrite the favicon when it's loaded.
- Load the spritesheet
- Start a render loop, rendering the image to an invisible
<canvas>
element - Generate a data URI from the
<canvas>
- Inject the data URI into the favicon's
<link>
element
Option Name | Type | Required | Description |
---|---|---|---|
frameCount |
integer |
Yes | How many frames are in the spritesheet |
frameRate |
integer |
Nope | The frame rate (in milliseconds) at which the favicon will be updated |
imageURL |
string |
Deffo | The URL from which the spritesheet will be loaded |
spritesheetDirection |
horizontal or vertical |
Nah | Whether the spritesheet is a horizontal or vertical strip. |