Webデザイナーブログから学ぶホームページ制作

ファビコン（favicon）とは、「Google Chrome」「Mozilla Firefox」「Microsoft Edge」などのWebブラウザでページを開いた際、ブラウザ上部のタブ部分に表示されるアイコン画像を指します。ファビコン（favicon）を設定していることで印象や見やすさが変わります。

今回は、ファビコン（favicon）とは？ファビコンの役割と作成方法を解説します。

ファビコン（favicon）とは、「favorite icon（フェイバリット・アイコン）」という「お気に入りアイコン」を意味した英語の語句を短縮した造語です。WebブラウザでWebページにアクセスした際に、ブラウザのタブやアドレスバーにシンボル・イメージとして用いられるアイコンのことです。
ファビコン（favicon）は、Webページを「ブックマーク」することで「ブックマーク一覧」にアイコン画像が表示されます。また、スマートフォンでGoogleなどで検索した際に、検索結果一覧にアイコン画像が表示されます。

・Google では、ホームページをクロールするたびにファビコンの有無、またはファビコンの更新の有無を確認します。ファビコンを変更し、Google にその変更を知らせたい場合は、サイトのホームページのインデックス登録をリクエストできます。更新が検索結果に反映されるまで、数日かかることがあります。
・設定できるファビコンは 1 つのサイトにつき 1 つだけです。異なるサイトかどうかはホスト名によって定義されます。たとえば、https://www.example.com/ と https://code.example.com/ というサイトがある場合、この 2 つは別々のサイトとして、それぞれに 1 つずつファビコンを設定できます。一方、https://www.example.com/sub-site はサイトのサブディレクトリであるため、設定できるファビコンは https://www.example.com/ に対する 1 つのみとなり、そのファビコンがメインのサイトとサブディレクトリの両方に適用されます。
・ファビコンのファイルとホームページは、Google がクロールできる必要があります（Google をブロックしない）。
・ユーザーが検索結果を見た際に一目でサイトを見分けられるように、ファビコンがウェブサイトのブランドを視覚的に表したものとなるようにしてください。
・ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。

参照：Google 検索セントラル ブログ

ファビコン（favicon）を設定することで、ホームページの価値を上げる効果に繋がります。沢山のホームページがある中で、ひとつのホームページを探すのは困難です。そのためにファビコン（favicon）がある事で見つけやすくなります。
ファビコン（favicon）は、ホームページ「視認性」「信頼性」を高める役割があります。

【ファビコン（favicon）の役割】
・「視認性」を高める
・「信頼性」を高める

ファビコン（favicon）を設定することで、ホームページの訪問者が「何のホームページか」を認識しやすくなります。また、ブラウザで複数のホームページを開いている時やブックマーク一覧を開いている時に、アイコン画像が目印となり瞬時に見つけたいホームページを認識することができます。
また、スマートフォンでGoogleなどで検索した際に、検索結果一覧にWebサイトのタイトルに加えてファビコン（favicon）画像が表示されることで発見しやすくなり、目につきやすい画像を設定することで他サイトとの差別化を図ることができます。ファビコン（favicon）画像を目につきやすい画像にすることでWebサイトのクリック率にも影響を与えることができます。

ファビコン（favicon）画像にお店や会社のロゴを設定することで見れば「何のサイト」「何の会社」がわかりやすくなると同時にブランディングに繋がり、安心してホームページを訪れてもらえます。
また、ホームページを閉じてしまっても今まで開いていたホームページを探しやすくなり、ファビコン（favicon）画像があることでサイトの安全性や信頼性を高めることができます。

ファビコン（favicon）を作成する場合は、一般的には「.ico形式」の画像ファイルで作成します。ただし、「.png形式」「.gif形式」「.svg形式」「.bmp形式」「.jpg形式」などで作成して表示することもできます。「.ico形式」は、デバイスごとのブラウザに対応可能な形式です。

【主に利用できる拡張子】
・.ico形式
・.png形式
・.gif形式
・.svg形式
・.bmp形式
・.jpg形式

ファビコン（favicon）に使用するアイコン画像のサイズの種類は沢山あります。ファビコン（favicon）は、各デバイスによって画像サイズが異なり、出来る限り大きめの画像サイズで作成しておけばデバイスに適応したサイズに縮小して表示されます。
ファビコン（favicon）は、複数設定することができますが、全てのサイズを作成する必要はありません。一般的には、パソコンブラウザに合わせて「48×48」のサイズを作成し、スマートフォンやタブレットでショートカットを作る際の最大サイズ「180×180」のサイズ、もしくは「256×256」のサイズで作成して配置するとよいでしょう。

【対応画像サイズ】
・16×16
・32×32
・36×36
・48×48
・72×72
・96×96
・144×144
・180×180
・192×192
・256×256
・384×384
・512×512

ファビコン（favicon）を作成する場合は、出来る限りホームページに関連したアイコン画像を作成することがおすすめです。「ロゴマーク」「お店をイメージしたマーク」「ブランドをイメージしたマーク」など、出来る限り目立つ画像や目に残る印象的なアイコン画像を作成します。
ファビコン（favicon）を作成する手順は、Photoshop（フォトショップ）やIllustrator（イラストレーター）などのデザインツールやフリーのイラスト作成ツールを利用して必要なサイズでアイコン画像を作成し、拡張子変換ツールを利用して「.ico形式」の画像ファイルに変更します。
ファビコン（favicon）画像の作成を行なったら、Webページのheader内にファビコン（favicon）を読み込むコードを記述します。

ファビコン（favicon）画像を作成する場合は、Photoshop（フォトショップ）やIllustrator（イラストレーター）などのデザインソフトやフリーのイラスト作成ツールを利用して必要なサイズでアイコン画像を作成します。
Photoshop（フォトショップ）やIllustrator（イラストレーター）などのデザインソフトがない場合のフリーのイラスト作成ツールをいくつかご紹介します。

favicon.ccは、海外のファビコン（favicon）作成ツールですが、会員登録やツールのダウンロードなどは一切不要です。カラーチャートから色を選択し、マスに色を配置して画像を作成します。

https://www.favicon.cc/

Favicon generatorは、海外のファビコン（favicon）作成ツールですが、会員登録やツールのダウンロードなどは一切不要です。ツールから画像を作成するツール、カラーチャートから色を選択し、中央部分の枠内に画像を作成します。

https://www.favicon-generator.org/image-editor/

ファビコン（favicon）画像を「.ico形式」で配置したい場合は、「.png形式」「.gif形式」「.svg形式」「.bmp形式」「.jpg形式」などで作成した画像の拡張子を変換する必要があります。
「.ico形式」以外のファイルで作成したアイコン画像を、「.ico形式」の拡張子に変更するためのフリーのファビコン変換ツールをいくつかご紹介します。

ao-systemは、会員登録やツールのダウンロードなどは一切不要です。画面のボタンから作成したアイコン画像をパソコン内から選択を参照し、「16×16」「32×32」「48×48」サイズのファビコン（favicon）を作成することができます。

https://ao-system.net/favicon/

Favicon ジェネレーターは、会員登録やツールのダウンロードなどは一切不要です。画面のボタンから作成したアイコン画像をパソコン内から選択を参照し、「16×16」「24×24」「32×32」「48×48」「64×64」「128×128」「256×256」サイズのファビコン（favicon）を作成することができます。

https://favicon-generator.mintsu-dev.com/

作成したファビコン（favicon）画像は、サーバー内の画像などのフォルダ内に格納する必要があります。格納する場所はどこのルートでも問題ありませんが、なるべく上階層に設定することをおすすめします。

サーバー内に格納したファビコン（favicon）画像は、Webページでファビコン（favicon）を表示するためは、Webページのheader内にファビコン（favicon）を読み込むコードを記述する必要があります。
各Webページのheader内で記述する絶対パス・相対パスのどちらでも構いません。

<link rel="icon" href="/favicon.ico" />

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

ファビコン（favicon）画像は、必ずしも必要な設定ではありませんが、Webページの向上を考えてユーザーによりサイトを探して、認識してもらうためには必要です。細かい設定ですが簡単に設定できるのでなるべくファビコン（favicon）の設定は行いましょう。