初めてあった人に対して印象を抱くとき、あなたは何を基準にしていますか。メラビアンの法則によるとその割合は、言語情報からはわずか7%、聴覚情報は38%、視覚情報は55%となっています。いかに視覚からの情報が人間心理に影響を与えるかがわかります。webの世界も同じです。たくさんあるサイトの中でもいちいちURLを見なくても青い鳥のマークや赤いビデオ再生マークを見たら一瞬でどこのサイトだと判断できませんか。
今回はこの視覚効果をもつファビコンについてもう少し詳しく見ていくことにしましょう。
ファビコンとは
ファビコン(favicon)は、WEBサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称で、favorite icon(フェイバリット・アイコン=お気に入りアイコン)という英語の語句を縮約した混成語です。
ファビコンのはじまりは、ブラウザIE5によってはじめて搭載された独自の(非HTML標準の)機能でした。他のWebサイトのアイコンよりも目立たせ、ユーザーへイメージによる直観的な選択操作への便宜を図ることができました。
当初はお気に入りに登録する際にはじめて参照されたファイルであるため、このファイルのアクセス回数を調べることでお気に入りへの登録状況を計測できましたが、現在ではお気に入りに登録しなくてもwebページアクセス時ににはファビコンを参照するため、お気に入り登録状況の計測にファビコンファイルへのアクセスカウント利用はほぼ無意味となっています。
ファビコンが表示される場所は主に次のような箇所になります。
●ブラウザでページを開いた際のタブ
●ブックマークしたページタイトルの左
●スマホからショートカットを作成したアイコン
●スマホでグーグルの検索エンジンを利用した際の検索結果
最近ではほとんどのサイトにファビコンがついています。WordPressもバージョン5.4以降、サイトにファビコンを設定していな場合、自動的にファビコンを表示させるようになりました。
こういった背景には、2019年にGoogleが検索結果にファビコンを表示する仕様にデザイン変更(現在はモバイルとタブレットが対象、後にはパソコンにも表示することを予告)したことによる影響が大きいかもしれません。 引用:Google公式ブログ
ファビコンを作成するメリット
ファビコンをつけることで次のようなメリットが考えられます。
信頼性の向上
ファビコンがないと雑に作られている印象を持たれてしまいがちですが、逆にファビコンがあることできちんと作られているという良い印象を与え、サイトの信頼性が上がってプロフェッショナル度がまします。
ブランドイメージ
ファビコンをみたユーザーは、ウェブサイトの名称とともに企業と関連付けて想起します。文頭で青い鳥のマークや赤いビデオ再生マークを上げましたが、マークを見ただけで企業名や事業内容などが容易に想像されます。
ブランディングの観点からいうとファビコンはサイト名称より重要な役割を担っているのです。
リピート訪問
ファビコン付きホームページのほうがそうでないものに比べ、目を引きます。視覚効果は人の心理に働きかけるからです。また、検索結果や、ブックマークを付けた場合でも、リストの中でファビコンによって目立っているサイトはすぐに認識されますので、再訪される可能性が高まります。
ファビコン作成のマメ知識
実際にファビコンを作成するにあたって押さえておきたいポイントを紹介します。
ファビコンファイル形式
ファビコンは、.gif、.png、.ico という3つのファイル形式で作成することができます。しかし、一部のブラウザではgifやpngで設置されたファビコンの表示に対応していないこともありますので、PCで使用するファビコンは.ico で作成することが一般的です(スマホ対応する際はpng形式で画像を書き出し、header内に記述する方法も異なります)。
ファビコンサイズ
表示される場所によって用意するファビコンのサイズは異なります。さらに、ブラウザやデバイス(PC、スマホなど)によってもサイズは異なります。そのため、現在20種類以上の種類があるといわれています。
.ico形式で書き出す場合、複数の画像サイズをまとめることも可能なマルチアイコンとしても活用できますし、.icoファイルは自動的に適したサイズに縮小されるため大きめのサイズでひとつ用意しておくという手もあります(ただし、綺麗に見せるためには各サイズで作成した方がいいです)
以下に主なサイズと使用用途についてを記載しておきます。
サイズ | 主な用途 |
16px x 16px | Internet explorerのタブ |
32px x 32px | Chrome、Firefox、Safariなどのタブ |
48px x 48px | Windowsのwebページアイコン |
64px x 64px | 高解像度 Windowsのwebページアイコン |
180px x 180px | iPhoneのホーム画面等 |
192px x 192px | Androidのホーム画面等 |
512px x 512px | WordPress、 Android 等 |
Googleガイドライン
Googleが提唱するファビコン(favicon)作成のガイドラインに沿って作成することで検索結果にファビコンが表示されやすくなります。検索上位に表示され、リッチスニペットやファビコン等によって目を引くことでサイトへの誘導率を高めるためにも一読しておくべき点となります(ただし、ガイドラインに沿ったから必ず表示されるというわけではありません)。
検索結果の横にファビコンを表示するには、次のガイドラインを遵守する必要があります。
●Google がファビコンのファイルとホームページをクロールできること(Google をブロックしないこと)。
●ユーザーが検索結果を見た際に一目でサイトを見分けられるように、ファビコンがウェブサイトのブランドを視覚的に表したものとなるようにしてください。
●ファビコンのサイズが 48 ピクセルの倍数になっていること(例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど)。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。
注意: 16 x 16 ピクセルのファビコンは指定しないでください。
●ファビコンの URL は固定されている必要があります(URL は頻繁に変更しないでください)。
●わいせつな表現やヘイト表現に関連するシンボル(例: かぎ十字章)などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。 引用:Google検索セントラル - 検索結果に表示されるファビコンを定義する
まとめ
現在、日本ではweb検索の75%以上がスマホからされており、お気に入りのページ(トップページなど)をスマホのショートカットとして保存しておくケースも珍しくありません。
ファビコンは作り方さえ理解していれば、誰にでも簡単に作成できます。専用ツールなどもたくさんあります。
理解し、ブランディングやユーザーへの認知などどこまで対応するのかを判断したうえで、正しく設置しておくことが大切になってきます。