初心者でも簡単にできるファビコンの作成と設置方法

ファビコンの作成と設置

ファビコンとは、ブラウザのタイトルやブックマークのシンボルに使われる小さなアイコンのことです。ブラウザのタブやアドレスバーに表示されています。

ファビコンの規格

ファビコンはウェブサイト作成時に設置しておきたいアイテムですが、 このファビコンにはいくつかサイズの規格があります。 よく利用されるのはタスクバーに表示されるサイズ16ピクセル×16ピクセル、デスクトップのショートカット用のサイズ32ピクセル×32ピクセルです。またスマホのウェブクリップアイコンのサイズは114ピクセル×114ピクセルとなります。

.icoファイルでは単独のサイズの画像だけでなく、サイズ違いの画像をひとつにまとめるマルチアイコンという形式も利用可能です。

ファビコンのファイル形式と作成方法

ファビコンは.ico形式で作成します。gifやpng形式でも利用できますが、IEで表示されない場合もあるので.ico形式に変換する方が無難です。

画像ファイルを.icoファイルへ変更するには、アイコンコンバーター（http://app.tree-web.net/icon_converter/）などのフリーのWebサービスでも作成することができます。また、複数のサイズのアイコンファイルをひとまとめにするマルチアイコン形式を利用する場合には、複数マルチアイコンを作ろう！（http://ao-system.net/multiicon/）というサービスで複数の.pngなどの画像をまとめてマルチアイコンファイルを作成することが可能です。

直接画像を.ico形式で作成、保存するには、GIMPなどのico形式に対応する画像編集ソフトを使用するか、Photoshopでは「ICO (Windows Icon) Format」（http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat）などの対応プラグインを導入しておくと便利です。GIMPではファイル作成と同時にレイヤーを使用してマルチアイコン化ができます。

ファビコンの設置方法

favicon.icoを作成したら、サーバーのルートディレクトリに設置します。するとサイトすべてでアイコンが表示されますが、HTMLで表示を指定しておくこともできます。

各HTML毎に違ったファビコンを使用したい場合やルートディレクトリに設置できない場合などは以下のようなコードをヘッダ内に追加すると.icoファイルを指定します。

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

最適なファビコンファイルとは

デザインで留意したいこと

ファビコンが最も表示される機会が多いのはウェブブラウザ上での16ピクセル×16ピクセルというサイズですので、この小さなサイズでもウェブサイトの内容を端的に表すことのできる画像を選ぶことが得策です。

有名サイトのファビコンをチェックしてみると、

このように多数のタブを開いていてタイトルが見えない場合でも、ファビコンの表示だけでサイトが判別できるほどわかりやすい画像を使用しています。この表示の大きさでもしっかりと判別できるデザインで作成を行いましょう。

ファビコンの透過処理

ファビコンの画像を作成する際には、背景の透過処理をしている場合としていない場合では、前者の方がシンボルもわかりやすく、洗練されたデザインとなります。背景の透過処理は行っていた方がよいでしょう。

ファビコンデザインのヒント

ウェブサイトにファビコンに使用したいシンボルなどが特にない場合でも、単純な図形があるだけでもサイトの視認性やユーザビリティは上がります。またフリーでファビコンを配布している素材サイトもありますので、そういったものを利用するのもひとつの策です。

まとめ

ファビコンは古くから使われている技術ですが、視覚的にウェブサイトを差別化してくれる重要なアイテムです。 まだ設定していない場合は簡単ですので、この機会に設定しておきましょう。 タブやブックマークでのウェブサイトの視認性が確実に上がります。