ファビコンに更新通知の数字バッジ等をアニメーション付きで表示させるスクリプト・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