favicon API javascriptライブラリ [jQueryプラグイン]

Favicon APIのjavascriptライブラリですが、jQueryのプラグインバージョンも作ってみました。リンクに貼られた任意のCSSのclassにFavicon（フェイバリットアイコン、ファビコン）をPNG画像として表示するものです。よろしければご利用ください。あんまり自信がないので、ツッコミ歓迎です。

Download : Favicon API javascriptライブラリ [jQueryプラグイン版] ver0.0.2 MITライセンス

上記よりダウンロードできます。そのままブラウザに表示されてしまう場合は右クリックからリンク先を保存してください。以下Favicon API javascriptライブラリ [jQueryプラグイン] を「プラグイン」と略します。注意としては以下があります。

1. テキストリンクのみの対応です（まぁ別に使う事はできますが、CSS的にちょっと厳しいかなっと）。
2. jQueryを利用する事が前提です。

また、jQueryを利用しない通常版はこちらをご利用ください。→「favicon API javascriptライブラリ | jigelog」

使い方手順

1. ダウンロードした「プラグイン」を任意の場所にアップロードする
2. 使いたいHTML(もしくはjavascript)ファイルを修正する

1.ダウンロードした「ライブラリ」を任意の場所にアップロードする

上記よりダウンロードしたライブラリを任意の場所にアップロードする。（当たり前ですが・・・）HTTPサーバの読める場所＋公開できる場所にしてください。ここでは、「/path/to/jquery.faviconapi.js」としてアップロードしたとして仮定します、環境に合わせて読み替えてください。

2.使いたいHTMLファイルを修正する

HTMLヘッダ部分に以下を追加します。上のjqeury.jsの方はjQuery本体を表しているので、もう既にjQueryを利用している場合は必要ありません。

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/jquery.faviconapi.js"></script>

次にjQueryの$()を利用して、設定したいプロパティにfaviconapiメソッドを使ってfaviconを表示するようにします。windowが読み込まれた場合に「favicon_s」というclass名のaタグリンクになんのオプションも指定せずに単純に設定する場合は以下のような感じ。

$(document).ready(function(){
        $('a.favicon_s').faviconapi();
});

faviconapi()メソッドは配列にてオプションを指定する事ができます。例えばfaviconのサイズを小さいサイズ(s) 12px x 12px にして、背景色を赤くする場合は以下のようになります。オプションに関しては下の方にまとめましたので

$('a.favicon_s').faviconapi({
    size:'s',
    backgroundColor:'#FF0000' // red
});

各オプション

各オプションを列挙します。

size:

Faviconのサイズ、mは「16px x 16px」のサイズ。sは「12px x 12px」のサイズ(デフォルト「m」)

def:

設定したリンク先のサイトにFaviconが無かった場合の画像を選べます、fは「ファイル」。eは「地球」。cは「鎖」。wは「白画像」(デフォルト「f」)

margin

padding

backgroundColor

backgroundPosition

この4つの値はリンクに設定するCSS。注意はbackgroundColor位かな？

更新履歴

ver 0.0.2 – 2007/11/22

複数表示でのバグの修正。thanks (power source*)

ver 0.0.1 – 2007/11/12

とりあえず、公開

• Favicon API
• jQuery