favicon（ファビコン）を設定しよう！「.ico」の作成方法とサイズ・設置場所

favicon（ファビコン）とは、Webサイトを閲覧しているときに見かける「小さなアイコン」のことです。

ブラウザのタブには、Webサイトのタイトルが表示されます。閲覧中のタイトルの横に小さなアイコンが表示されているのを見たことがあるのではないでしょうか？他にも、お気に入りに追加したWebサイトのリストを確認していると、Webサイトのタイトルと一緒に小さなアイコンが表示されるものもあると思います。

Webサイトのイメージを小さなアイコンでデザインして表示させることで、ほかのWebサイトとの区別をつけやすくし、印象に残るようアピールすることがファビコンを設置する目的です。

今回は、faviconの簡単な作成方法や設置の方法について確認してみましょう。

ファビコンの特徴と作成における注意点

ファビコンのサイズは最小のもので「16px × 16px」と、かなり小さいため、細かいデザインや凝ったデザインは向いていません。スペースの小さい画像に複雑なデザインを表示させようとすると、何のデザインなのかよく分からないものが無理やり表示されてしまいます。

ファビコンを作成する際には、ユーザーが直感的に分かるようなシンプルで簡単なデザインにしましょう。

ファビコンを作成する上で、もう1つ注意しなければならないのが、ファイル形式を「.ico」で作成することです。

ファビコンは、「.gif」「.png」「.ico」という3つのファイル形式で作成することができます。しかし、一部のブラウザではgifやpngで設置されたファビコンの表示に対応していないこともあるため、「.ico」で作成することが一般的です。

ファビコンのサイズは、表示される場所によって異なります。さらに、ユーザーが使うブラウザやデバイス（PC、スマホなど）によって、必要になるファビコンのサイズも多種多様です。

例えば、ブラウザのアドレス・タブ・ブックマークは、「16px × 16px」「32px × 32px」、Windows上のショートカットアイコンやサイトアイコンには「48px × 48px」「64px × 64px」というサイズが適しています。

その他のサイズが利用されているケースもありますが、とりあえず上記4サイズのファビコンを作成しておけば、問題ないでしょう。

ファビコンの設置場所は、サーバーのルートディレクトリです。ルートディレクトリに「.ico」ファイルをアップロードすることで、Webサイト全体にファビコンが適用されます。

Webページごとにファビコンのデザインを変えたい場合は、そのページのHTMLファイルが格納されているディレクトリに「.ico」ファイルも一緒にアップロードします。その後、下記のコードをhead内に記述しましょう。

まずは、PhotoshopやIllustratorなどの画像編集ソフトを使って、自由にファビコンのデザインを作成します。

デザインが完成したら、ファビコンに適したサイズとファイル形式で保存しましょう。

Photoshop単体ではico形式の画像が作れないため、背景を透過できる「.png」などの形式で保存してから、別の手段を使ってico形式の画像を作成します。

例えば、「.gif」や「.png」を「.ico」へ変換が可能なWebサービスを利用することや、Photoshopにプラグインを追加してico形式でも書き出せるようにする方法があります。

また、格納するデータ容量を抑えるために、最低限必要なファビコンのサイズだけを1つの.icoファイルに格納する「マルチアイコン」として作成することもあるようです。

ファビコンが設定されているWebサイトとされていないWebサイトでは、「どちらが直感的にWebサイト内のコンテンツをイメージしやすいか」という点で、一目瞭然です。

人によっては、ファビコンをアニメーションで作成する猛者もいます。

ファビコンの設置に興味のある方は、積極的にチャレンジしてみてはいかがでしょうか。