ファビコンの作成から設定まで徹底解説：ファビコンでサイトのブランド力を高めよう
この記事の最終更新は2022年4月24日です。
ファビコンとは、ブラウザのタブに表示される小さなアイコンのこと。ブックマークリスト、検索履歴などに表示され、ブラウザで複数のタブを開いていても、一目でどのサイトのタブかわかります。しかし、サイズが小さいのでロゴデザインとは異なるデザインを作る必要があります。ファビコンのサイズやデザインのコツを理解し、この強力なブランディングツールをあなたのサイトにも設置しましょう。
目次
1. ファビコンとは？
ファビコンは、ブラウザでサイトまたはページを表すために使用される小さなサイズ（16x16ピクセル）のアイコンです。ファビコンは、お気に入り（favorite) に登録したときに表示されるアイコン（icon）を意味する favorite icon（フェイバリット・アイコン）というのが由来でこれを略して、favicon（ファビコン）と呼ばれるようになりました。
ファビコンはブラウザの上部にあるタブに表示される他に、ブックマークバー、履歴、検索結果のページのURLと一緒に表示されます。Wix のホームページを例にした場合、デスクトップでのブラウザタブにはこのように表示されます。
ユーザーが Google Chrome で検索した時、一番最初に目にすることになる検索結果にもファビコンが表示されます。つまり、ファビコンは、ユーザーがあなたの Web サイトを探している時の目印になるということです。印象的なファビコンを設定することで、ユーザーがあなたのサイトに再訪するチャンスを増やすことができます。
2. ファビコン設置のメリットとは？
ファビコンは、どの Web サイトのブランディングに役に立つ便利なマーケティングアセットです。ファビコンを正しく設定することで、サイトの使いやすさ、ブランディング、信頼性を向上させることができます。
使いやすさの向上：
ファビコンはあなたのサイトの目印となり、あなたのサイトを探しているユーザーがブラウザをより使いやすくなります。ファビコンを使用すると、ユーザーはブラウザやブックマークバーなどのさまざまな場所であなたのウェブサイトを簡単に見つけることができるようになり、サイトへの再訪を促します。ファビコンは、スマホフレンドリーな表示としても優秀です。
ブランディング：
みなさんがご存じの検索エンジン Google のファビコンは、Google の頭文字「G」をモチーフにし、社名ロゴのデザインや色合いを取り入れたアイコンが使われています。Wix の場合は、社名そのものをファビコンとして使用しています。このように、独自のファビコンを設置することで、ユーザーが一目でサイトのブランドを識別でき、ユーザーの記憶に残りやすくなります。
信頼性：
インターネットで検索をしながら作業をしていると、沢山のタブが開きっぱなしになりがちです。たくさんのタブの中から目当てのページに戻ることは簡単ではありません。ファビコンを設置することで、ユーザビリティに配慮したサイトであるということを証明でき、信頼性を向上させます。
リピート率向上：
ファビコンは強力なブランドアセットであり、検索結果や履歴などであなたのサイトをより目立たせることができます。このため、見やすく印象的なファビコンは、ユーザーがサイトに再訪するのに役立ちます。さらに、ユーザーがサイトをブックマークした時も、ファビコンが目印となり簡単にあなたのサイトを見つけることができます。
3. ファビコンとSEO
ファビコンは、サイトのSEOに直接影響を与えません。ただし、全体的なユーザーの使いやすさが向上するため、高品質なファビコンは検索結果での向上に貢献するといえます。
ファビコンを設置するメリットを理解したところで、実際にどのようにファビコンを作成し、設置するかを確認しましょう。
4. ファビコンデザインのコツ
何よりもまず、ファビコンはブランドのロゴをもっとシンプルにしたものにする必要があります。統一感のあるブランドイメージを構築し、ユーザーにより印象深くあなたのサイトを覚えてもらうためです。しかし、シンプルかつ印象的なデザインを作ることは簡単ではありません。プロのデザイナーを雇うことを検討するかもしれません。しかし、オンラインツールを使用して自分で作成することもできます。
自分でファビコンをデザインする前に、下記で紹介する作成コツを確認してみましょう。
5. ファビコンのサイズとファイル形式
ファビコンを作成するための最適なサイズは 16x16 ピクセルです。これは、ファビコンが最も一般的に表示されるサイズです。ただし、より大きなサイズ（ 32x32 ピクセルなど）でも表示される場合があります。サイズ変換ツールを使用することで簡単にファビコンに適したサイズの画像にすることができます。
16x16 ピクセル：ブラウザファビコン
32x32 ピクセル：タスクバーのショートカットファビコン
96x96 ピクセル：デスクトップショートカットファビコン
180x180 ピクセル： Appleタッチファビコン
最近は 32x32 ピクセルの画像をアップロードできるブラウザが増えています。おすすめは、まず 32x32 ピクセルでデザインを作成し、そのあと 16x16 ピクセルのサイズに変更することです。二度デザインを作成する手間が減ります。
ファイル形式
ファビコンの主要なファイル形式は「.svg」「.png」「.gif」「.ico」などがあります。元々ファビコンに推奨されていた形式は ICO でしたが、現在は、ベクターアート (SVG) 、PNG または JPEG が推奨されています。
SVGは表示サイズに影響されず、常に綺麗な状態で表示できるため、人気のある選択肢になっています。現在では多くのブラウザがSVGに対応するようになっています。また、ブラウザは、GIFとして作成されたファビコンを表示することもできます。サイズが小さいと、GIFファビコンが見にくくなるためサイズには注意しましょう。
ICO： Microsoftによって開発された、ファビコンのファイル形式。すべてのブラウザでサポートされており、1つのファイルに複数のサイズの画像を含めることができます。これにより、ブラウザに依存することなく、画像のサイズと拡大縮小を行うことができます。多くの場合、ファビコンがICOおよび他の1つのファイルタイプとして保存されている場合でも、ブラウザはICOバージョンの表示を選択します。
PNG：ファビコンで人気のあるファイル形式です。作成が簡単な形式であり、通常、高品質の画像とファビコンを提供します。PNGファイルは画像でありながら軽量なのですばやくロードできます。
SVG：このファイル形式は非常に軽量で、ファビコンに最適だといえます。最大の利点は、ページ速度やサイトのパフォーマンスを低下させないで高品質の画像を配信できることです。しかしこれまで、ブラウザでの互換性がないということが問題でしたが、現在は主要なブラウザで利用できるようになり利用が広がっています。
透明度：デザインの背景が透明な場合は、透明度設定をオンにしてファイルをPNGとして保存してください。
6. ロゴからファビコンは作れる？
ごく少数のロゴはファビコンサイズでも綺麗に利用できることがありますが、恐らくほとんどのロゴは縮小すると判読できません。ロゴをファビコンとして使用する場合は、調整が必要になります。デザインを単純化するか、イニシャルを1つだけ使用することは、ファビコンサイズでロゴを機能させる方法の一部です。
例えば、先述した Google のファビコンはロゴとは異なるデザインですよね。ファビコンには、おなじみの G イニシャルのみが表示され、ブランドの4色すべてを一つの文字に取り込むことでロゴとの一貫性を保っています。
7. サイズ無料変換ツール
すでにロゴやアイコンを持っていて、それをファビコンとしても使いたい場合はサイズ変換ツールが便利です。
無料で半透過のアイコンが作成できる優れたツールです。 PNG、 GIF、JPG（JPEG）、BMP で作成された画像フォーマットを、ICO に変換します。ファビコンサイズは、16 x 16 と 32 x 32 と 48 x 48 ピクセルの 3 つのサイズから選択できます。また、このツールのサービス提供元から、ファビコン一括生成ツールの「様々なファビコンを一括生成。favicon 」や GIF アニメ作成、マルチアイコン作成など、その他の豊富なツールが提供されています。便利サイトとして押さえておくと良いでしょう。また、全てのツールは日本語に対応しています。
手持ちのファビコンファイルを拡張子 .ICO へと変換します。高速変換、透過対応、多サイズ対応、といったいくつかのメリットに加え、ファビコン変換の手順を説明する動画が用意されているところが特徴と言えます。日本語対応なのでスムーズに作業ができます。
8. おすすめ！ ファビコン作成ツール 8選
自分でファビコンを簡単に作成できるツールを紹介していきます。
Wix ロゴメーカー
Wix ロゴメーカはロゴだけでなく、ファビコンも併せて作成可能です。
いくつかのシンプルな質問に回答するだけで、AI（人工知能）が自動であなたにピッタリのロゴやアイコンを作成してくれます。
出来上がったロゴは、色やフォントなど自由に編集することができるので、自分だけのオリジナルファビコンに作りこむことができます。また、そのまますぐにサイトに追加することも簡単です。またプレミアムプランを購入することで、ファビコンに適切なファイル形式でダウンロードすることができます。
x-icon editor
元になるアイコン画像ファイルをアップロードして編集、または一からオリジナルのアイコンが作れるオンラインツールです。ICO 形式のアイコンファイルが生成され、Internet Explorer 9 以降のバージョンに適用する高解像度のアイコンの完成が期待できます。サイズは、16 x 16、24 x 24、32 x 32、64 x 64 ピクセルの 4 サイズに加工できます。また、ブラシ、ペンシル、消しゴムなどの基本的なツールを用いて作業でき、とてもシンプルで使い勝手のよいプラットフォームです。特徴として、「Preview」をクリックすると、実際のファビコン表示を 5 つの異なるブラウザタブを例に確認できます。
Favicon. CC
手軽にデザインを楽しめるこのツールは、直観的で操作性に優れています。ファイルのダウンロード形式は ICO 形式です。このツールの特徴は、ファビコン作成中に、フレーム下部に表示される「Preview」で実際のファビコン表示をリアルタイムで確認することができます。また、「Preview」のすぐ下に、ロゴ、ファビコン、アニメーションなどの英単語が書かれた「Tag Cloud」欄で、それぞれの英単語をクリックすると、その英単語に関連した、アイコン事例を見ることができます。デザインに繋がるアイデアに役立つでしょう。
Website Planet
画像をアップロード、または無料ギャラリーからファビコンを選択し、ファビコン生成ができます。「生成」をクリックすると、ファビコンをダウンロードできるだけでなく、ファビコンの HTML コードをコピーすることができるので、コードをサイトに記述する方法でファビコンを設置する方にお勧めです。また、日本語に対応しているので初心者の方でも使いやすいツールです。
Junior Icon Editor
Windows 8、7、 Vista、XP、2003、2000、ME、98、95、NT、iOS、Linux、Android など複数のブラウザとデバイスに対応したアイコンを作成でき、ファイル形式は、ICO、PNG、XPM、XBM、ICPR に変換できます。ペイントツールは、ペンシル、ブラシ、カーブなどの充分なツールと、カラーパレットの 256 色もの豊富な色彩を使ってデザインが楽しめます。この作成ツールを利用する場合は、ソフトウェアをダウンロードする必要があります。
Dynamic Drive Favicon Editor（ベータ版）
他のツールと同様にドットを塗りつぶしオリジナルのアイコンを作成、または元画像（16 x 16）をアップロードし自由に編集することができます。このツールの特徴は、編集・作成画面の右下「Favicon Gallery」に、いくつかの既存アイコンが用意されており、好みの色でぬり絵のように楽しく作業を進めることができる点です。
Webestools
このツールの特徴は、ファビコン作成に加え、クリックボタンやアニメーション画像など、他にもオリジナルで作成できる作成ツールが揃っています。また、それぞれのツールには、コード記述が必要なユーザーのために、HTML コードの記載があるので、実用性の高さが伺えます。生成できるファビコンのファイル形式は ICO 形式（16 x 16 または 32 x 32）です。
Favicon. by
元画像を圧縮、そしてオリジナルアイコンを作成できます。消しゴム、ペンシル、ブラシなど基本的なツールが揃っており、編集時はリアルタイムで実際のファビコンプレビューを見ることができます。編集画面の下部には、最近このツールを活用して作成されたファビコンデザインが表示されるので、デザインの参考になるでしょう。
9. ファビコンをサイトに設定する方法
次はいよいよファビコンを設定する手順を紹介します。自分で Web サイトを制作している場合はHTMLでファビコンを追加します。また Wixプレミアムプランへアップグレードすることで簡単にサイトへファビコンを追加することができます。
HTMLでファビコンを追加する方法
サイトのヘッダーに次の構文の <link> タグを追加します。
<link rel="shortcut icon" href="/path/to/favicon.ico"> rel 次のいずれかを指定。 ・"shortcut icon" ・"icon" ・"apple-touch-icon" ・"apple-touch-icon-precomposed" href ファビコンの URL を指定。 相対パス（例：/favicon.ico ）または絶対パス（例：https:// www. example. com/ favicon.ico ）で指定できますが、ホームページと同じドメインである必要があります。
Google は、Web サイトが変更されるたびに、そのサイトを評価するためクロール（サイトに追加する新しいページや更新されたページを検出するプロセス）します。ファビコンの URL を追加したことをすぐに Google に知らせたい場合は、URL の再クロールをリクエストしましょう。
Wixサイトにファビコンを追加する方法
Wix でサイトでファビコンを追加することは非常に簡単です。数回のクリックであっという間にあなたのサイトにファビコンを設置できます。
サイトダッシュボードから「設定」をクリック
「ファビコン」横の「管理」をクリック
「画像をアップロード」をクリック
ファビコンに設定したい画像を選択し「アップロード」をクリック
「画像を追加」をクリック
注：Wix で作成したサイトは、「Wix」のロゴがファビコンとして標準設定されています。ファビコンを変更する場合は、プレミアムプランへアップグレードが必要となります。また、Wix サイトに使用できるファビコンフォーマットは「.JPG」と「.PNG」です。
10. ファビコンの表示を確認する
ファビコンを更新したら、表示されるすべての場所（ブラウザタブ、ブックマーク、履歴、および可能であれば検索結果）で表示に問題がないか確認しましょう。確認を行うときは、キャッシュの問題を回避するために、シークレットモードに切り替えることをおすすめします。
あなたのサイトがすでにインデックスされている場合、サイト名を検索してみましょう。検索結果であなたのサイトとファビコンがどのように表示されるか確認できるでしょう。
これは、ファビコンの視認性を確認する機会でもあります。最終的なデザインは、あなたのブランドの本質をうまく捉えていますか？もう一度ユーザーの視点から考えてみましょう。
まとめ
いかがでしたか？
ファビコンは小さいながらも存在感は大きく、Web サイトのシンボル的な存在です。自社ブランドの強化を目指したいという方は、この機会にファビコンを設置してみましょう。
まだ、自分のサイトを持っていない方は、手軽にファビコン作成から設置までできる Wix を活用してホームページを作成しましょう！
東福 千恵
コミュニティ マネジャー
