Tinyconはファビコンの上に数字アラートを表示するjsライブラリです。
アイコンに新着メッセージ数などを表示したいときに使えます。
Gmailにも未読数をアイコンで表示する機能がありますが、同様の機能が実装できます。
対応ブラウザは、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 });