ネットビジネスを覚えるＷＥＢマーケティング [まぐまぐ！]

2009/02/17

【GROWメール】アドレス欄やタブに独自アイコンを表示しよう！

━━≪ GROWマガジン ≫━━━━━━━━━━━━━━━━━━━━
　　┌──┐
　　｜＼／｜アドレス欄やタブに独自アイコンを表示しよう！
└──┘
━━━━━━━━━━━━━━━━ http://www.grow-planning.com/

ブラウザで閲覧すると、
アドレス欄のＵＲＬの左はじに
アイコン画像が表示されているサイトがありますよね。

この画像は

「ファビコン（Favicon）」

と呼ばれるアイコンで、
アドレス欄以外にも、
（タブブラウザの）
タブやブックマークに登録した際のアイコンとしても使われます。

さらに、

「アドレス欄に表示されているアイコン」や
「ブックマークの1項目」を

デスクトップにドラッグすると、
デスクトップ上にそのページ（URL）へのショートカットができますね。
このアイコンにもよく使われています。

たくさんのページを同時に閲覧している場合、
このアイコンの存在によってサイトの存在が強調され、
より印象に残りやすくなる効果が期待できます。

ウェブサイトの目印にもなるアイコン
「ファビコン」は、
とても簡単に作成・使用できます。

ぜひ活用してみて下さい。

今回は、
この「ファビコン」の
作り方・使い方をご紹介致します！

■□ファビコンの正体：普通のアイコンファイル

「ファビコン（Favicon）」とは、

「Favorite Icon（お気に入りアイコン）」

の略です。

「お気に入り」とは
Internet Explorerでの
「ブックマーク」のことです。

つまり、
ファビコンとは
「ブックマークのためのアイコン」のことです。

そして、
この「ファビコン」の実体は、
Windowsで一般的に使われるアイコンファイルです。

Windows上で、
アプリケーションなどに用意されている
アイコンと同じ形式のファイルです。
簡単に作成することができますし、
簡単に使うことができますよ。

■□メジャーなブラウザが対応

「ブックマーク」ではなく
「お気に入り（Favorite）」という言葉が

元になっていることからも分かるとおり、
元々はInternet Explorerの独自機能でした。
現在でも特に正式な規格になっているわけではありませんが、

Firefox・Opera・Safariなど、

メジャーな最新ブラウザのほとんどがサポートしています。

元々は、
「お気に入り」に登録した場合のみに利用されるアイコンでした。
ですから、
IE6では、
ただウェブページにアクセスしただけでは
ファビコンは表示されません。
「お気に入り」に登録して、はじめて表示されます。

しかし、
後からファビコンをサポートした各ブラウザは、
たいていはウェブページにアクセスしただけで
アドレスバーやタブ上にファビコンを表示しますね。
IE7以降では、
他のブラウザに追従して、
アクセスしただけでファビコンを表示するようになりました。

■□ファビコンを使うには

では、
実際にこのファビコンを表示するには、
HTMLのhead要素内にlink要素を1行記述して、
アイコンの所在を示すだけです。

例えば、以下のように記述します。

　<link rel="shortcut icon" href="favicon.ico">

上記の記述では、
「favicon.ico」というアイコンファイルを
そのウェブページに対するファビコンだと指定しています。

FirefoxやOperaなどでは、
GIF画像・PNG画像・JPEG画像・BMP画像を指定しても
ファビコンとして機能します。
しかし、
IEでは拡張子「.ico」のアイコンファイルでないと機能しませんので、
ご注意を！

異なるディレクトリにある場合は、
リンクを記述する際などと同様に、
相対パスや絶対パスで存在場所を記述します。
例えば、
1つ上の階層を指定したいなら、次のように記述します。

　<link rel="shortcut icon" href="../allabout.ico">

※IEでは、ローカルにあるHTMLのファビコンは読まないようです。
　ローカルで表示を確認したい場合は、
　FirefoxやOperaなどを使いましょう。
　もしくは、ファイルを実際にサーバにアップロードして、
　ウェブ上で確認して下さい。

■□もっと楽な方法は？

上記の指定方法を使えば、
ページ単位でファビコンを指定できます。
しかし、
すべてのページに同じ記述を加えるのはちょっと面倒ですね。

たいていはウェブサイト全体で共通のファビコンを
1つ指定できれば十分でしょうね。
その場合には、
もっと簡単に一括してファビコンを指定する方法が使えますよ。

※実はこちらの一括指定する方法が本来の方法だと言えます。

■□HTMLにlink要素をいちいち書かなくても良い

ファビコンは、
ウェブサイトの最上階層に
favicon.ico というファイル名で置けば、
そのサイト内のすべてのページに対して
有効なファビコンになります。

その場合、
HTML内にファビコンの位置を記述する必要はありません。

ファビコンをサポートしているブラウザは、
ウェブページにアクセスすると同時に、
favicon.ico というファイルが存在するかどうかも一緒に確認します。
見つかれば、
その favicon.ico をファビコンとして表示します。

ですから、
HTMLに一切記述を加えることなく、

ただ favicon.ico というファイル名で

アイコンファイルを置くだけでファビコンを表示可能ですよ。

とても簡単ですね！
たいていのサイトは、
この方法でファビコンを表示させています。

※この方法は、ローカルでは確認できません。
　表示確認を行う場合はサーバにアップロードして下さい。

■□アイコンファイルを作るには

アイコンファイルを作るには、
任意の画像をアイコンファイルに変換してくれる
サービスやソフトを利用するのがお手軽だと思います。

ここでは、
Web上のアイコン変換サービスを使う方法と、
アイコン変換フリーソフトを使う方法を一部ご紹介します。

【１】Web上のアイコン変換サービスを使う

ウェブ上には、
任意の画像ファイルをアイコンファイルに変換してくれる
サービスがいくつかあります。
その中の1つである

「FavIcon from Pics」

を使う方法を紹介します。

使用方法は簡単で、

「Source Image」欄に画

像ファイルを入力して、

「Generate Favicon.ico」ボタンを

クリックするだけです。

すると、
アイコンファイルの生成が行われ、ダウンロードできるようになります。

「Download Favicon」ボタンを
クリックすると、
生成されたファビコンがダウンロードできます。
アイコンファイルは、
ZIP形式で圧縮された状態になっているので、
ダウンロード後、展開して下さい。
展開できたら、
favicon.icoファイルを望みのサーバにアップロードしましょう。

このサービスで生成されたアイコンファイルは、
1つのアイコンファイルの中に

「16×16サイズの小さなアイコン」と
「32×32サイズの大きなアイコン」を

含んだマルチ形式のアイコンファイルになっています。

ブラウザ上で表示されるアイコンは
16×16の小さなアイコンですが、
デスクトップ上に表示させると
32×32サイズのアイコンが使われます。

元の画像を16×16サイズで作成すると、
デスクトップ上に表示された際に
（拡大されるため）粗く見えてしまいますが、
32×32サイズで作成しておけば、
デスクトップ上でも綺麗に見せることができますよ。

【２】アイコン変換フリーソフトを使う

任意の画像をアイコンに変換したり、
アイコンを任意の画像に変換したり、
さらにはDLLファイルなどからアイコンを抽出したりもできる

「＠icon変換」

というフリーソフトがあります。

このソフトを使えば、
任意の画像を簡単にアイコンファイルにすることができますよ。

このソフトでは、

「16×16サイズの小さなアイコン」

だけが含まれたアイコンファイルも作成できますし、
1つのアイコンファイルの中に

「16×16サイズの小さなアイコン」と
「32×32サイズの大きなアイコン」を

含んだマルチ形式のアイコンファイルを作ることもできます。

小さなアイコンだけだと、
デスクトップなどに置かれた際に、
拡大されて粗く見えてしまいますよね。

大きなアイコンだけだと、
ブラウザ上で表示される際には自動的に縮小されるため、
場合によっては内容がつぶれて見えることもありますね。

このソフトを使って、

小さなアイコンと大きなアイコンの

両方を自分で作っておけば、
どちらの場合でも望み通りの綺麗な状態でア
イコンを表示させることができますよ。

Internet Explorerもタブをサポートしたことで、
今後はタブブラウザを使った閲覧が主流になるでしょう。

タブブラウザでは、
同時にたくさんのページを開いて閲覧できるメリットがある反面、
開きすぎると、
どこに何のページがあるかが把握しにくくなる問題もあります。

そんなとき、
独自のファビコンが表示されていれば、
他の多くのウェブサイトに埋もれてしまうことが避けられます。

ぜひ活用してみて下さいね☆

グロママでした！！

http://www.grow-planning.com

===================================================================

　　◆◇インターネットにアナタだけのお店を持ちましょう！◇◆
　　　　
　　　　-->> http://www.grow-planning.com/p01.html <<--

-------------------------------------------------------------------

◆━━━━━━━━━━━━━━━━━━━━━━━━━━━◆

毎日NEW情報をてんこもりにご紹介!!
読まなきゃそん♪そん♪ですよ(〇^∀')O*.b

最後までご覧いただきまして本当にありがとうございます(*:U:*)ノ♪*゜

それではまた、次回のメルマガでお会いしましょう！(^▽^)ノ☆彡

***********************************************************
札幌市中央区南1条西13丁目4-52山新ビル4F
株式会社グロウプランニング
URL：http://www.grow-planning.com/