【HTML】ブラウザやタブに表示される小さなアイコン「favicon（ファビコン）」の作り方

【HTML】
ブラウザやタブに表示される小さなアイコン「favicon（ファビコン）」の作り方

Webを見ている時に、
ブラウザやタブに表示されるタイトルの左側にある小さなアイコンを「favicon（ファビコン」と言います。

表示させるには、「ico」拡張子のファイルを作成して、
サーバーにアップロード、HTMLファイルに設定を記述する必要があります。

INDEX

■ 「favicon（ファビコン）」とは
■ 「Favicon（ファビコン）」の作り方

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

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

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

「favicon（ファビコン）」とは

「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