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
});
