faviconの設定

スポンサードリンク

ブラウザのURL欄やリンクバー、ブックマーク、ショートカットにサイト専用のアイコンを表示をさせるFavorite iconの説明です。

ちなみに、Favorite icon(フェイバリット・アイコン/お気に入りアイコン)を略して
ファビコン-favi・con-、ファブアイコン-fav・icon-とも呼ばれる場合があります。

faviconってなんだ?

下の絵には、ブラウザのURL欄・リンクバー・ブックマーク・ショートカットに、このサイトの独自アイコン KingTopのファビコン が有ります。

faviconの説明図

この独自アイコン KingTopのファビコン はファビコンと呼ばれて、ウェブサイトやウェブページに関連付けられたアイコンのことです。

この様なアイコンがあると、名前がなくともサイトを区別できるのでリンクバーやブックマーク、ショートカットに名前が不要となり、沢山のサイトをリンクバー等に配置出来るようになりますね。

そしてなによりfaviconは
カッコいい!


ブラウザによるfaviconの表示違い

全てのブラウザで全パターンを確認することは出来ないのではっきりした事をお伝えできませんが、favicon.ico-ファビコン-はブラウザやブラウザのバージョンで立ち居振る舞いが違う場合があります。
上のfaviconの説明図では、Internet Explorer ieアイコン ではyahoo!のアイコンがInternet Explorerの汎用アイコンです。
しかし、Mozilla Firefox-モジラ ファイアーフォックス- Firefoxアイコン ではヤフーの専用アイコンはちゃんと、 yahooアイコン となっています。
この様に、ブラウザによって表示に差がありますから、あなたがお使いのブラウザで表示出来ないとしても、故障等ではありませんからご安心下さいね(^^)
ちなみに、わたしはFirefox(ファイアーフォックス)を普段のブラウザに使っています。
Firefoxはこのfavicon表示もバッチリで、いろいろブラウザ機能も豊富ですね。
Internet Explorerはリンクはブックマークは良いんですが、アドレスバーに、 KingTopのファビコン が出たり出なかったりで、どうも動作が不安定です。

faviconの作り方

手順は以下の通りで、とっても簡単。
 1.アイコンの作成
 2.アイコンをfavicon形式に変換
 3.変換したアイコンをサイトにアップロード
 4.ページにアイコン情報を記述

アイコンの作成

適当に四角い図形を作成します。最終的には16×16のサイズまで変換しましから、複雑な図形は避けましょう。
このサイトの KingTopのファビコン はWindows付属の「ソリティア カード ゲーム」の王様図柄を、クリップボード経由で、これまたWindows付属の「ペイント」に ペーストし、適当に切り取って作りました。作成したら、ファイル化して下さい。
図形のファイル形式はこの段階では特に意識する必要はありません。

アイコンをfavicon形式に変換

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">

如何でしょうか。上手く表示されましたか?

スポンサードリンク

サイトMENU

コンテンツMENU

SEO対策特集

PPC広告特集

PCスキルアップ

スポンサードリンク

サイトMENU

Copyright (C) 2007-2011 www.kingtop.jp. All Rights Reserved.