●FAVICONとは ↑ Internet Explorer5以降の「お気に入り」で表示される小さなアイコン これが「FAVICON」です。 Netscape7、Opera7ではWEBページと同時に表示されます。 (ただしブックマークしてもIEのようにブックマーク自体にFAVICONの表示はされません。) ※ IE4、NN4.x、Opera6やDreamcastでは表示されません。 FAVICONに使う画像は以下のサイズと色数になります。 縦１６×横１６の１６色 縦１６×横１６の２５６色 縦３２×横３２の１６色 縦３２×横３２の２５６色 32×32で作っても「お気に入り」で表示されるサイズは16×16に縮小されて表示されます。 「favicon.ico」のように拡張子が「*.ico」となります そこで重宝するのが「アイコン作成ツール」です！ 私が使っているのはフリーウェアの DotWork 2.30 【Light Airs (suutaさん)】  16×16の16色での作成画面 私がいくつか試したツールの中では１番使いやすく、 とても高機能なオススメのツールです。 このソフトは元となる写真などの画像からの変換でFAVICONが簡単に作れます。 もちろん普通に最初から描いて作る事も出来ます。 ”効果”で「ぼかし」や「エンボス」などの画像処理もできます。 こうして作った画像は「favicon.ico」にして保存します。 ●FAVICONを表示させる準備 さきほど「DotWork 2.30」でつくったFAVICONを 最初のindex.htmlのあるディレクトリィ(フォルダ)に ＦＴＰ転送します。 ※自分のＨＰで最初に表示する index.html と 同じ場所に置かないと表示出来ないので注意！ ちゃんと転送できたのか確認する為に これで index.html 以降のページを「お気に入り」にしたときに 作ったFAVICONが表示されるようになります。 <LINK REL="SHORTCUT ICON" href="favicon.ico"> このように入れてみてください。 これでも表示されない時は このページの一番下にある対策方を 参考にしてください。 ●ページ毎にFAVICONを表示させるタグ 先ほどの例だと、どこのページも「お気に入り」に入れると 「全て同じFAVICON」になります。 これを「ページ毎に指定したFAVICONに変更」するには <LINK REL="SHORTCUT ICON" href="sample.ico"> このようにfaviconのファイル名「*.ico」を指定してから このタグを<HEAD>〜</HEAD>の間に入れましょう。 ◆例◆
favicon2.ico とか複数作成して目的別に表示させる事ができます。 Natscape7、Opera7に表示をさせたい時には不可欠のタグです。 ※●IEでFAVICONが表示されないときは… 作ったFAVICONを転送して、ブラウザで直接表示をして確認したのに 「お気に入り」で表示されない時があります。 (作り直して転送しても古いFAVICONしか表示されない時もあり。) 通常、IEは最初に表示したページのFAVICONを自動で探すのですが FAVICONを転送してもダメな時が多々あります。 これはIEのキャッシュによる仕様(クセ？)のようなので 以下の手順で表示されると思います。 １．FAVICONを表示させたいページが、すでに「お気に入り」にある時 一度その「お気に入り」を消してIEを閉じ、 再びIEでさっきのページを履歴で戻り、「お気に入り」登録すると 表示される時もあります。 ２．それでもダメならWINDOWSを再起動する。 WINDOWSを再起動してから その後に再び「お気に入り」に登録。 (私の時はこれで表示されました。) これでもダメだったら… もしかしたら、 サーバー自体がFAVICONに対応していないのかもしれません。 |