ファビコンって何？
ファビコンは作ったほうがいいの？
このようなことを考える方も多いでしょう。
ファビコンとは、ブラウザのタブなどに表示されている小さなアイコンのことです。Webサイトにファビコンを導入すると、顧客の記憶に残りやすいことや、ブックマークのリストのなかで目立つなどのメリットがあります。
この記事では、企業の認知度向上やリピーター増加を図りたいマーケティング担当者や経営者に向け、ファビコンの概要、導入メリット、おすすめの作成ツールを解説します。デザインのポイントやWebサイトの設置方法なども解説しているので、自社施策にお役立てください。
DMMチャットブーストではロゴジェネレーターに関する記事もございますので、ぜひご覧ください。
ファビコンとは何か？
ファビコンとはアイコンの一種であり、例えば、ブラウザのタブの左側に小さく表示されているものです。ファビコンという名称は「Favorite icon（お気に入りアイコン）」を略した造語です。
ここでは、企業側からの視点で、ファビコンの役割や表示される場所などの概要を解説します。
ファビコンの役割
ファビコンの役割は、ユーザーが企業やサイト運営者などを素早く認知するためのシンボルマークです。
例えば、ブラウザでお気に入りのホームページをブックマークすると、リストのなかにファビコンが表示されます。それによって、多くのサイトの中から、閲覧したいサイトをすぐに見つけられます。
ファビコンの役割は拡大してきました。ユーザーがお気に入り登録していなくても、ブラウザのタブには自動的にファビコンが表示され、複数のタブを開いているときの目印として役立っているからです。今後、Googleの検索結果にも、ファビコンが表示されるようになるとみられています。
ファビコンが表示される場所
ファビコンが表示される主な場所は、以下のとおりです。
|
上記のように、ファビコンを設定しておけば、さまざまな場所に表示されることになります。ファビコンがアクセス数の向上やリピーター獲得などに役立つと言われているのは、このためです。
ファビコンの画像サイズ
ファビコンの画像サイズは、アプリケーションやOSによってさまざまです。標準的なサイズというものがないため、全てに対応しようとすれば、20種類以上用意しなければならないとされています。
とはいえ、ほとんどの企業の場合、主要なサイズに対応しておけば十分です。ユーザー数の多いアプリケーションやOSのサイズを以下に示します。
| アプリケーション・OS | サイズ |
| Chrome Firefox Safari Edge |
16px × 16px（非Retina） 32px × 32px（Retina） |
| iOS、Safariのホーム画面アイコン Android Chromeのホーム画面、タブ Mac Safariのブックマーク |
180px x 180px |
| Android Chromeのホーム画面、タブ | 192px x 192px |
ファビコンのファイル形式
ファビコンのファイル形式は、アプリケーションやOSによって違います。
ブラウザ向けファビコンはICOファイルが適しています。PNGファイルで設定することもできますが、一部のブラウザは対応していません。また、Apple製品はPNファイル、AndroidはPNGファイルです。
ICO形式のファイルのメリットは、複数のサイズに対応できる「マルチアイコン」であることです。つまり、ICO形式のファイルを設定しておけば、アプリケーションやOS、デバイス環境などに応じて、自動的に適切なサイズが表示されます。
ファビコンを設置する3つのメリット
企業がファビコンを設置すると、リピート率や信頼性の向上、企業イメージの定着が見込めます。そのため、ファビコンはWebマーケティングでぜひ行っておきたい施策の1つです。それぞれのメリットについて、詳しく解説します。
ファビコンのメリット1｜記憶に残りやすい
ファビコンは視覚的に記憶に残りやすいシンボルマークです。たとえ、シンボルを認知されていないとしても色や形で覚えてもらえます。そのため、タブやブックマークのなかに埋もれにくくなります。
特に、新規顧客開拓のための施策を行っている企業や、比較検討されやすいECショップなどでは、ファビコンのメリットが大きくなります。企業の知名度がそれほどない場合は、すぐに企業名を忘れてしまうからです。また、商品自体に興味があり、ショップ名を持ってもらえない場合も同様です。
このようなときにファビコンがあれば、商品情報とファビコンを結び付けて思い出してもらえるので再訪者が増えます。また、競合他社のお客を取られてしまうケースも少なくできるでしょう。
ファビコンのメリット2｜信頼性を高められる
ファビコンを設置すると、サイト運営者の信頼性を高められます。
その理由は、大手企業やオンライン施策に力を入れている企業の多くがファビコンを設置しているのに対し、小規模事業者や一般個人のサイトはそうではないからです。
この効果は、商業ビルなどに設置してある集合看板などと同じです。単に「○○株式会社」などと記述があるよりも、ロゴが入った企業や店舗のほうが確実に目立ちます。また、プロモーションに手を抜いていないことから、サービスの質の高さや活発な事業活動を想像する人もいるでしょう。同様の効果がファビコンの設置によっても得られます。
ファビコンのメリット3｜企業イメージを伝えられる
ファビコンによって、企業イメージを伝えることも可能です。仮に子ども向け商品を中心に販売している企業なら、親しみのあるキャラクターを用いるのもよいでしょう。例えば、任天堂ではマリオをファビコンにしています。
また、自社の主力商品をファビコンにする企業も少なくありません。例えば、永谷園は歌舞伎の幕柄でおなじみのお茶漬けをファビコンにしています。もっとも、ファビコンの画像は小さいので向き・不向きがあり、簡略化やデフォルメが必要になることもあります。
企業の認知度が高いなら、シンプルに企業のロゴマークや頭文字をファビコンにするのが効果的です。視認性が高いうえ、ブランディングの一環としても役立ちます。例えばトヨタは車のエンブレムをファビコンにしています。
ファビコンを製作する手順
ファビコンを製作する基本的な流れと各工程のポイントは、以下の通りです。
| 手順 | 工程 | 備考 |
| 1 | ファビコンの元になる画像を作成する |
画像編集ソフトを使うのが一般的 Illustrator（イラストレーター）やPhotoshop（フォトショップ）を用いると高品質なアイコンを作りやすい 後でリサイズできるように「512px × 512px」など大きめのサイズで作っておくとよい |
| 2 | 必要な画像サイズの画像にリサイズ |
ファビコン作成ツールによっては、自動で行われるため不要 一般的には、「16px × 16px」「32px × 32px」「180px × 180px」「192px × 192px」の4種類にリサイズする |
| 3 | ファビコンの形式のファイルに変換 | ファビコン作成ツールを用いて、ファビコンのファイル形式に変換 |
| 4 | ファイル名の変更 | 主要ブラウザ：favicon.ico Apple製品：apple-touch-icon.pn Android：android-chrome-192×192.png などに変更 |
ファビコン作成ツール・サイト5選
ここでは、使い勝手がよく人気があるファビコン作成ツールを5つ紹介します。いずれのツールもWebサイト上でファビコンを生成できるため、ソフトウェアを準備する必要はありません。また、無料で利用できます。
ファビコン作成ツール1｜Favicon generator
Favicon generatorは、ファビコン用の元画像を1枚用意すれば、自動でファビコンを作成してくれる便利なツールです。リサイズに加えて、ブラウザ用のICOファイル、Apple製品向けのPNファイル、Android向けのPNGファイルを一括出力してくれます。
ただし、元画像の容量は500KBまでなので、オーバーしている場合は事前に圧縮しておきましょう。
ファビコン作成ツール2｜Favicon Generator. For real.
Favicon generatorと比較されることが多い、シンプルなファビコン作成ツールです。作成したファビコンをチェックしてくれる機能も付いているので、既にファビコンがある場合も利用してみてください。
なお、Favicon Generator. For real.は260px × 260pxの元画像を推奨されています。このサイズ以外も出力できますが、元画像をこれから作る場合は推奨サイズで用意しましょう。
ファビコン作成ツール3｜favicon.cc
引用：favicon.cc
ファビコンを一から作れるツールです。16×16で分割されたタイルを塗りつぶしていく方法なので簡単なデザインしかできませんが、文字のロゴなどなら十分役に立つでしょう。ただし、作れるサイズは16px × 16pxのみです。
ファビコン作成ツール4｜Favic-o-Matic
Favic-o-Maticは一般的なサイズに対応したファビコンを作成できるうえ、「advanced setting」でマイナーなサイズの出力にも対応していることが特徴です。
例えば、「24px x 24px」「57px x 57px」「114px x 114px」「310px x 150px」など、全部で20種類が選べます。
ファビコン作成ツール5｜「半透過マルチアイコンfavicon.icoを作ろう!」
8ビット（256階調）の高品質のマルチアイコンが作れるサイトです。例えば影付きのロゴマークを使っている場合に、シャギー（ギザギザ）のない美しいファビコンに仕上げてくれます。日本語での説明も分かりやすく、国内ユーザーの人気が高いファビコン作成ツールです。
ファビコンを作る4つのコツ
ファビコンは画像が小さく、表示される場所も特殊です。どのようにすれば、効果的なファビコンを作れるのでしょうか。ここでは、ファビコンをデザインする際に意識したいポイントや、効率的に製作する方法など、4つのコツを紹介します。
ファビコンのコツ1｜デザインをシンプルにする
ファビコンの画像は小さいため、視認性が高いシンプルなデザインにするのが基本です。ブラウザのタブやスマホのホーム画面など、複数の場所に表示させる場合は、最も小さなサイズを想定して作成しましょう。
シンボルマークとして役に立たなければ意味がないため、精緻な図柄にしても効果は上がりません。何を表しているかわからないぐらいなら、アルファベット1文字やロゴマークを作ったほうがよいでしょう。
もちろん、シンプルに作れば、他社とデザインが重なるリスクも高まります。ファビコンを作成する前には、競合企業や他のショップなどのデザインをチェックしておきましょう。
ファビコンのコツ2｜画像は正方形が基本
ブラウザやホーム画面のファビコンはいずれも正方形で表示されます。縦長や横長で画像を作ってしまうと、一部が表示されないので注意しましょう。ツールによっては正方形に圧縮できますが、画像によっては比率が変わり不自然になってしまいます。したがって、ファビコン専用の画像を用意するのがベストです。
iOSやSafariで表示するファビコンは、四隅が丸く加工されてしまうことに注意が必要です。Apple製品にもファビコンを表示する場合は、四隅が削られてもよいデザインを検討しましょう。または、デザインを変えずに一回り小さくして、余白を持たせる方法もあります。
ファビコンのコツ3｜ファビコン素材を活用する
自社にデザイナーがいない場合やIllustratorやPhotoshopなどのソフトを持っていない場合は、アイコンやファビコンの素材を活用してはいかがでしょうか。素材を元に作ることで、工数や製作費を節約できます。
ファビコンの素材として商用利用できるサイトを、以下に幾つか紹介します。
| サイト | 特徴 | 無料・有料 |
| iconmonstr |
デザインがおしゃれ 食べ物や音楽など、カテゴリー別にまとめられており探しやすい |
無料 |
| IconPark |
フリーのアイコン素材サイト 一部を加工してダウンロードできる |
無料 |
| Adobe Stock | さまざまなアイコンがダウンロードできる | 一部有料 |
上記のほかにも、個性的なデザインやそのまま商用利用できる高品質のアイコンを提供しているサイトなどがあります。自社にあったファビコンの素材を探してください。
ファビコンのコツ5｜動的にファビコンを変えることもできる
プログラムコードを追加することで、動的にファビコンの一部を変更することもできます。例えば、SNSやビジネスチャットなどのサイトのように、更新ありのマークやメッセージ件数を表示できます。また、ファビコンのなかに今日の日付を表示するなども可能です。
一部のECショップは、カートに商品が入ると、ファビコンに商品数や注意喚起マークを付けるなどして表示を変えています。上手に活用すれば購買率を高めることもできるでしょう。ただし、ユーザーに余計な心配や強引な印象を与えない配慮も必要です。
ファビコンをWebサイトに設定する方法
Webサイトにファビコンを設定する場合は、まずサイトのドキュメントルートフォルダにファビコンのファイルをコピーします。
次に、HTMLファイルのヘッダーにコードを追加します。Chrome、Firefox、Safari、Edgeなどの主要ブラウザでの記述例は以下のとおりです。
link rel="icon" href="/image/favicon.ico"
詳しくは、各ブラウザのマニュアルを確認してください。
ファビコンで企業の認知度アップ・リピータ増加を図ろう！
ファビコンは業種を問わずWebサイトに設置しておきたいアイコンです。ユーザーの記憶に残りやすいファビコンを作れば、企業の認知度アップやリピート率向上が見込めるでしょう。ファビコンのファイルを生成するには、本記事で紹介したようなツールを使うと簡単です。
ファビコンの活用によって新規顧客と接触できた後に重要なのは、LINE公式アカウントなどにおける見込み客育成のプロセスです。
DMMチャットブーストは、LINE公式アカウントの機能を拡張し、簡単に顧客対応やマーケティングを行える自動化ツールです。人件費を抑えながら、売上アップや顧客満足度向上を実現します。
DMMチャットブーストではD2Cブランドに関する記事もございますので、ぜひご覧ください。