ファビコンの上に数字アラートを表示するjsライブラリ Tinycon

Tinyconはファビコンの上に数字アラートを表示するjsライブラリです。

cap4

アイコンに新着メッセージ数などを表示したいときに使えます。
Gmailにも未読数をアイコンで表示する機能がありますが、同様の機能が実装できます。

mod_unreadcountfavicon

対応ブラウザは、Chrome、Firefox、Operaです。
IEやSafariはブラウザ自体に機能が無いので、実装できません(※2016/01/29時点)。

デモ

デモページを用意しました。

ダウンロード

GitHubの「Download Zip」ボタンからダウンロードします。

使い方

「tinycon.min.js」を読み込みます。jQueryは不要です。

<script src="js/tinycon.min.js"></script>

実行用のスクリプトはこれだけです。

Tinycon.setBubble(count);

今回は、1秒(1000ミリ秒)ごとにカウントを一つずつ増やしてみました。

<script>
(function(){
  var count = 0;
  setInterval(function(){
    ++count;
    Tinycon.setBubble(count);
  }, 1000);
})();
</script>

オプションで、色やフォントサイズを変更できます。

Tinycon.setOptions({
  width: 7,
  height: 9,
  font: '10px arial',
  colour: '#ffffff',
  background: '#549A2F',
  fallback: true
});

cap6

ドキュメント