ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webカムや動画までFaviconに流しちゃいます!

FaviconはWebサイトのマークとして大事な役割を担っていますが、単に同じ画像をいつまでも表示しているのでは面白みがありません。もっと活用したい、そう考える人に使ってみて欲しいのがfavico.jsです。

できること

favico.jsができることはFaviconのダイナミックな変換です。例えば、

  • バッジ表示

  • 別なアイコンに差し替え

  • 動画の表示

  • Webカムの表示

ができます。Faviconの中でWebカムを表示したいと思うケースは思いつきませんが、バッジ表示やユーザによってアイコンを変えると言うのは十分ありえるのではないでしょうか。

バッジ表示についてはアニメーションや形を指定することもできます。

デモ

バッジ表示。数はダイナミックに変更できます。
バッジ表示。数はダイナミックに変更できます。

数をアップしました。
数をアップしました。

アイコンの差し替え。
アイコンの差し替え。

動画の再生。
動画の再生。

バッジの表示位置は指定できます。
バッジの表示位置は指定できます。

カラー変更。
カラー変更。

形の変更。
形の変更。

使い方

使い方はFavicoをnewすれば良いだけです。

var favicon=new Favico({
    animation:'slide'
});
favicon.badge(1);

favico.jsを使って未読通知に使ったりすることもできそうです。最近のブラウザではタブのところにFaviconが表示できるようになりましたのでぜひとも有効活用すべきでしょう。対応ブラウザはChrome/Firefox/Operaとなっており、IE10では動作しないようです。

favico.jsはJavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。

favico.js - Make a use of your favicon

ejci/favico.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2