WEBサイトのシンボルマーク！ファビコンとは？

ファビコンとは
ファビコンに最適な画像サイズは？
ファビコンの作成・設定方法
まとめ

ファビコンとは

ファビコン(favicon)とは”favorite icon”の略で、WEBサイトのシンボル・イメージとして用いられるアイコンのことです。

ブラウザでWEBページを開いた際のアドレスバー、タブ部分
WEBページをショートカットに設定した際のアイコン
検索結果ページでのアイコン

主にこれらのような場所で用いられており、
複数のタブを開いてWebページの閲覧しているときや、お気に入り・ブックマークを表示させた際にサイトやページを判別する目印となります。
ブラウザを開いたときにタブに表示されている様子がこちら。

黄色い枠に囲まれているのが「ファビコン」です。
一度は見たことのある方がほとんどではないでしょうか？

ファビコンを設定するべき理由

ファビコンは簡単に設定できる(後述)のにも関わらず、下記のような利点があります。

目立つので、瞬時に何のサイト・サービスなのかをユーザーに認識してもらうことができる
ファビコンは主に閲覧中のタブに表示されます。また、検索結果画面にも表示されるため、潜在層にサイトを認知してもらうことができます。
WEBサイトの信頼性が上がる
ファビコンやアイコンはWEBサイトのシンボルであり、同時にブランドのアイデンティティと言えます。
よく見るマークに対して、ユーザーは親近感を持ちやすくなる傾向があります。
ブランディングの手助けとなる
お店や会社のロゴを見ればどのブランドかわかるように、ファビコンはWEBサイトで扱うコンテンツのブランディングの一助ともなります。
サイトの認知度が低い場合はそれほど効果的ではありませんが、有名サイトになればアイコンだけで認知されるようになります。

ファビコンに最適な画像サイズは？

ファビコンのに最適な画像サイズは、その表示場所が複数あること、WEBサイトを閲覧するブラウザによっても表示されるサイズが変わることから、ひとつに定めることはできません。
一般的に推奨されているサイズは以下の通りです。

・16×16
・24×24
・32×32
・48×48
・64×64
・128×128
・256×256

各ブラウザのタブに表示されるファビコンは「16px × 16px」のサイズ、ブックマークアイコンに使用されるファビコンは「32px × 32px」のサイズで表示されることが一般的です。
また、IEでは「48px × 48px」のサイズが使用されています。
最近ではスマホでの表示に対応をしているWEBサイトが増えており、モバイル版のファビコンはPC版に比べて解像度が倍以上になるため、「256px × 256px」以上の大きいサイズの画像も必要となります。

このようにデバイスやブラウザによってかなり色々な画像サイズが必要となるものの、後述するジェネレータで「.ico」形式のファイルを作成するとこれらをひとつにまとめることができ、さらに適した場所で適したサイズの表示がされるようにもなります。

ファビコンの作成・設定方法

ファビコンを設定するのには、大きく3つのステップがあります。

1.画像を作成する

まずはファビコンに用いる画像を制作しましょう。
WEBサイト専用のものを新しく作成しなくても、会社やサービスのロゴでももちろん構いません。ただし、正方形で作成することをお忘れなく。
ファビコンは先述した通り、一般的には「16px × 16px」のサイズで使用されることが多いですが、表示される場所によっては「32px × 32px」や「24px × 24px」で使用されることもあります。

そのため、複数サイズの画像をひとつのファイルにまとめることができる「.ico」の形式に変換するのが最も使いやすい形と言えます。
そこで変換するために、画像作成段階では最大のサイズ(256px × 256px)の「.png」で書き出すと良いでしょう。

2.変換サイトで拡張子を変換する

「.ico」形式への変換に便利なツールをご紹介します。
いずれも無料で使うことのできるツールですので、ご自身に合っているものをご使用ください。

・favicon.cc

「favicon.cc」は海外のファビコン作成ツールです。会員登録やツールのダウンロードが必要ないため、すぐに手軽に使うことができます。
ファビコンの作成には、使用するカラーを選択し、ページ中央にある枠内で作成を行います。
ソフトをダウンロードする必要なく、WEB上で使うことができるツールなので、スピーディーに制作をしたい方におすすめです。

・Favicon generator

「Favicon generator」も海外のファビコン作成ツールです。
このツールも先ほどと同じく、会員登録やソフトをダウンロードする必要なく利用することができます。WEB上で簡単に使いはじめることができるので、とても便利です。ページ中央の枠内でファビコンを直感的に作成できます。

3.サーバーのルートディレクトリに.icoファイルをアップする

「.ico」形式のファイルさえ作成してしまえば、あとは簡単。
WEBページのサーバーのルートディレクトリ( / )にこのファイルをアップするだけです。
ファイル名を「favicon.ico」としておくことで、適した場所で適したサイズで表示されます。

まとめ

ファビコンは、絶対に必要なものではないものの、ユーザーの利便性、ブランディングにおいてはとても重要な項目です。
設定は簡単でありながら様々なメリットがあるため、ぜひ設定してみてください。