faviconの動的書き換えとアニメーション

Twitterのfaviconはつぶやきがあった場合など赤い点で知らせてくれます。
その方法と、さらにfaviconをパラパラ漫画的にアニメーションさせるモジュールを試作しました。

faviconを動的に入れ替る

htmlのコードは下記のとおり

<html lang="ja">
<head>
<meta charset="utf-8">
<title>favicon変更</title>
<link rel="shortcut icon" href="favicon.ico" id="favicon">
<script>
function chngFavi(){
  var favi = document.getElementById("favicon");
  favi.href = "favicon2.ico";
}
</script>
</head>
<body>
  <input type="button" value="favicon切り換え" onclick="chngFavi();">
</body>
</html>

faviconをアニメーション

faviconを一定間隔で入れ替えるモジュールを作ってみました。
作成したモジュールのコードは下記のとおりです。

'use strict';
/*
*	Animate the favicon
*	Animation favicon can be changed
*	Confirmed to work with Firefox and Chrome
*
*	Lisence: MIT
*	Author: Booskanium
*
*/
export default class animationFavicon {
	constructor(cnf) {
		this.config = {		//Various settings for turning the favicon
			faviId: "favicon",		//ID name of the element specified by the favicon.
			faviHref: "",			//Default value of href attribute of element specified by favicon.
			favis: [				//List the png image files to be animated. The base64 format is recommended.
				{href: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAySURBVEhL7c0hAgAgDIBA9P9/nsVOWuMKkQPDpvu7poFqoBqoBqqBaqAaqAaqgWog4AGhxgE/VKJr9AAAAABJRU5ErkJggg=="},	
				{href: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAxSURBVEhL7c2hAQAACITA1/131mIn2bhCpGbyqq9vHCAHyAFygBwgB8gBcoAcIAcgWbZaAj6Rffc+AAAAAElFTkSuQmCC"},	
				{href: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABKSURBVEhLtcexDQAwEAMh77/0p7+aSDTs9lfP9VzP9VzP9VzP9VzP9VzP9VzP9VzP9VzP9VzP9VzP9VzP9VzP9VzP9VzP9VyPbQ8yw/wuEOdxyQAAAABJRU5ErkJggg=="}	
			],
			fps: 4				//Note that if you make the FPS too large, frames will be dropped.
		}
		this.intervId = null;		//Favicon turning interval ID 
		this.ix = 0;				//Favicon turning index 
		if (cnf) {			//Set your own settings
			this.change(cnf);
		}
		if (!!document.getElementById(this.config.faviId)) {
			this.config.faviHref = document.getElementById(this.config.faviId).href;
		}
	}

	change(cnf) {	//Change the animation favicon
		if ('faviID' in cnf) this.config.faviId = cnf.favId;
		if ('faviHref' in cnf) this.config.faviHref = cnf.favHref;
		if ('favis' in cnf) this.config.favis = cnf.favis;
		if ('fps' in cnf) this.config.fps = cnf.fps;
	}

	start() {	//Start Favicon animation 
		let fpsRate = 1000 / this.config.fps;
		this.ix = 0;
		document.getElementById(this.config.faviId).href = this.config.favis[this.ix].href;
		if (this.config.favis.length > 1) {
			this.intervalId = setInterval(()=>{
				if (this.ix >= this.config.favis.length - 1) {
					this.ix = 0;
				} else {
					this.ix++;
				}
				document.getElementById(this.config.faviId).href = this.config.favis[this.ix].href;
			}, fpsRate);
		}
	}

	stop() {	//Stop the Favicon animation and replace it with the default Favicon
		if (this.intervalId) {
			window.clearInterval(this.intervalId);
		}
		document.getElementById(this.config.faviId).href = this.config.faviHref;
	}
}

使い方は動作確認したページを開いてリバエンして下さい。って冷たすぎるので簡単に説明すると
・モジュールなのでimportする
・newはDOMが有効になった(DOMContentLoaded)後に
・configを設定はnewする時、またはchangeメソッドで
・configはfavicon指定でコード中のコメントを参照
・faviconイメージはbase64でconfigに配列で設定する
　※faviconイメージへのパスでも動作しますが自爆DDoSもどき！！
　※faviconイメージはpng推奨
　※faviconイメージでsvgはSfariが開国したばかりで時期尚早
　※配列が１つだと単純なファビコン入れ替え
・ぱらぱらfpsが速すぎるとコマ落ちするので程々に
・メソッドは
　change　configの入れ替え
　start　faviconのアニメーション開始
　stop　faviconを既定値に戻す

なお利用する場合の注意事項です。
・base64で抱え込まないと自爆DDoSになるかも
・スマホブラウザでは無意味(無駄に裏で動いている)
・faviconがを派手に動かしすぎると多分嫌われる
ということで、ほどほどに！！