【初心者必見】ホームページのアイコンを作ろう！はじめての"ファビコン"講座

皆さんは「favicon（ファビコン）」というものをご存知でしょうか？
ファビコンとは、Webサイトを閲覧しているときに見かける小さなアイコンのことを指します。
ブラウザのタブには、Webサイトのタイトルが表示されますが、このようにタイトルの横に小さなアイコンが表示されているのを見たことがあるのではないでしょうか？

また、お気に入りに追加したWebサイトのリストを見ていると、Webサイトのタイトルと一緒に小さなアイコンが表示されていることもありますよね。

今回はこの小さなタブ画像「ファビコン」について解説していきたいと思います。

ファビコンはWebサイトのトレードマークになる

「favicon」とは、お気に入り（favorite）に登録したときに表示されるアイコン（icon）という意味で、「favorite icon（フェイバリット・アイコン）」を縮めて「favicon（ファビコン）」と呼ぶようになったのが名前の由来とされています。

「ファビコンの無いサイトもあるし、別になくてもいいんじゃないの？」と思われる方もいらっしゃるかもしれませんが、ファビコンには大事な役割があり、ブランディングのためには設置しておいた方が良いのです。
ブランディングについて詳しく知りたい方は、こちらの記事を参考にしてみてください。

【ブランディング始めるあなたに】ブランドの要素を9+1個ご紹介
https://myajo.net/tips/2636/

ファビコンを設置するメリットは主に3つあります。

①ブックマークをした時に判別しやすくなる

気に入ったウェブサイトがあった時、ブラウザのブックマークに登録することがありますよね。
このとき、ブックマーク項目の端にそのウェブサイト独自のアイコンが表示されていれば、文字だけしかない場合よりもサイトを判別しやすくユーザーにとっては便利です。

こちらに、お気に入りに登録し、ブックマークバーに表示させた2つのホームページがあります。
どちらの方が印象に残りますか？瞬時に目に入ってくるのはファビコンが設定されている方ではないでしょうか。

②複数のブラウザを開いている時に見分けやすくなる

タブ機能を利用して複数のWebサイトを並行して閲覧する際に、そのサイト独自のアイコンがタブに表示されていれば、どのタブに何のWebサイトが表示されているのかが見分けやすく、使いやすくなります。
タブを開きすぎて、見たいホームページを見失ってしまった…という経験をしたことはありませんか？
そのような迷子になってしまったユーザーも、ファビコンを目印に目当てのホームページを見つけることができるようになります。

文字だけのものよりも、

アイコンで判別できる方が見やすく便利です。

③デスクトップやホーム画面のショートカットでも分かりやすくなる

WindowsなどのPC用OSや、スマートフォン・タブレットなどのモバイル用OSでは、ウェブサイトへのショートカットをデスクトップやホーム画面に置くことができます。
そのときにファビコンが用意されていれば、ウェブサイトそのものが1つのアプリになったかのように見えて、とても分かりやすくなります。

ファビコンを設定する事は、ユーザーの印象に残りやすいWebサイトづくりに繋がります。
視覚的にWebサイトや自社ブランドを覚えてもらうことができ、サイトへの再訪率アップも期待できると言われているのです。

ファビコンを作ってみよう！

illustratorやPhotoshopが使えなくても、ファビコンは自分で作ることが可能です。
作り方や作成のコツなどをご紹介します。

①推奨される画像サイズや拡張子は？

ファビコンに使用する画像は、正方形で作成してください。
代表的なサイズとしては、

16px×16px　IEのタブ
32px×32px　Chrome、Firefox、Safari
48px×48px　サイトアイコン（Windows)
180px×180px　ウェブクリップアイコン（iPhone）

などがあります。
諸説ありますが、16px×16pxと32px×32px、スマホ向けに180px×180pxがあれば十分でしょう。
拡張子は16px×16px・32px×32pxを「.ico」、180px×180pxを「.png」にして下さい。

②デザインのコツ

「ブランドのロゴを持っているから、それをそのままファビコンに使おう！」
と思われた方もいらっしゃるかもしれません。

そのままでも問題ない場合もありますが、ファビコンは小さなアイコンのため、
ロゴタイプの文字数が多いものや細かいデザインのロゴをそのままファビコンにすると、分かりづらいものになってしまいます。
ロゴマークの頭文字のみを使用したり、デザインを簡略化するなどして
複雑なものや色数の多いものを避けたシンプルでわかりやすいものが好ましいです。
Webサイトの内容が伝わるシンボルマークになるようなものを作成しましょう。

参考に、実際にサイトで使われているファビコンをいくつかご紹介します。