「Favicon（ファビコン）」は、
「favorite icon（フェイバリット・アイコン）」の略称で、
「お気に入りアイコン」という意味の言葉を簡略化して言葉。

ファイル形式は、
従来の「ico」拡張子ファイルの他に、
「GIF」「PNG」ファイルもサポートしているブラウザが多くなっている。

従来は、「Favicon（ファビコン）」画像へのアクセスを計測する
などの用途で使用されていたこともあったが、
現在は、形式的なものとなっている。
サイトの識別がしやすいなど、
「Favicon（ファビコン）」を利用するメリットは現在もある。
「Favicon（ファビコン）」を表示することで、
「お気に入り」などに登録された時に、
視認性が高まり、目立つことによって、再訪問率が高くなるとも言われています。
「Favicon（ファビコン）」を使用するデメリットはないので、
サイトに設定しておくのが良いツール。

Back

「Favicon（ファビコン）」の作り方

「Favicon（ファビコン）」の画像は、
拡張子を「ファイル名.ico」にする必要がありますが、
現在は、
・「GIF」画像の「ファイル名.gif」拡張子
・「PNG」画像の「ファイル名.png」拡張子
などもブラウザによっては、利用できるようになっている。

「Favicon（ファビコン）」として全ブラウザが対応しているのは、「ファイル名.ico」拡張子なので、
「ico」画像を作成するのが無難です。

「Favicon（ファビコン）」のプロパティ

プロパティ	説明
拡張子	ファイル名.ico ファイル名.gif ファイル名.png
サイズ	16px × 16px

「Favicon（ファビコン）」の作り方は、
・ファビコンを無料でダウンロード
・「Favicon（ファビコン）」画像への変換サイトで画像変換する
・自分で作る
などの方法があります。
ネットで「Favicon（ファビコン）」と検索すると、
ダウンロードサイトか、画像変換サイトが出てきます。

画像編集ソフトで、
オリジナルの「Favicon（ファビコン）」画像を作ることもできます。
Adobe社の「Photoshop」に「プラグイン」を組み込むことで、
「ico」拡張子での保存ができるようになります。

「Photoshop」に「ICO Format 」プラグインを組み込む方法

「Photoshop」で「ico」拡張子で保存するには、
プラグインを組み込む必要がある。
今回は、「telegraphics.com」の「ICO Windows Icon/Favicon」PlugInを組み込む方法です。

「ICO Windows Icon/Favicon」PlugInを組み込む手順

「ICO Windows Icon/Favicon」PlugIn Official Web:「http://www.telegraphics.com.au/sw/」
から「ICO Windows Icon/Favicon」をダウンロードする。
↓
ダウンロードした「ICOFormat64.8bi」というようなファイルを、
「C」ドライブ→「Program Files」→「Adobe」→「Photoshop」→「Plug-ins」→「File Formats」
に保存する。
「File Formats」がない場合はフォルダを作成する。
↓
「Photoshop」でファイル保存するときに「ico」拡張子を選択できるようになっていれば完了。

「ico」拡張子ファイルが作成できたら、
サーバーに設置して表示されることを確認する。

Back

「Favicon（ファビコン）」の設定方法

「Favicon（ファビコン）」を設置する方法は、・「favicon.ico」による方法
・HTMLファイルに「Favicon（ファビコン）」の記述をする方法
などがある。

「favicon.ico」による方法

「favicon.ico」による方法は簡単で、
サーバーの「ルートディレクトリ」に、
「favicon.ico」というファイル名で、「favicon.ico」を設置しておくだけ。
HTMLファイルへの記述指定が無くとも、「Favicon（ファビコン）」として認識してくれる。
明示的に指示をしたい場合は、
「HTMLファイルに「Favicon（ファビコン）」の記述をする方法」を参照。

HTMLファイルに「Favicon（ファビコン）」の記述をする方法

HTMLファイルに「Favicon（ファビコン）」の記述をするには、
まず、サーバーに「Favicon（ファビコン）」の「ico」拡張子ファイルをアップロードする。
その後、ホームページのすべてのHTMLファイルの「head」タグ内に、

という「Favicon（ファビコン）」の指定コードを記述する。

記述後にWebを確認すると、「Favicon（ファビコン）」が表示されているはずです。

レンタルサーバーによって、対応が異なるようなので、
表示されない時は、レンタルサーバーの設定どおりにしてください。

Back