/animated-favicon

Animated Favicon, simply code to make your favicon animated

Primary LanguageJavaScriptMIT LicenseMIT

animated-favicon

Animated Favicon

Simply code to make your favicon animated (..and title of the page)


This is just a snippet of code to make your favicon animated.. you can check in action on my website https://orsi.me.

🎮 Demo / Example

⚖️ Licensed under MIT

🤓 Author @orsifrancesco

☕ Offer me a coffee

📦 Just a snippet of code

function animatedIcon() {

	const faviconAnimation = [
		"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"
	]

	const titles = [
		"l......",
		"lo.....",
		"loa....",
		"load..."
	]

	if (!document.querySelector("head link[rel='icon']")) document.querySelector("head").innerHTML = document.querySelector("head").innerHTML + '<link rel="icon" type="image/png" sizes="32x32" href="">';

	document.querySelector("head link[rel='icon']").setAttribute('href', 'data:image/png;base64,' + faviconAnimation[0] + '');
	document.querySelector("title").innerHTML = titles[0];

	let animCount = 0;
	function animFoo() {
		if (animCount >= faviconAnimation.length) { animCount = 0; }
		document.querySelector("head link[rel='icon']").setAttribute('href', 'data:image/png;base64,' + faviconAnimation[animCount] + '');
		document.querySelector("title").innerHTML = titles[animCount];
		animCount++;
	}

	setInterval(() => { animFoo() }, 500);

}

animatedIcon();

⚖️ License

Licensed under MIT

☕ About

Any feedback to @orsifrancesco and/or coffee is welcome :)