GmailのようにファビコンにバッジをつけられるJSプラグイン「favico.js」

Gmailをお使いの人ならご存知だと思いますが、
タブに目を向けるとファビコンに受信メール数が表示されていますよね。

新着メールが1件届いていれば”１”、メールが届いてなければ "0"と。

あの機能と同等のことが簡単に実現出来るJavascriptプラグインが " favico.js " です。

使い方も簡単で、わずか数行のコードで済みます！

<!-- jsファイルの読み込み -->
<script src="yourPublicDir/favico.js"></script>

<script type="text/javascript">
  var favicon = new Favico({
      animation:'slide' // アニメーションのオプション
  });
  
  favicon.badge(1); // ファビコンにバッジが追加され1と表示されます
</script>

( * サポートされているブラウザ )
- IE 11以上
- Firefox
- Google Chrome
- Opera
- * Safariでもテストしましたが問題なく動作しました

実際に使う場合は
Ajaxで新着情報を取得するので下記の様なコードになるのではないでしょうか。

// sampleコード * jqeuryのget関数を使っています
$.get('http://yoururl', function(result) {
    // favico.jsの設定
    var favicon = new Favico({ animation:'slide' });
    
    favicon.badge(result);
});

また、favico.jsにはオプションが用意されており、表示される時のアニメーション
ファビコンのバッジの色、フォントの大きさを変更することも可能です。

var favicon = new Favico({
    animation : 'slide' // アニメーション (slide, fade, pop, popFade, none)
    position: 'down', // ポジション (up, down, left, upleft)
    bgColor: '#d00', // バッジのカラー
    textColor: '#fff', // バッジのテキストカラー
    fontStyle: 'bold', // フォントスタイル(normal, italic, oblique, bold, bolder, lighter, 100, 200...)
});

favicon.badge(1);

１つ注意点がありますが、node.jsで "serve-favicon"を使って
サーバー側でファビコンをセットしている場合にはfavico.jsは使用できません。

ユーザーが絡むシステムで
新着情報や、未読情報を表示させたい時に使えそうですね！

favico.js
 

favico.jsのTypeScriptの定義ファイル