Animated favicon setup

Put your PNG frames in a folder named GIFframes, keep them named frame0.png, frame1.png, frame2.png, and so on, then link GIFframes/frame0.png as the favicon and include the JavaScript file.

The only thing most people need to change in the JavaScript is the FPS value. Everything else can stay the same.

Use this code

Copy this file as-is, keep the folder name GIFframes, and only edit the FPS line.

Loading JavaScript...

Page tags

<link rel="icon" href="GIFframes/frame0.png" type="image/png" />
<script src="ANIMATEDgifFUNCTION.js" defer></script>

GIF to favicon frames

Upload a GIF and this tool will calculate its FPS, count the frames, resize each frame to 32x32, rename them frame0.png, frame1.png, and so on, then package them into a zip file.

Choose a GIF to begin.

Zip contents will be named for the required folder structure: GIFframes/frame0.png, GIFframes/frame1.png, and so on.

check out my other websites and projects on my portfolio site.

/*
	Animated favicon setup

	To reuse this on another page:
	1. Keep your PNG frames inside a folder named "GIFframes".
	2. Name each frame in order: frame0.png, frame1.png, frame2.png, and so on.
	3. Change ONLY the FPS value below so it matches your GIF.
	4. Add this script to your page with: <script src="ANIMATEDgifFUNCTION.js" defer></script>

	This script automatically looks for frames until it hits the first missing file,
	so users do not need to edit a frame count.
*/

(function () {
	"use strict";

	// Change this value to match your source GIF speed.
	// Example: 8.33 FPS means each frame lasts about 120 ms.
	var FPS = 1;

	// Leave these as-is unless you intentionally rename the folder or files.
	var FRAMES_FOLDER = "GIFframes";
	var FRAME_PREFIX = "frame";
	var FRAME_EXTENSION = ".png";
	var MAX_FRAME_PROBE = 10000;

	var frameDurationMs = Math.max(16, Math.round(1000 / Math.max(FPS, 0.01)));
	var frameSources = [];
	var renderedFrames = [];
	var animationTimer = null;
	var currentFrameIndex = 0;
	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");

	if (!context) {
		return;
	}

	function buildFramePath(index) {
		return FRAMES_FOLDER + "/" + FRAME_PREFIX + index + FRAME_EXTENSION;
	}

	function ensureFaviconLinks() {
		var iconLinks = document.querySelectorAll('link[rel~="icon"], link[rel="shortcut icon"]');

		if (iconLinks.length > 0) {
			return Array.prototype.slice.call(iconLinks);
		}

		var iconLink = document.createElement("link");
		iconLink.rel = "icon";
		document.head.appendChild(iconLink);

		var shortcutLink = document.createElement("link");
		shortcutLink.rel = "shortcut icon";
		document.head.appendChild(shortcutLink);

		return [iconLink, shortcutLink];
	}

	function updateFavicon(dataUrl) {
		var links = ensureFaviconLinks();
		var cacheBustedUrl = dataUrl + "#frame=" + currentFrameIndex;

		for (var index = 0; index < links.length; index += 1) {
			links[index].type = "image/png";
			links[index].href = cacheBustedUrl;
		}
	}

	function drawFrame(image) {
		if (canvas.width !== image.naturalWidth || canvas.height !== image.naturalHeight) {
			canvas.width = image.naturalWidth;
			canvas.height = image.naturalHeight;
		}

		context.clearRect(0, 0, canvas.width, canvas.height);
		context.drawImage(image, 0, 0);

		return canvas.toDataURL("image/png");
	}

	function stopAnimation() {
		if (animationTimer !== null) {
			window.clearInterval(animationTimer);
			animationTimer = null;
		}
	}

	function startAnimation() {
		if (renderedFrames.length <= 1 || animationTimer !== null) {
			return;
		}

		animationTimer = window.setInterval(function () {
			currentFrameIndex = (currentFrameIndex + 1) % renderedFrames.length;
			updateFavicon(renderedFrames[currentFrameIndex]);
		}, frameDurationMs);
	}

	function handleVisibilityChange() {
		if (document.hidden) {
			stopAnimation();
			return;
		}

		updateFavicon(renderedFrames[currentFrameIndex]);
		startAnimation();
	}

	function preloadFrame(source) {
		return new Promise(function (resolve, reject) {
			var image = new Image();

			image.onload = function () {
				resolve(image);
			};

			image.onerror = function () {
				reject(new Error("Missing frame: " + source));
			};

			image.src = source;
		});
	}

	async function collectFrameSources() {
		for (var frameIndex = 0; frameIndex < MAX_FRAME_PROBE; frameIndex += 1) {
			var source = buildFramePath(frameIndex);

			try {
				await preloadFrame(source);
				frameSources.push(source);
			} catch (error) {
				break;
			}
		}
	}

	async function renderFrames() {
		for (var index = 0; index < frameSources.length; index += 1) {
			var image = await preloadFrame(frameSources[index]);
			renderedFrames.push(drawFrame(image));
		}
	}

	async function initializeAnimatedFavicon() {
		await collectFrameSources();

		if (frameSources.length === 0) {
			return;
		}

		await renderFrames();

		if (renderedFrames.length === 0) {
			return;
		}

		updateFavicon(renderedFrames[0]);
		document.addEventListener("visibilitychange", handleVisibilityChange);
		startAnimation();
	}

	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", initializeAnimatedFavicon, { once: true });
	} else {
		initializeAnimatedFavicon();
	}
}());