Menu
How to animate a favicon like that?
It seems to work only in Firefox.
779
An Animate Favicon button is added in the HTML page, which helps in starting the animation effect on click event. Once the drawing is done in the canvas, it is converted to a PNG image before being assigned as a favicon. Example 1: The following example code will show the implementation of circular animation on favicon image.
Tip: A favicon is a small image, so it should be a simple image with high contrast. A favicon image is displayed to the left of the page title in the browser tab, like this:
Within the <style> tag, let’s write a simple keyframe animation: This will create a mesmerizing “zooming” effect. Here is one more example animation that creates a “ghost” effect: There’s really no limits to what kind of animation you can add to your favicon, so get creative with it!
Both the favicon and the canvas are given a standard favicon size: 32 square pixels. For demo purposes, in order to trigger the loading animation, I’m adding a button to the page which will start the animation when clicked. This also goes in the HTML:
While it's currently only supported by Firefox other browsers will hopefully support it in the future. To achieve the effect, you need to upload the gif to your server and then add the line below to head section of your page:
<link rel="icon" href="animated_favicon.gif" type="image/gif" > Take a look at AnimatedFavIcon.com for additional help and resources.
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
