faviconを設定する
2010年4月28日
HTML講座からちょっと脱線しますが
突然faviconを設定してみよう
と思い立ち、ちょちょいと出来るだろうと思っていたら、
案外いろんなページを参考に作ったので、
バラバラに得た情報をまとめておこうと思います。
■faviconって何？
と、思う方はこのページ見ないと思いますが、簡単に言えば
ブラウザでページを表示した時にアドレスバーや、お気に入りなどに出てくるアイコンのことです。
■設定しないといけないの？
何も設定しなければそのブラウザが用意したアイコンが表示されるので
別に設定しなくてもOKです。
ただし、大手のサイトなどは設定していることも多いですし
お気に入りから探す時にもみやすいので
独自のアイコンも設定できる、と言うスタンスでしょうか。
■どうやって設定するの？
・まずはfaviconにするオリジナルアイコンを用意します。
・そして、↓こんな感じで、HTMLファイルのヘッド内に1行記述するだけ。
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
なんだ簡単。
と思いきや、初めてやる人にとってはまだまだハードルがあります。
■アイコン？？
アイコンは、windowsのデスクトップなどにゴロゴロ転がっている奴です。
フォルダならフォルダの絵、IEならｅのマークの絵
あれを自分で作る、と言うことになります。
普通に写真を撮って、小さくして保存すると、jpgやgifファイルになりますが
それではアイコンになりません。
アイコンは「.ico」と言う拡張子のファイルじゃないとダメです。
↓この画像の左が.icoのファイル。ファイル自体がアイコンで表示されています。
でも右側は普通のgifファイルなので、「gifのアイコン」が表示されています。
マイピクチャに入っていると、画像ファイルの場合、
サムネイルで表示される設定になっていることが多いので
一瞬、アイコンになっているように感じますが
デスクトップに直接置いてみると、アイコンで表示されるため
区別しやすいです。
■元になるファイルはどうやってつくるの？
これは画像ソフトの使い方になってしまうのでそこは割愛しますが、
いつも使っている画像ソフト（Photoshopなど）で
32px×32px
の画像を作ってください。
それをgifやjpgで保存したら元画像の完成です。
なんでも良いからオリジナルにしたいんだ！
と言う人は、ペイントで好きな色で塗りつぶすだけでもOKなのです。
■どうやってアイコンにするの？
拡張子が.icoじゃなきゃいけないなら、
img.gifをimg.icoに書き換えちゃえ！
と、言うわけにはいきません。そうなら楽なんですけどね。。
gifやjpgをicoファイルに変換するためのソフトが必要です。
大きく分けると3通りの方法がありました。
(1)変換ソフトを利用する。
(2)ネット上の変換サービスを利用する。
(3)Photoshopのプラグインを利用する。
頻繁にアイコンを作るのでなければ（2）で良いと思いますが
ネット上のサービスだと、英語サイトの場合が多いので
わかりにくい、なんとなく心配、と言う場合はソフトを入れた方が無難です。
Photoshopは高額なソフトなので持っていない方が多いと思いますが
持っている人はプラグインを入れておいた方が作業が簡単です。
Photoshop Elements用のプラグインも存在するみたいです。
■変換ソフトはどこにある？
私が実際にインストールしてみたのは↓こちら。
http://www.towofu.net/soft/aicon.php
このページの下の方にあるダウンロード欄から
私はzip版をダウンロードしました。
解凍してaicon.exeから起動できるので、インストール作業は不要でした。
・メニュー：ファイル－開く
で、アイコンにしたいgifファイルなどを開き、
・メニュー：ファイル－単独iconとして保存
にすれば、.icoファイルが作成されます。
■ネット上のサービスはどこ？
「ico 変換 サービス」検索したら色々出てきました。
日本語のところは
http://favicon.qfor.info/c/
というところがありましたので、使いやすそうです。
しかも無料のサービスなのに、ゴチャゴチャしてなくてわかりやすいし
リンクも強制ではないので、お勧めです。
（私はプラグインを入れたので、実際に使ってはいないんですけどね
）
■プラグイン
http://www.telegraphics.com.au/sw/icoformat.ja.html
↑
このサイトにPhotoshop用のプラグインがありました。
私は推奨されてるファイルをダウンロードしました。
・Photoshopを開いていたら、終了させる。
・ダウンロードしたファイルを解凍
・解凍して出てきたフォルダ内にある
ICOFormat.8biファイルを
Photoshopのプラグインフォルダにコピペ
（Program Filesフォルダの中の「Adobe」→「Adobe Photoshop CS3*」→「プラグイン」→「ファイル形式」）
*バージョンはご自身のバージョンに置き換えて考えてください
・Photoshopを立ち上げて
メニュー：ヘルプ－プラグインについて
に「ICO（windows ico）」と言う文字があれば、設置完了です。
たくさん出てくるので探すのがちょっと大変ですが。。
・元画像を開いて
メニュー：ファイル－別名で保存
ファイル形式の中に「ICO（windows ico）」が入っているはずなので
それを選ぶと、.icoファイルとして保存されます。
■icoファイルができたら
一度デスクトップに置いてみて、アイコンとして表示されるかチェックしてみてください。
■いよいよサイトにアップ
ファイル名はなんでも良いのでしょうが
favicon.ico
がデフォルトなので、基本はこれにしておいた方が無難です。
また、favicon.icoをアップする場所ですが
imgフォルダなどの中におかず、ルートディレクトリ（サイトの一番上の階層）に
直接置くのが無難です。
■HTMLファイルを変更
前述した「<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>」
という記述をヘッド内に書きます。
↓こんな感じになります。
<head>
<title>コーダーズブログ</title>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
</head>
imgフォルダに入れたなら
<link rel=”shortcut icon” href=”img/favicon.ico” type=”image/x-icon”>
faviconの設定について説明しているサイトの中には
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
と言う風に紹介されているところもあったのですが
rel=”icon”
だと、IEで表示されなかったのでrel=”shortcut icon”にしておいた方が
良さそうでした。
■サイトを開いてみる
アドレスバーやお気に入りに設定したfaviconが表示されていれば完成です。
表示されない！！
と言う場合は、キャッシュが原因だったりするので
インターネットオプションからキャッシュを削除して
一度ブラウザを閉じてから試すと出てくると思います。
お気に入りの方は、もう一度お気に入りに設定しなおすと表示されると思います。
それでも表示されない場合は、faviconファイルの位置など
良く確認してみてくださいね♪
私は上記の方法で、IE7、FireFox、Google chrome、operaで表示されるようになりました。
