オリジナルの「お気に入り」アイコンにする(IEのみ)

IE5.0以上では、ウェブページをお気に入りに追加したときに表示されるアイコンを指定することができる。オリジナルのアイコンで表示されれば、他のお気に入りより目立つかも…。私が確認したところでは、Netscape7.0、Opera7.11、Firefox1.0 以上では、お気に入りのアイコンは変わらないが、アドレスバー内では指定したアイコンが表示されるようになる。

指定方法

お気に入りアイコンを指定したいページの、<head>〜</head>間に、下記のlink要素を挿入する。

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

favicon.ico はお気に入りのアイコンとして指定するアイコンのファイル名。上の例では、link要素を挿入したページと同じ場所にある favicon.ico がお気に入りアイコンとして表示される。他の場所にあるファイルを指定したい場合は、相対パスか絶対パスで指定する。ファイル名は、拡張子 ico のアイコン形式のファイルなら違うファイル名でも良いが、 favicon.ico というファイル名にしておいた方が無難。

お気に入りアイコンとして指定したファイルを、指定した場所にアップロードするのも忘れずに。

オリジナルのアイコンを作ってみよう

アイコン作成用のエディタなどもあるが、とりあえず私が普段やっている方法を紹介。

まずは、アイコンの元となる絵を描く。Windows付属のペイントを起動して、キャンバスのサイズを縦横16ピクセルか32ピクセルの正方形にしてから、絵を描いて、256色のビットマップファイルで保存。ちなみに、お気に入りアイコンは16×16ピクセルで表示される。32×32ピクセルで作った場合は縮小表示されるので、絵によっては綺麗に表示されないこともある。それがイヤなら、最初から16×16ピクセルで描いておこう。

次に、保存したファイルをアイコン形式に変換する。フリーソフトのIrfanViewで、保存したビットマップファイルを表示後、「名前を付けて保存」で拡張子 ico のアイコンファイルで保存する。

以上で、お気に入りアイコンとして使えるアイコン形式のファイルが作成できる。私はアイコンを作ることなんて滅多にないので、いつもこのパターン。絵を描いたりアイコン形式で保存したりを、もっと簡単便利にやりたいなら、アイコン用のエディタを使いましょう。アイコン専用ではありませんが、TAKABO SOFT NETWORK さんで配布されているドット絵エディタ EDGE(エッジ) はアイコン作成にもおすすめのエディタです。最近、ドット絵はすべて EDGE でやってます。

オリジナルのアイコンになるか確認

上記の「指定方法」の作業が済んだら、そのページをIEで表示して、お気に入りに追加してみよう。期待通り、自分の作ったオリジナルのアイコンになっただろうか? 普通のアイコンのままだった場合、次の原因が考えられる。

link要素の記述が間違っている。
特にアイコンファイルのファイル名と、パスなどを確認。普通、ファイル名の大文字と小文字は区別されます。
アイコンファイルがサーバにない。
指定した場所にちゃんとアップロードしましょう。
IEのせい
一度、お気に入りから削除して、IEのキャッシュもすべて削除してから、再度お気に入りに追加してみる。

特に最後の「IEのせい」は良くあることなので、何度か試してみるといいでしょう。

最後に。お気に入りアイコンはIEのキャッシュにあるものを表示しているので、キャッシュをクリアしてしまえば、普通のアイコンに戻ってしまう。また、キャッシュをクリアしなくても時間が経つと勝手に削除してしまうことがあるので、そういう時も普通のアイコンに戻ってしまう。

「お気に入り」アイコンを元に戻らなくする方法(IEのみ・非HTML)

上に書いたように、お気に入りアイコンはキャッシュにあるファイルを表示している。そこで、そのファイルをキャッシュフォルダ以外に移動して、それを表示させるようにすると勝手に普通のアイコンに戻ってしまうという現象を回避できる。

「お気に入りアイコンが元に戻るのイヤ」って人が意外と多いようなので、HTMLの小技じゃないけど元に戻らなくする方法を書いておきます。大量に処理するのは面倒だけど、ちょ〜お気に入りサイトだけ、ならそうでもないでしょう。ただし、この方法だとアドレスバーのアイコンは通常のアイコンのままになってしまいます。ちなみに、これは私の環境(WIndows2000とIE5.5)での方法・現象ですが、たぶん、WindowsXPやIE6.0でも同じだと思います。

手順1:お気に入りに追加する

まずは、お気に入りアイコンを常にそのサイトのオリジナルアイコンで表示させたいサイトをお気に入りに追加して、オリジナルのアイコンで表示されるようにする。

手順2:そのサイトのオリジナルアイコンファイルを特定し、任意のフォルダに保存する

オリジナルアイコンで表示されるのを確認したら、そのウェブページのソースを開いて、お気に入りアイコンを指定している下にあるようなlink要素を探す。******.ico がアイコンのファイル名なので、相対パスで指定されていたら http:// から始まる絶対パスになるようURLを補い、そのURLをブラウザのアドレス欄に入力して Enter キー 、移動ボタンなどでそのアイコンを表示させる。表示させたら画像上で右クリックし、コンテキストメニューの「名前を付けて画像を保存」で任意のフォルダに保存する。保存時のフォーマットはBMPでも構わない。

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

上記のやり方が良く分からなければ、もう1つ、こういう方法もある。オリジナルアイコンで表示されるのを確認したら、IEの「ツール」>「インターネットオプション」>「全般」タブの「インターネット一時ファイル」にある「設定」をクリック。クリックしたら更に「ファイルの表示」をクリック。するとキャッシュされているファイルが一覧できるので、その中からお目当てのアイコンファイルを探し、そのファイルをコピー&ペーストで任意のフォルダに保存する。探す時は種類や最終アクセス日等でソートすると見つけ易い。

手順3:お気に入りアイコンを変更する

IEの「お気に入り」にある手順1で追加したサイトへのショートカット上で右クリックし、コンテキストメニューの「プロパティ」をクリック。続いて「Webドキュメント」タブの「アイコンの変更」をクリックすると、アイコンを変更できるので、「参照」をクリックして手順2で保存したアイコンファイルを選択し、「OK」をクリックする。

備考

オリジナルのお気に入りアイコンはIEのお気に入りフォルダ内に保存しておくと都合がいいかも知れません。お気に入りフォルダ内に favicon なんてフォルダを作ってフォルダの属性を隠しファイルにしておけば、IEの「お気に入り」からはそのフォルダは見えないし、「お気に入り」を単純バックアップする時も丸ごとコピーするだけでOKですから。ちなみに、IEの「お気に入り」>「お気に入りの整理」をキーボードのシフトキーを押したままクリックすると、お気に入りフォルダがエクスプローラーで開かれるので便利ですよ。

Copyright (c) 2003-2006 Teal All Rights Reserved.