How to add animated favicon icon: tbfavanime.js
Animations on web are always catchy for visitors. Sometimes we puzzle how to add animated favicon icon and add animated favicon to our web pages. There are many tools and websites that may work. But for me nothing worked and that curiosity made drove me to write this code. I would love to share it with you all.
Many of us are not familiar with the term favicon. Let me introduce.
What is favicon
Favicon is also known as website icon, shortcut icon, tab icon or bookmark icon. It is visible in the top left corner of the browser tab. It is also shown as an icon in bookmarks bar when someone bookmarks your web page.
Favicon is an image/ icon file which can be any jpg image or png image or gif image and also can be an icon file (.ico) which is linked with the web page using code illustrated below.
|
1 2 3 4 5 6 7 8 |
<!-- png favicon image linking --> <link rel="icon" href="favicon.png" type="image/png"> <!-- jpg favicon image linking --> <link rel="icon" href="favicon.jpg" type="image/jpg"> <!-- gif favicon image linking --> <link rel="icon" href="favicon.gif" type="image/gif"> <!-- favicon icon file linking --> <link rel="icon" href="favicon.ico" type="image/x-icon"> |
To use animated icon in website there are many resources available like animated icons and gifs. For me both of these option do not work so I have written a small script to do so. You can call it a mini plugin that i wrote using jQuery .
Plugin is ready to use and available to download on GitHub. If you think of any modifications please do let me know in comments.
This plugin in written in jQuery hence it is required to include jQuery before including this script.
You can download this project from my GitHub repository Here.
How to use tbfavanime.js to amnimate favicon
To use this tbfavanime.js on your website, you need to include the code below:
|
1 2 3 4 5 6 |
<script> $.tbFavAnime({ images: ['favicon-red.png', 'favicon-purple.png', 'favicon-green.png', 'favicon-cyan.png'], imgPath: 'favicons/' }); </script> |
Available options of this script
Option: images
The option images is mandatory and a minimum of two images need to be used for a visible animation. If only one image is given then it will just change the image as per animation type.
|
1 2 3 4 5 6 |
<script> //using two images $.tbFavAnime({ images: ['favicon-green.png', 'favicon-cyan.png'], }); </script> |
|
1 2 3 4 5 6 |
<script> //using only one image (will not show animation) $.tbFavAnime({ images: ['favicon-cyan.png'], }); </script> |
Option: interval
The option interval is the time interval which signifies how frequently the icon changes. The lower the interval, faster will be the animation. If only one image is used, it not affect as there will be no animation.
Interval value is in milliseconds i.e, 1000 = 1 second. Default is 500. Below is the example showing interval increased to 600 milliseconds and 1 second respectively.
|
1 2 3 4 5 6 7 |
<script> // Animation frequency is 600 milliseconds $.tbFavAnime({ images: ['favicon-green.png', 'favicon-cyan.png'], interval: 600, }); </script> |
|
1 2 3 4 5 6 7 |
<script> // Animation frequency is 1 second $.tbFavAnime({ images: ['favicon-green.png', 'favicon-cyan.png'], interval: 1000, }); </script> |
Option: type
The option type is an integer (number) and can have three allowed values for now i.e, 0/1/2.
- 0 will show animation always as the page loads
- 1 is to show animation when browser/tab is unfocused and pause on focus on tab
- 2 will show animation when browser/tab is active and pause when tab is unfocused
Example for show animation when browser/tab is unfocused and paused when focused.
|
1 2 3 4 5 6 |
<script> $.tbFavAnime({ images: ['favicon-green.png', 'favicon-cyan.png'], type: 0, }); </script> |
Example to show animation when browser/tab is active and pause when tab is not in focus (active).
|
1 2 3 4 5 6 |
<script> $.tbFavAnime({ images: ['favicon-green.png', 'favicon-cyan.png'], type: 1, }); </script> |
Example to always show animation.
|
1 2 3 4 5 6 |
<script> $.tbFavAnime({ images: ['favicon-green.png', 'favicon-cyan.png'], type: 0, }); </script> |
Option: imgPath
The option imgPath is a string and need to be a url or a relative path (with a trailing slash) for the directory where favicon files are present.
Like if your icon images are present on a web source use URL as illustrated below:
|
1 2 3 4 5 6 |
<script> $.tbFavAnime({ images: ['favicon-green.png', 'favicon-cyan.png'], imgPath: 'https://techbriefers.com/images/' }); </script> |
If your icon images are present in a relative path the path will be as illustrated below:
|
1 2 3 4 5 6 |
<script> $.tbFavAnime({ images: ['favicon-green.png', 'favicon-cyan.png'], imgPath: '/assets/images/' }); </script> |
This is the complete documentation for this very first version tbfavanime.js. If you like share your thoughts on it please tell in comments section below.
Have a nice time.