ファビコンとは、ブラウザのタブに表示される小さなアイコン（16px × 16px）のことです。ブラウザで複数のタブを開いていても、一目でどのサイトのタブかがわかります。ファビコンはブラウザの上部にあるタブに表示される他に、ブックマークバー、履歴、さらに検索結果でページの URL と一緒に表示されます。

ファビコンは、お気に入り（favorite）に登録したときに表示されるアイコン（icon）を意味するフェイバリットアイコン（favorite icon）という言葉が由来で、これを略してファビコン（favicon）と呼ばれるようになりました。

Wix のホームページを例にした場合、デスクトップでのブラウザタブにはこのように表示されます。

ユーザーが Google で検索した時、一番最初に目にすることになる検索結果にもファビコンが表示されます。つまり、ファビコンは、ユーザーがあなたのウェブサイトを探している時の目印になるということです。印象的なファビコンを設定することで、ユーザーがあなたのサイトに再訪するチャンスを増やすことができます。

ファビコン作成に必要なサイズとファイル形式

ファビコンのサイズは、ブラウザや端末ごとに表示されるサイズが異なります。

例えば、基本となるブラウザのタブに表示されるファビコンは「16px × 16px」です。また、ブックマークアイコンに使用されるファビコンは「32px × 32px」のサイズですが、IE では「48px × 48px」のサイズが使用されています。さらに、デスクトップにショートカットを作成した時、アプリのアイコンのように表示されるファビコンのサイズは「96px × 96px」と、より大きくなります。

近年、ネット上のトラフィックの 70 ％以上はモバイルからと言われています。モバイル表示では、ファビコンの解像度は PC 版解像度の倍以上になります。具体的には「256px × 256px」以上の大きいサイズのファビコン画像が必要となることもあります。

しかし基本的にはまず、「16px × 16px」「32px × 32px」「96px × 96px」の 3 つのサイズでファビコンを作成することがおすすめです。

まず、必要となる最大の解像度でファビコンデザインを作成し、そのあとそれぞれのサイズに変更ツールを使って、サイズを変換しましょう。

サイズ変換ツールではサイズを最適化するだけでなく、「.ico」形式のファイルに自動変換してくれるものもあります。こうすることで、すべてのサイズのファビコンファイルを一括で作成することができます。

サイズ	用途
「16px × 16px」	ブラウザファビコン
「32px × 32px」	ブックマークやショートカットファビコン
「96px × 96px」	デスクトップショートカットファビコン
「180px × 180px」	Apple デバイス（iPad）用ファビコン
「256px × 256px」	Android ホーム画面表示用ファビコン

ファイル形式

ファビコンの主要なファイル形式は「.svg」「.png」「.gif」「.ico」などがあります。もともとファビコンに推奨されていた形式は ICO でしたが、現在は、ベクターアート、SVG 、PNG または JPEG が推奨されています。

SVG は表示サイズに影響されず、常にきれいな状態で表示できるため、人気のある選択肢になっています。現在では多くのブラウザが SVG に対応するようになっています。

また、ファビコンサイズの GIF 画像を作成することで、動きのあるファビコンとして表示することもできます。サイズが小さいとGIF ファビコンが見えにくくなるため、サイズの決定は注意して行いましょう。

ICO：Microsoft によって開発された、ファビコンのファイル形式。すべてのブラウザでサポートされており、一つのファイルに複数のサイズの画像を含めることができます。これにより、ブラウザに依存することなく、画像のサイズと拡大縮小を行うことができます。多くの場合、ファビコンが ICO およびその他のファイルタイプとして保存されている場合でも、ブラウザは ICO バージョンの表示を選択します。

PNG：ファビコンで人気のあるファイル形式です。作成が簡単な形式であり、通常、高品質の画像とファビコンを提供します。PNG ファイルは画像でありながら軽量なのですばやく読み込むことができます。

SVG：このファイル形式は非常に軽量で、ファビコンに最適だといえます。最大の利点は、ページ速度やサイトのパフォーマンスを低下させないで高品質の画像を配信できることです。しかし、ブラウザでの互換性がないことがこれまで問題でしたが、現在は主要なブラウザで利用できるようになり利用が広がっています。

透明度：デザインの背景が透明な場合は、透明度設定をオンにしてファイルを PNG として保存しましょう。

ファビコンとSEO

ファビコンは、サイトの SEO に直接影響を与えることはありません。ただし、全体的なユーザーの使いやすさが向上するため、優れたファビコンは検索結果での向上に貢献するといえます。

ファビコンを設置するメリットを理解したところで、実際にどのようにファビコンを作成し、設置するかを確認しましょう。

ファビコン設置のメリットとは？

ファビコンは、どんなウェブサイトのブランディングにも役立つ、マーケティング施作にとって便利なアセットです。ファビコンを正しく設定することで、サイトの使いやすさ、ブランディング、信頼性を向上させることができます。

メリット 1：使いやすさの向上

ファビコンは非常に目立つので、検索画面やタブに設置することで、ホームページの訪問者になんのページであるかを認識してもらえるようになります。ファビコンの設置により、ユーザビリティに配慮したサイトであるということを証明でき、使いやすさを向上させることができます。

メリット 2：ブランディング

よく知られている検索エンジン Google のファビコンは、Google の頭文字「G」をモチーフにし、社名ロゴのデザインや色合いを取り入れたアイコンを用いています。Wix の場合は、社名そのものをファビコンとして使用しています。このように、独自のファビコンを設置することで、ユーザーが一目でサイトのブランドを識別でき、ユーザーの記憶に残りやすくなります。

メリット 3：信頼性

ファビコンが設定されていない場合、そのウェブサイトがしっかり管理されている安全なサイトであるのか、不審を抱かれる可能性があります。ホームページを訪れるすべての人が安心できるように、ブランドのロゴやイメージにあったオリジナルのファビコンを設定しましょう。

ファビコンの設定により、「細部までブランドイメージにこだわる誠実な事業者」であることを発信でき、信頼感を高めることができます。いわば、ファビコンの存在は、そのページがネット上で安全であるかどうかを判断するバロメーターとしての役割を果たしています。

メリット 4：リピート率向上

ファビコンは強力なブランドアセットであり、検索結果や履歴などであなたのサイトをより目立たせることができます。そのため、見やすく印象的なファビコンは、ユーザーがサイトに再訪するのに役立ちます。さらに、ユーザーがサイトをブックマークした時もファビコンが目印となり、簡単にあなたのサイトを見つけることができます。

ファビコンの作り方とポイント

実際にファビコンデザインを作成する方法を 3 つのステップで紹介します。

STEP 1 参考となる画像やイメージを収集

ファビコンのデザインでは、シンプルな図形を使うことが肝要です。初めて作成する場合は、どのようなファビコンデザインが優れているのかわからないことも多いですよね。そこで、ホームページのイメージにあったファビコンの事例を検索し、デザインのインスピレーションを集めましょう。

その際に、競合サイトのファビコンを調査することで、自身の業界のファビコンデザインや、カラーパレットの傾向をつか無こともおすすめです。

STEP 2 オンラインツールを利用してデザインを作成

集めたインスピレーションをもとに、自身のブランドイメージや、屋号の文字、ブランドカラーを盛り込んだデザインを作成しましょう。デザインのバリエーションをたくさん作成することで、良いファビコンを選びやすくなります。

また、作成する際にはなるべくファビコンが実際に表示されるサイズでデザインを作成しましょう。

STEP 3 ファビコンを最適なファイル形式とサイズでダウンロード

納得できるファビコンデザインが作成できたら、サイズとファイル形式を確認してファイルをダウンロードしましょう。サイズとファイル形式は上記に述べた通りです。自身のファビコンの使用用途を確認して、最適なサイズとファイル形式を選択してください。

ファイルが用意できたら、実際にファビコンをホームページに設定しましょう。ファビコンをホームページに設置する方法は、お使いのホームページ作成ツールによって異なります。

ファビコンデザインのコツ

シンプルかつ印象的なデザインを作ることは簡単ではありません。ファビコンデザインは、表示されるサイズが限られているため、小さくても「わかる」デザインである必要があります。まずは、どのようなデザインにすることが可能なのか、さまざまなファビコン事例を参考にしながらアイデアを練りましょう。

その上、ファビコンはブランドイメージを表す必要があります。もし、ブランドのロゴマークがすでにある場合は、ロゴデザインとの統一感も重要です。洗練されたおしゃれな英語フォントを使うことで、印象的なロゴマークが作れるだけでなく、ロゴと雰囲気を合わせた、ブランド名の頭文字を使ったファビコンも簡単に作成できるでしょう。

時間をかけて、デザインのアイデアをいくつも試してみましょう。オンラインには、自分でロゴデザインからファビコンまで作成できるツールがたくさんあります。もし、納得のいくデザインが作成できなければ、プロのデザイナーのスキルシェアサービスである「Wix マーケットプレイス」で、デザイナーに制作代行を依頼することも検討してみましょう。

ロゴからファビコンを作成するときの注意点

ロゴをそのままファビコンに利用することは理想的ではありません。ファビコンサイズでもきれいに利用できるロゴがないわけではありませんが、恐らくほとんどの場合、ロゴを縮小すると判読できません。

ロゴをファビコンとして使用する場合は、デザイン調整が必要になります。デザインを単純化する、イニシャルを一つだけ使用するなど、ファビコンサイズでロゴを機能させる方法として挙げられます。

例えば、先述した Google のファビコンはロゴとは異なるデザインですよね。ファビコンには、おなじみの G イニシャルのみが表示され、ブランドの 4 色すべてを一つの文字に取り込むことでロゴとの一貫性を保っています。

あわせて読みたいおすすめ記事　

▶︎実践で役立つロゴデザインの作り方を徹底解説

ファビコンの設定方法

次に、ファビコンを設定する手順を紹介します。Wix では画像をアップロードするだけで簡単にファビコンが設定できます。WordPressで独自にテーマを編集したい場合や、ウェブサイトを独自で制作している場合は HTML を編集してファビコンを追加する必要があります。HTML でファビコンを追加するためには、それぞれの表示サイズごとに　HTMLタグを設定する必要があります

HTML でファビコンを追加する方法

サイトの<head>セクションに次の <link> タグを追加

<link rel="shortcut icon" href="ファビコンに指定したいファイル">

link rel=の後には次のいずれかを指定します。 "shortcut icon" "icon" "apple-touch-icon"
href=の後にはファビコンファイルの URL を指定します相対パス（例：/favicon.ico ）絶対パス（例：https:// www. example. com/ favicon.ico ） URL はホームページと同じドメインである必要があります。

Google は、ウェブサイトが変更されるたびに、そのサイトを評価するためにクロール（サイトに追加する新しいページや更新されたページを検出するプロセス）します。ファビコンの URL を追加したことをすぐに Google に知らせたい場合は、URL の再クロールをリクエストしましょう。

Wix でウェブサイトにファビコンを追加する方法

Wix でサイトにファビコンを追加することはとても簡単です。数回のクリックであっというまにあなたのサイトにファビコンを設置できます。

ウェブサイトを公開する
サイトダッシュボードの左に表示されているメニューから「設定」をクリック
基本設定の内の「サイトの設定」をクリック
ファビコンのセクションから「画像のアップロード」をクリック
ファビコンに設定したい画像ファイルを選択

Wix で作成したサイトは、「Wix」のロゴがファビコンとして標準設定されています。ファビコンを変更する場合は、プレミアムプランへのアップグレードが必要となります。また、Wix サイトに使用できるファビコンファイルは「.jpg」と「.png」です。

ファビコンの表示を確認する

ファビコンを設定したら、表示されるすべての場所（ブラウザタブ、ブックマーク、履歴、および可能であれば検索結果）で表示に問題がないか確認しましょう。確認を行うときは、キャッシュの問題を回避するために、シークレットモードに切り替えることをおすすめします。

あなたのサイトがすでにインデックスされている場合、サイト名を検索してみましょう。検索結果であなたのサイトとファビコンがどのように表示されるかを確認できるでしょう。

これは、ファビコンの視認性を確認する機会でもあります。最終的なデザインは、あなたのブランドの本質をうまく捉えていますか？もう一度ユーザーの視点から考えてみましょう。

画像をファビコンサイズに変換する無料ツール

すでにロゴやアイコンを持っていて、それをファビコンとしても使いたい場合はサイズ変換ツールが便利です。

01. Your generated favicon

お手持ちの画像を、全てのブラウザ、スマホのアプリサイズ、Windows での表示に対応したファビコンとしてサイズ変換してくれるサイトです。必要なファイル及び、 HTML コードを生成することができます。さらに、それぞれの環境でどのように見えるのか、画像でプレビューができる点で優れています。

最大サイズの 260 x 260 でのファビコンが作成できるよう解像度の高い画像を選択しましょう。画像が SVG ファイルであれば、色調を反転してダークモード表示に対応したファビコンの作成も可能です。

ファビコンサイズ変換ツールYour generated faviconのスクリーンショット

02. ファビコン favicon.ico 作成

無料で半透過のアイコンが作成できる優れたツールです。PNG、GIF、JPG（JPEG）、BMP で作成された画像フォーマットを、ICO に変換します。ファビコンサイズは、「16 × 16」「32 × 32」「48 × 48」ピクセルの 3 つのサイズから選択できます。また、このツールのサービス提供元から、 GIF アニメ作成、マルチアイコン作成など、その他の豊富なツールが提供されています。便利サイトとして押さえておくと良いでしょう。また、全てのツールは日本語に対応しています。

まとめ

いかがでしたか？

ファビコンは小さいながらも存在感は大きく、ウェブサイトのシンボル的な存在です。自社ブランドの強化を目指しているのであれば、この機会にファビコンを設置してみましょう。

まだ自分のサイトを持っていないなら、ファビコンの作成からホームページへの設置まで手軽にできる Wix ロゴメーカーを活用してみませんか？簡単な質問に答えるだけで、AI がおしゃれなロゴデザインを提案します。

まずは無料でロゴメーカーの自動ロゴ作成機能をお試しください。

Wix ロゴメーカーを無料で試す

編集者：Miyuki Shimose

ブログコンテンツマネージャー

ファビコン（favicon）とは？作成から設定まで徹底解説【オススメ作成ツール紹介】