スポンサードリンク
ブラウザのURL欄やリンクバー、ブックマーク、ショートカットにサイト専用のアイコンを表示をさせるFavorite iconの説明です。
ちなみに、Favorite icon(フェイバリット・アイコン/お気に入りアイコン)を略して
ファビコン-favi・con-、ファブアイコン-fav・icon-とも呼ばれる場合があります。
下の絵には、ブラウザのURL欄・リンクバー・ブックマーク・ショートカットに、このサイトの独自アイコン が有ります。
この独自アイコン はファビコンと呼ばれて、ウェブサイトやウェブページに関連付けられたアイコンのことです。
この様なアイコンがあると、名前がなくともサイトを区別できるのでリンクバーやブックマーク、ショートカットに名前が不要となり、沢山のサイトをリンクバー等に配置出来るようになりますね。
そしてなによりfaviconは
カッコいい!
全てのブラウザで全パターンを確認することは出来ないのではっきりした事をお伝えできませんが、favicon.ico-ファビコン-はブラウザやブラウザのバージョンで立ち居振る舞いが違う場合があります。
上のfaviconの説明図では、Internet Explorer
ではyahoo!のアイコンがInternet Explorerの汎用アイコンです。
しかし、Mozilla Firefox-モジラ ファイアーフォックス-
ではヤフーの専用アイコンはちゃんと、
となっています。
この様に、ブラウザによって表示に差がありますから、あなたがお使いのブラウザで表示出来ないとしても、故障等ではありませんからご安心下さいね(^^)
ちなみに、わたしはFirefox(ファイアーフォックス)を普段のブラウザに使っています。
Firefoxはこのfavicon表示もバッチリで、いろいろブラウザ機能も豊富ですね。
Internet Explorerはリンクはブックマークは良いんですが、アドレスバーに、
が出たり出なかったりで、どうも動作が不安定です。
手順は以下の通りで、とっても簡単。
1.アイコンの作成
2.アイコンをfavicon形式に変換
3.変換したアイコンをサイトにアップロード
4.ページにアイコン情報を記述
適当に四角い図形を作成します。最終的には16×16のサイズまで変換しましから、複雑な図形は避けましょう。
このサイトの
はWindows付属の「ソリティア カード ゲーム」の王様図柄を、クリップボード経由で、これまたWindows付属の「ペイント」に
ペーストし、適当に切り取って作りました。作成したら、ファイル化して下さい。
図形のファイル形式はこの段階では特に意識する必要はありません。
1.http://www.html-kit.com/favicon/ にアクセスして下さい。
2.「Source Image」に図形のパスを入力します。「参照」ボタンで指定も出来ます。
3.「Scrolling Text (optional) 」に必要なTextを入力します。日本語ダメです。
4.「Generate FavIcon.ico」を押します。
5.「Download Favicon」を押し、ダウンロードします。
6.ファイル名はfavicon_yyyymmdd_nnnn.zipです。
7.ダウンロードしたファイルを解凍します。
以下の様になっていると思います。extraの中はオプション設定次第です。
favicon_yyyymmdd_nnnn.zip
├favicon.ico → このアイコンを使います。
├Thumbs.db
└extra
├animated_favicon1.gif
├preview_16x16.png
├ReadMe.txt
└Thumbs.db
favicon.icoをサイトのルート(最も浅い場所)にアップします。
任意の場所も可能ですが、そればブラウザ次第です。
Internet Explorerはルート以外多分ダメです。
Firefox(ファイアーフォックス)なら、任意の場所もokです。
ここまでで、faviconがブラウザのURL欄・リンクバー・ブックマーク・ショートカットに表示されるブラウザもあります。
自サイトならキャッシュされていることが多いので、キャッシュをクリアして見て下さい。
ページの <HEAD> 〜 </HEAD>間にlnikタグを追加します。
例 <link rel="shortcut icon" href="favicon.ico">
如何でしょうか。上手く表示されましたか?
スポンサードリンク