- 公開日： 最終更新日：
ファビコンとは？メリットや表示場所、作り方、作成ツール、設定法を解説
ファビコンとは、デバイスの画面上のさまざまな場所に表示される小さなアイコンのことを言います。
ファビコンは、ホームページの印象を左右する重要な存在になり、目的を持って適切に作成と設置を行うことで、さまざまな利点を得ることができます。
当ページでは、ファビコンとは何かや、設置のメリット、表示される場所、作り方、作成ツール、設定法について解説します。
目次
ファビコンとは
ファビコンとは、favorite iconの略で、英語表記ではfaviconになり、デバイスの画面上のさまざまな場所に表示されるホームページのシンボルマークになる小さなアイコンのことを言います。
ファビコンは、パソコンやタブレット、スマートフォンなどのさまざまな場所に表示され、ユーザーがホームページを探す際の目印になります。
さまざまな場所に表示されるということは、優れたデザイン性のファビコンを作成することで、ユーザーに良いイメージを持ってもらうことが可能になり、Webブランディングとしても効果を発揮します。
ファビコン設置のメリット
ホームページにファビコンを設置するメリットを解説します。
ホームページの認知度向上
ファビコンを設置することで、ホームページの認知度が高まります。
ファビコンは、さまざまな場所に表示されるので、色や形を使ってユーザーが認知しやすいデザインを作成することによって、ユーザーがファビコンを記憶しやすくなります。
ファビコンを認知したユーザーは、ホームページも間接的に認知することができるので、ホームページの訪問者数を最大化することができるのです。
Webブランディング
適切なファビコンを設置すれば、Webブランディングの効果を得ることができます。
さまざまな場所に表示されたファビコンは、よくユーザーが目にするアイコンになってくるので、御社の魅力や、他のホームページとの違い、サイトテーマを打ち出したファビコンを作成することで、ユーザーに良い記憶に残すことが可能になります。
このように、考えられたファビコンを適切に設置することで、企業のブランドイメージを伝え、ユーザーの記憶に残すことができます。
リピーターの獲得
ファビコンの設置は、リピーターの獲得に繋がります。
ユーザーが知りたい内容があった場合に、ユーザーの記憶に残りやすいファビコンを作成していれば、Google検索やX検索などを利用せずに、直接ホームページへと訪問してくれるようになります。
ファビコンが表示される場所
ファビコンが表示される場所を解説します。
ブラウザのタブ
ブラウザでホームページを開いたときに、ブラウザタブの左側にファビコンが表示されます。
検索結果
検索エンジンの検索結果の左側にファビコンが表示されます。
ちなみに、Googleの検索結果に表示されるファビコンは、Google検索セントラルの検索結果に表示されるファビコンを定義するのページから仕様を確認できます。
ブックマークアイコン
ブラウザでホームページをお気に入り登録したときに左側にファビコンが表示されます。
ファビコンの作り方
ファビコンの作り方を解説します。
サイズを知る
ファビコンは複数のサイズを用意することが一般的で、アイコンが表示される場所によって、サイズが異なってしまいます。
ただ、WordPress4.3以降のバージョンであれば、512px × 512pxのPNG形式でファビコンを作成すれば、自動的にサイズやファイル形式を調整してくれます。
WordPressを利用していないホームページは、以下が主なファビコンのファイルサイズになるので、それぞれのサイズを用意しなくてはなりません。
| 16px × 16px | Google Chrome、Microsoft Edge、Firefox、Safariなどのブラウザタブ |
| 32px × 32px | ブックマークアイコン |
| 48px × 48px | Windowsホーム画面のアイコン |
| 64px × 64px | 高解像度のWindowsホーム画面のアイコン |
| 180px × 180px | スマートフォンやタブレットのホーム画面アイコン |
ファイル形式を知る
ファビコンのファイル形式には3種類あり、どのファイル形式でも問題ありません。
ICO
ICOは、Microsoftが開発したファビコンのファイル形式です。
すべてのブラウザでサポートされており、1枚のファイルに複数のサイズの画像を含めることができる特徴があり、ユーザー環境に依存することなく、画像の縮小や拡大を行ってくれます。
ブラウザは、その他のファイル形式でファビコンをアップロードしても、icoを優先的に表示させます。
PNG
PNGは、作成が簡単なファビコンのファイル形式で人気が高いです。
PNGは、画像でありながら軽量という特徴があり、ファビコンを素早く読み込ませることができます。
SVG
SVGは、非常に軽量という特徴があり、もっともファビコンにふさわしいファイル形式であると思います。
従来は、ブラウザが対応していなかったので、SVG形式を利用することができませんでしたが、現在では主要なブラウザすべてがSVGに対応しているので、適切にファビコンを表示させることができます。
背景を透過させる
ファビコンを作成する際には、必ずファイルを透過させましょう。
透過させていないと、デザインの周りが白くなってしまうので、ユーザーからなんか古臭いと感じられてしまう恐れがあります。
会社ロゴと似たデザイン
ファビコンは、会社ロゴと似たデザインで作成することが一般的です。
もちろん、まったく同じものでなくても良く、ファビコンは小さなサイズになっているので、複雑なロゴの場合は、多少の手直しが必要です。
ただ、あまりにもロゴとかけ離れすぎてしまうと、ユーザーが何のファビコンだったか分からなくなってしまうので、なるべくロゴに近いイメージでデザインすることがおすすめです。
参考デザインを探す
もし会社ロゴをそのまま利用することができなければ、参考デザインを探しましょう。
ファビコンのデザインは、参考サイトが存在していないので、GoogleやX、Pinterestなどを使って、【ファビコン デザイン参考】と検索しましょう。
自社のロゴと、イメージ通りのファビコン確認して、どのようにロゴを手直しすれば、適切にユーザーの記憶に残るファビコンになるか検討します。
ファビコン作成ツール
ファビコンの作成ツールを紹介します。
デザイン作成のfavicon.cc
ファビコンのデザインを作成できるツールはfavicon.ccが便利です。
操作方法も簡単で、ドット打ちすることで、ファビコンのデザインを作成することができ、さらには今ある画像をアップロードすることで、16px × 16pxのico形式のファイルとしてダウンロードすることができます。
ただし、サイズは16px × 16pxだけになります。
複数サイズの制作にFavicon ジェネレーター
Favicon ジェネレーターは、1枚のファイルをアップロードすることで、以下のサイズを自動生成してくれます。
- 16px × 16px
- 24px × 24px
- 32px × 32px
- 48px × 48px
- 64px × 64px
- 128px × 128px
- 256px × 256px
もちろん、透過にも対応しているので、favicon.ccで作成したファイルをFavicon ジェネレーターにアップロードすることで、適切なファビコンを作成することが可能です。
ファビコンの設定法
最後に、ファビコンの設定法を解説します。
HTMLの設定法
HTMLで制作されたホームページであれば、ファビコンをサーバーにアップロードしましょう。
そして、<head>・・・</head>の間に以下のタグを記述します。
<link rel="shortcut icon" href="（ファビコンをアップロードした箇所のURL）">
WordPressの設定法
WordPressで制作しているホームページは、外観＞カスタマイズからファビコンを設定することができます。
外観＞カスタマイズを選んだら、サイトの基本情報を選択して、「サイトアイコンを選択」から、ファビコンのファイルをアップロードして、「公開ボタン」をクリックすることで設定が完了です。
ファビコンのまとめ
ファビコンについて解説しました。
闇雲なファビコンではメリットを得ることができませんが、目的を明確にして作成されたファビコンは、多くのメリットを享受することが可能です。
ファビコンって何？とお思いの方の参考になれば幸いです。
