favicon API javascriptライブラリ

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

Download : Favicon API javascriptライブラリ ver0.0.3 MITライセンス

上記よりダウンロードできます。そのままブラウザに表示されてしまう場合は右クリックからリンク先を保存してください。以下Favicon API javascriptライブラリを「ライブラリ」と略します。また、テキストリンクのみの対応です（まぁ別に使う事はできますが、CSS的にちょっと厳しいかなっと）。

また、jQueryのプラグイン版も作りました。そちらをご希望の方はこちら→favicon API javascriptライブラリ [jQueryプラグイン] | jigelog

使い方手順

「ライブラリ」をサイトにあわせて修正する
ダウンロードした「ライブラリ」を任意の場所にアップロードする
使いたいHTMLファイルを修正する

1.「ライブラリ」をサイトにあわせて修正する

ライブラリ本体をお使いのサイトの環境にあわせて修正してください。ライブラリをエディタで開いて以下の部分の値(オプション)を変更します。

// ---------------------------------------------------------+
// Please change the following.
{
name: 'favicon_m',
size: 'm',
def: 'f',
margin: '0 0 0 3px',
padding: '0 0 2px 19px',
background_color: '',
background_position: '1px 1px'
},
{
name: 'favicon_s',
size: 's',
def: 'f',
margin: '0 0 0 2px',
padding: '0 0 2px 16px',
background_color: '',
background_position: '1px 1px'
}
// ---------------------------------------------------------+

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

name:: Faviconを表示させたいリンク(a タグ)のclass名。(0.0.3より複数クラスに対応できます。)
size:: Faviconのサイズ、mは「16px x 16px」のサイズ。sは「12px x 12px」のサイズ(デフォルト「m」)
def:: 設定したリンク先のサイトにFaviconが無かった場合の画像を選べます、fは「ファイル」。eは「地球」。cは「鎖」。wは「白画像」(デフォルト「f」)
margin
padding
background_color
background_position: この4つの値はリンクに設定するCSS。注意はbackground_color位かな？

また、内容を見ていただければ分かるとは思いますが、複数のcssクラスに対応しています(例えば上記では「favicon_m」「favicon_s」の両方のクラス名に対応しています。)。「{～}」のブロックを複数作る事で複数クラスに対応できます。（注意：最後の｛～｝のブロックには最後の「,」を付けないようにして下さい。Firefox等では動作しますがIE等では動作しません。）

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

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

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

HTMLヘッダ部分に以下を追加します。

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

更に、faviconを表示したいリンク(a タグ)にCSSでclassを追加します。ここでは「favicon_s」というclassを追加してます。以下例(class=”favicon_s”)。class名は上記で説明した(「ライブラリ」をサイトにあわせて修正する)部分で設定したclass名をつけてください。

<a href="http://favicon.aruko.net/" class="favicon_s" rel="nofollow">リンク</a>

ま、こんな感じかな。例えばYahoo!をリンクした場合は以下のようになります。

Yahoo!をリンクした場合の例

Yahoo!

<a href="http://www.yahoo.co.jp/" class="favicon_s" title="Yahoo!" rel="nofollow">Yahoo!</a>

更新履歴

ver 0.0.3 – 2007/01/15: 複数のcssクラスに対応。
ver 0.0.2 – 2006/12/13: 特に0.0.1と変わっていないが、ライセンスの追加等を行った。
ver 0.0.1 – 2006/12/11: とりあえず、公開

Favicon API