概要

リンクの内容からファビコン (Favicon)のURLを自動判断し、画像を挿入します。

ダウンロード

基本的な使い方

.gpFavicon()を実行するとその中からリンクを探してURLを解釈し、ファビコンを表示させます。画面全てのリンクを対象にする場合は$(document)に対して実行します。

$(document).gpFavicon();
$(elem).gpFavicon();

また個別のリンクに対して .gpFavicon()を実行すると、そのリンクだけを対象にファビコンを表示します。

$(link).gpFavicon();

デモ

デモ1 : 基本的なもの

Demo 1

  • 各リンクにファビコンを表示させます。
  • ファビコンが見つからない場合はデフォルトのアイコンを表示します。
  • 自身のサイトにはファビコンは表示しません。

リファレンス

.gpFavicon([settings])

  • settings … {Object} 設定。以下のキーと値を持てる:
    • after … {boolean} trueにするとリンクの後ろにファビコンを表示する。初期値はfalse。
    • classes … {String} 画像に追加するクラス。半角スペースで区切って複数指定できる。
    • inside … {Boolean} trueのとき、リンク要素の子としてファビコンを追加する。一方falseのときは、リンク要素の前後ファビコンを追加する。
    • self … {Boolean} trueにすると自身のサイトのリンクにもファビコンを追加する。初期値はfalse
    • url … {String} ファビコンが見つからなかった場合に使用する画像のURL。省略時はData URIを使ったJS埋め込みの画像を使用する。

gpfavicon-ignore

このクラスが設定されているリンクは、jQuery.gpFaviconの対象外になります。

<a class="gpfavicon-ignore" href="https://ginpen.com">No Favicon</a>

その他

ファビコンのURLについて

リンク先のホスト直下の/favicon.icoを探します。リンク先HTMLのlink要素を解釈しているわけではありません。

Data URIについて

Data URIとは、ファイルを文字列に変換する仕組みです。jQuery.gpFaviconでは、この方法でデフォルトのアイコンを内部に保持しています。

この仕組みが使えるのは、IEではバージョン8からです。IE 6, 7を想定する場合はsetting.urlに画像ファイルのURLを指定するようにしてください。

ライセンス

  • MIT License
    • 無償で利用できます。商用利用も可能です。
    • 転載や改造、再配布が可能です。
    • コード内に記載の著作権表示は変更できません。
    • どのような問題が発生しても、一切の保証はありません。

利用時に連絡は不要ですが、もしご連絡頂ければ、利用実績として掲載させて頂くかもしれません。

対応ブラウザー

  • IE 6以上(ただしIE 6, 7はsettings.urlを必ず指定する)
  • Firefox
  • Chrome
  • Safari
  • Opera

リポジトリ

更新履歴

2011/10/20 – 1.0
  • 公開