MB-Support

パソコン初心者のサポートページ

Meta:ホームページのアイコンを登録する favicon

 ブラウザに表示されるアイコンと、デスクトップやエクスプローラーに表示するアイコンの記述方法と作成方法。 Windows Vista の 256 × 256 サイズも含めたマルチアイコンを、無償ツール [ IcoFX ] で作成する方法を紹介します。


ブラウザでホームページにアクセスした時、アドレスバーの左に表示されるアイコンを favicon(ファビコン)と呼びます。 個人的な予想ですが、favorite(フェイバリット [お気に入り])と icon(アイコン [像])が組み合わさったものかと思われます。 この favicon を登録する方法は、<head>〜</head> に meta タグを記述します。

<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon" />

また、以下のような書き方でも認識されます。

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

申し訳ありませんが、正確な記述方法が分かりません。また、正確に表示できるかどうかの保証はありません。これは、ブラウザによって扱い方が異なるからです。

肝心のアイコンを保管する場所は、トップページと同じディレクトリとなりますが、相対パスと絶対パスで favicon のアドレスを指定するので、別の場所に保管されていても呼び出せる事になります。 ブラウザによっては、自動的にトップディレクトリを探すと予想されるので、トップページと同じディレクトリに保管した方が無難です。

アドレスバー、タスクバー、または、ブックマークの左に表示されるアイコン(ブラウザが対応していれば)は、16 px × 16 px の favicon です。単純に考えれば、サイズ 16 px × 16 px のアイコンを作成すれば良いのですが、それ以外のアイコンとも関係しています。



例えば、ブラウザのアドレスバーからデスクトップにドラッグアンドドロップした時、ブックマークアイコンがデスクトップに作成されます。 これをダウブルクリックすると、OS で標準に設定されたブラウザが起動して、ブックマークに埋めこまれたアドレスにアクセスしますが、ここで表示されるアイコンは、OS の設定によりいくつのサイズが使われているか不明ですが、16 px × 16 px より大きいはずです。



favicon として、16 px × 16 px しか用意していないと、右の様にデフォルトのアイコン内に小さなアイコンが表示されます。 もし、上のアイコンサイズで表示したいならば、複数のサイズの favicon を用意する必要があるわけです。 もちろん、そこまでこだわる必要もなく、実際にドラッグアンドドロップでこのアイコンが表示されるとも限りません。 これは、ブラウザのキャッシュを利用しているため、そうなる場合もありますし、ドフォルトの IE のアイコンが表示される場合もあります。 また、登録した時はサイトが用意したアイコンが表示されていても、しばらく経つとIEのアイコンに変わってしまう場合もあります。 Favicon のキャッシュが作成されるタイミングは不明で、そのトリガーとなるのはブックマークに登録した時かと思われます。 しかし、現在ではアドレスバーやタブバーに表示されるのがブラウザの標準機能となりつつあるので、そのタイミングはブックマークだけとは限らない様です。 それと同時に、昔はサーバーのログに残る favicon の取得履歴から、ブックマークしてくれた数を判断する目安とされていました。 今では、favicon はブックマーク以外でも表示されるため、お気に入りに登録してくれたユーザー数やページ数を判断する事はできません。



IcoFX:favicon.ico の作り方

さて、Favicon の作り方へと進みますが、ここでは無料で提供されている便利なツールを使ってみたいと思います。 今回利用したのは [ IcoFX ] と呼ばれるツールです。アイコエフエックスでしょうか? 読み方は分かりません。まず、これをダウンロードしてコンピューターにインストールします。

IcoFX - The Free Icon Editor



[ IcoFX ] を起動して、上部メニューの [ Options ] → [ Languages ] を左クリックして、さらに [ Japanese ] を左クリックします。 これでメニューが日本語化されます。既存のファイルから読み込む事もできますが、簡単に一から作成する方法を紹介します。



アイコンの元になる画像を作成します。上部メニューの[ファイル]→[新規]を左クリックします。



[True Color + アルファチャンネル( 32 ビット )]、[ 256 × 256 ] を選択して、[ OK ] ボタンを左クリックします。



これで作成する準備ができました。拡大縮小を駆使して自分のディスプレイサイズで描きやすいものを選択します。 なぜ、256 × 256 を選択したかと言うと、とりあえず Windows Vista の特大アイコンを考慮しました。



Windows XP の環境では、とりあえずブラウザで使う 16 × 16 とデスクトップやエクスプローラーで使う 32 × 32 、48 × 48 で間に合いました。



Windows Vista からは特大サイズに変更可能で、拡大縮小にバーを利用するため、その中間表示も可能になります。 全てのサイズを制作する必要はなく、また、制作できたとしても、それを利用しているとは思えません。 特大サイズの 256 × 256 を最大サイズとして、それ以下のアイコンサイズにユーザーが変更された場合、元になるアイコンがより小さいものに変化されると思われます。 Windows XP を意識してアイコンサイズを決定すると、Windows Vista では引き延ばしが発生する可能性が多くあります(もちろん、利用するユーザー次第です)。 つまり、最大サイズの 256 × 256 を作成しておけば、引き延ばしによる画質の劣化を防げます。



[IcoFX] は無償ですが、Windows に付属するペイントよりも高機能です。 しかし、ここではペイントと同じ機能を使います(こだわりたいのであれば、使い方をマスターします)。 まず、ツールの鉛筆を選択して、先ほど作成した 256 × 256 サイズのファイルに一本書きします。この時、途中で線が切れてしまうと次の事ができません。



次に、ツールの塗りつぶしアイコンを左クリックして、一本書きした内部を左クリックします。すると、内側が塗りつぶされます。 ツールのアイコンは、マウスのポインターをのせれば、その機能がポップアップします。



このツールは、ぼかしやグラデーションなどが使えますが、とりあえず、がんばって作成します。 右は鉛筆と塗りつぶしだけで作成したものです。それ以上は管理人には分かりません。また、ブラウザで利用する favicon としては無意味かも知れません。 これらの高機能な処理は、デスクトップやエクスプローラーで利用するアイコン用にメリットがあります。



画像が完成したら、上部メニューの [アイコン] → [イメージから Windows アイコンを作成] を左クリックします。



XP 色の 256 × 256 をチェックして、[OK] ボタンを左クリックします。 もし、ブラウザで利用する favicon だけでシンプルに決めるのであれば、16 × 16 だけをチェックして、残りのチェックは全て外せばよいでしょう。 アイコンを作成する数が増えれば、それだけサーバーに負担がかかるかも知れません。



256×256サイズの画像から、先ほどチェックしたサイズ数だけアイコンが作成されました。



上部メニューの[ファイル]→[名前を付けて保存]を左クリックして、デスクトップに保存します。



保存する名前は [ favicon ] とします。



以上でホームページに利用する favicon が完成しました。複数のサイズのアイコンを作成しましたが、favicon.ico として作成されるのは一つです(マルチアイコン)。これを、トップページと同じ場所に保管します。または、転送します。

実際にこれらのアイコンが反映されるタイミングは、先にも書きましたが不明です。 ホームページを閲覧する頻度やブックマークする頻度にもより異なりますが、管理人の場合は 3 日ほどで落ち着きました。 ブラウザだけではなく、デスクトップやエクスプローラーにもキャッシュが有効となるため、反映するのには時間がかかります。 全てのキャッシュをクリアすれば良いと思われますが、それはそれで他の日常作業の利便性が低下します(一時的ではありますが)。



反映されるまで待てないならば、デスクトップにブックマークを作成して、アイコンを右クリック、プロパティを左クリックします。 プロパティの [ Web ドキュメント ] タブを左クリックして、さらに、[ アイコンの変更(C) ] を左クリックします。 [ アイコンの変更 ] パネルで、[ 参照(B) ] ボタンを左クリックして、作成した favicon.ico を指定します。以上でそのブックマークアイコンに限り、favicon が適用されます。 これをエクスプローラーに移動すれば、拡大縮小で意図した画像になっているか確認する事ができます。

同一フォルダーに同一の拡張子と名前のファイルは作成できません。いくつかの favicon を試して作成するには、フォルダーを新規作成して、その中に蓄えるようにしましょう。例えば、デスクトップに favicon.ico を作成して、強制的にブックマークアイコンを変更したとします。 次に、デスクトップの favicon.ico を新しい favicon.ico に上書き保存しても、アイコンは正しく作成されるものの、昔のアイコンのまま表示される現象に遭遇しました。 これも、やはりキャッシュの仕業かと思われます。新規フォルダーを作成してディレクトリを変更する事で、制作時のこれらのトラブルを回避する事ができます。 最終的に作業が完了したならば、いらない favicon.ico を削除してしばらく様子をみましょう。キャッシュが上書きされ、正常状態に戻るはずです。

Windows XP 用アイコン作成法




戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項