gif-it.js is a lightweight, single-file JavaScript solution that allows you to easily animate your website's favicon using a GIF, providing a dynamic and engaging visual for your browser tabs. It gracefully handles GIF frame extraction and animation, with built-in compatibility for different browser behaviors.
- Single File: All the necessary code for animated favicons (including the
SuperGiflibrary) is bundled into one convenientgif-it.jsfile. - Flexible GIF Sourcing: Use GIFs hosted locally on your server or from external URLs.
- Automatic Favicon Animation: Handles frame extraction and updates the favicon dynamically.
- Firefox Compatibility: Automatically bypasses the animation for Firefox browsers, setting the GIF as a static favicon due to its lack of support for animated favicons via Data URLs.
- Simple API: Integrate with a single line of JavaScript in your HTML.
- Hidden Processing: GIF processing occurs in a hidden DOM element, preventing visual artifacts on your page.
Follow these simple steps to add an animated favicon to your web page:
First, download the gif-it.js file from its raw source on GitHub:
Save this file into your web project directory.
Place the <script> tag for gif-it.js within the <head> or just before the closing </body> tag of your index.html (or relevant HTML file). example html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Awesome Page</title>
<link id="faviconLink" rel="icon" href="data:," type="image/png">
<script src="gif-it.js"></script>
<script type="text/javascript">
FaviconAnimator.init('favicon.gif'); // your path/URL to your gif
</script>
</head>
<body>
<!--but your own code here-->
</body>
</html>