ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.js

ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・favico.jsのご紹介です。メールやソーシャルサイトなどで最近よく見かける、ファビコン通知バッジを実装します。

メールを受信したり、投稿があったらファビコンに数字を表示させる、というもの。アニメーションエフェクトもあるので目が行きやすいかも。対応ブラウザは若干限られます。

更新があると数値が増える。増える時にアニメーションで数値が変わる、みたいなの。動作デモはスクリプトの配布サイトで確認出来ます。

var favicon=new Favico({
    animation:'slide' //アニメーションエフェクトの指定
});
favicon.badge(1);

エフェクトは上記のようにセッティングします。

var favicon=new Favico({
    bgColor : '#5CB85C',//背景色
    textColor : '#ff0',//テキストの色
});
favicon.badge(1);

こんな感じでスタイルを変更する事も出来る。

こういった通知法も一つの手として有効かもしれませんね。ライセンスはGPLとMITのデュアルライセンスです。

favico.js