ファビコンとは?

Pocket

こんにちは!
今回のテーマは「ファビコンとは?」です。
スマホのファビコンに重点を置きながら、ファビコンを実装するメリットや、作成する時に気を付けたいポイントをお話ししたいと思います。


ファビコンとは

まず、ファビコンの基礎についてお話ししたいと思います。
ファビコンとは、「Favorite icon」を省略した言葉で、「お気に入りのアイコン」と言う意味があります。
PCのブラウザでWebサイトをブックマークした際にブックマークバーに表示される他、アドレスバーやタブにも表示されています。

元々はInternet ExplorerでWebサイトをお気に入り登録する際に使われていた機能でしたが、現在はIEに限らずChromeやFirefoxなど多くのブラウザで実装されています。

スマホのファビコンとは

今回注目したいのが、スマホのファビコンです。
スマホでも、各ブラウザのブックマークページやタブでファビコンが表示されています。

Safariは元々、PC版もスマホ版もタブにファビコンが表示されませんでしたが、2018年9月のiOS12へのアップデートで表示出来るようになりました。※表示設定は任意です。

さらに2019年5月(正式発表)のGoogleアップデートで、検索結果に出てくる各Webサイトにファビコンが表示されるようになりました。

上記のように、この1年ほどの間にスマホのファビコン機能がいくつかアップデートされました。
スマホで閲覧できる情報量の増加に伴い、役立つ情報を素早く判断する為、UIを改善する必要性が出てきたと考えられます。


ファビコンのメリット

まずスマホとPCで共通する、ファビコンの基本的なメリットについてお話したいと思います。
メリットは大きく分けて2つです。
1つ目は「識別しやすくなること」で、ユーザー側のメリットです。
2つ目は「ブランディング」で、こちらはWebサイトを運営する側のメリットです。

ユーザーのメリットである「識別しやすくなること」とは、ファビコンと言うグラフィカルな目印があることで一目でWebサイトを見分けられると言う事です。
人間の脳は、文字だけの情報より、文字と図がセットになった情報の方が識別しやすいです。
ファビコンが表示されていると、ユーザーは複数のタブや沢山のブックマークの中から目当ての情報を素早く選ぶ事が出来ます。

サイト運営側のメリットである「ブランディング」とは、ユーザーにWebサイトを記憶してもらいやすくなると言う事です。
ユーザーのメリットとも密接しており、ファビコンの色や形でWebサイトを識別する事で、ユーザーがブランドを覚えてくれる可能性が高まります。
ユーザーが「前に見たサイト良かったけど、どれだっけ?」となった時、サイトの特徴に合わせたファビコンを設定していれば、思い出すキッカケになってくれます。


次に、スマホのファビコン特有のメリットですが、前述したGoogleの検索結果にファビコンが表示される機能です。

具体的には下記のような変化がありました。
左が過去の検索結果で、右がファビコンが追加され新しくなった検索結果です。

引用:The Keyword | Google [A new look for Google Search]

どのサイトの情報なのか検索した直後に一覧で見られるようになり、とても便利になりました。

便利になった事例としては、オンラインショッピングをする時です。
ブランド名で検索した時、公式のブランドサイトだけでなく、公式のオンラインショップやその他の通販サイト、中古サイトなど沢山情報が出てきます。
文字情報だけが表示されていた以前のバ―ジョンだと、どこのサイトの情報なのか一目で分かり辛い状態でした。

公式のオンラインショップで買いたいのに検索上位にあるブランドのサイトを開いてしまった…と言う経験をよくしていましたが、ファビコンですぐに見分けられるようになったおかげで誤タップがなくなりました。


ファビコンを作る時のポイント

ファビコンを作る時のポイントを簡単にまとめてみました。

1番大切なのは、表示サイズをしっかり意識してファビコンを作成する事です。
ファビコンは実機だと非常に小さく表示されます。その為、色も形もシンプルなデザインにした方が視認性が良く適切です。
複雑なデザインにすると、表示された時に小さく潰れて何がなんだか分からなくなってしまいます。

アプリアイコンのデザインと統一しようかなと考える方も多いと思いますが、ファビコンサイズになった時に視認性に問題が出ないかしっかり確認してください。
場合によってはデザインを簡略化したり調整をした方が良いです。
ファビコンの例としては、サイトカラーやロゴの頭文字、特徴的なモチーフを1つシンボルにするなどしてデザインを行っているWebサイトが多いです。
Yahoo!のファビコンである赤い「Y!」や、Googleのカラフルな「G」と言うと、すぐに想像できる方も多いのではないでしょうか。

また、ファビコンは「.ico」と言うマルチアイコン形式で作ると各ブラウザに最適化した物が出来ます。
マルチアイコンとは、複数サイズのデータを1つにまとめることが出来る物です。

必要なサイズは下記の通りです。

種類 サイズ(px)
Internet Explorer 16 × 16
Chrome、Firefox、Safariなど 32 × 32
Google検索結果 48 × 48 (48の倍数)
Windowsデスクトップ 64 × 64
iOS 180 × 180
Android 256 × 256
WordPress 512 × 512

他の形式としては、png、gif、svg などがあります。
ただ、svgなど形式によってはブラウザで正常に表示出来ない可能性があるので、icoが主流となっています。


おわりに

いかがでしたでしょうか?
普段ブラウザを利用する際、常にファビコンを意識している人は少ないと思います。
何気なく使っていますが、無いと少し不便な機能でもあります。
ファビコンの有無でWebサイトの使い心地が変わりますので、まだファビコンを設定していない、ファビコンを最適化したいと思った方は、ぜひ試してみて下さい!

それではまた!デジマースのコンでした。

Pocket