意外と重要!ファビコンの基礎知識

shutterstock_409650142

こんにちは!内定者の増田哲知です。

皆さん”ファビコン”とは何かご存知ですか?
ファビコン(favicon)とはブックマークした時やタブで表示した際にWebページ名の横に並ぶ小さなアイコンのことです。
あまり聞きなれない単語かもしれませんがインターネットを利用する中で皆さん一度は見たことがあるのではないでしょうか?

このファビコンですが、Webページを制作する際にはWebページの使いやすさやデザインにばかり気をとられてしまい、設置を忘れていることも少なくありません。


単なるアイコンでしょ?と思われるかもしれませんが、Webページを一目でわかるように区別してくれる重要なものです。
今回はこのファビコンについて解説していきます!

ファビコンとは

ファビコンは「Favorite icon(お気に入りのアイコン)」という言葉を省略したもので、運営者がWebページに設置するシンボルマークのことです。
主に、アドレスバーやブラウザのタブ、スマートフォンでWebページをホーム画面に置いた際に表示されるアイコンなどを指します。

例えばこちらのサイトを例にした場合は下記のような赤枠で囲ったアイコンをファビコンといいます。いろいろなWebページを開いてみるとファビコンを設置しているものがありますので、確認してみましょう。

では、具体的にみていきましょう。

ファビコン設置のメリット

ファビコンを設置することで得られる主なメリットを2点紹介します。
簡単な画像作成能力とHTMLスキルがあればすぐに作れますので、ちょっと面倒でもぜひ設置しておきたいものです。

1.Webサイトが一目で識別できるようになる

同時にたくさんのタブを開けば開くほど、文字よりもファビコンが表示される割合が多くなり、
ほぼファビコンのみでWebサイトを識別しなければならないということもあります。

そのとき、ファビコンを設定しているサイトなら、ファビコンを見るだけでWebサイトを識別することができます。

簡単にいうとそのタブがどのページかユーザー側がわかりやすいということです。逆に設定していなければ複数のタブに埋もれてしまい、ユーザーがもう一度Webサイトに戻ってくることすら難しいかもしれません。

2.Webサイトが記憶されることで、繰り返し使ってもらえる

ファビコンが設置されていることで、記憶、リピートに繋げることができます。
ユーザーがWebサイトを認識しやすくなり、Webサイトを繰り返し使ってもらうことに繋がります。
ファビコンが設置されていなければ、ユーザーが繰り返しWebサイトに訪れていても、名前を覚えてもらえないかもしれません。

「もう一度このWebサイトを利用したい」と思わせるためにもファビコンを設置して、Webサイトを記憶してもらう確率を上げましょう。

ファビコンの代表的なサイズとフォーマット

ファビコンのサイズはブラウザごとに推奨サイズが異なります。
主なサイズは下記のとおりです。

16px × 16px:Internet Explorer
24px × 24px:Internet Explorer9のピン留め
32px × 32px:Chrome、Firefox、Safari
48px × 48px:Windows
64px × 64px:高解像度Windows

ファビコンは、Internet ExplorerやChrome、Safariなどのブラウザによって、
表示サイズが違います。
ワンサイズだけで使い回すと、場合によっては縮小した際に表示が綺麗でなかったり、
正しく縮小できないことがありますので、複数用意することをオススメします。
全てを用意する余裕がないという方は「16px × 16px」「32px × 32px」のように、
一部だけでも用意しておくといいでしょう。

また、ファビコンの形式は「.ico」が理想です。「.gif」や「.png」でも表示できますが、
対応していないブラウザがあるので、「.ico」が最も望ましいです。

ファビコンのデザインのコツ

ファビコンはサイズ的にそこまで大きくないので、あまり細かなデザインではなく
小さくても「見やすい」・「わかりやすい」シンプルなデザインにしましょう。
小さなアイコンだけに、ドットを意識して作るとはっきりとしたデザインになります。
その一方で、大量に情報が流れるインターネット上でユーザーの目に止まるような
デザインにする必要もありますが、ホームページの印象を左右する部分でもあるので、
ページの雰囲気とマッチさせなければいけません。

はじめに

ファビコン実装後の注意点

ファビコンを設置した際に気を付けたいのが、正しく表示できているかどうかです。
BASIC認証と呼ばれるHTTPで定義される認証方式の一つでWebサイトを公開する前に、
特定の人にだけアクセスができるようにしたい時などに使用します。

この認証方法がかかっている状態で確認すると、ちゃんと表示できないことがあります。
AndroidにおいてBASIC認証がかかった状態でチェックすると問題ないのに、
実際にあげてみると正しく設置ができていないというケースがあるようです。

ファビコン設置後のチェックは、BASIC認証がかかっていない状態で行うか、ローカル環境で行いましょう。

最後に

いかがでしたでしょうか?ファビコンの基礎知識ついて紹介させていただきました。
ファビコンは、サイズは小さいながらも存在感は大きく、ホームページのシンボル的な存在でもあります。
自社ブランドをユーザーに覚えてほしいと考えている企業は設置するのが得策です。

今回ご紹介したことを今後のWebページの製作の参考にしていただけると幸いです。

shutterstock_409650142

参考になったらシェアをお願いします!