ファビコン（favicon）とは？作成から設定まで徹底解説【オススメ作成ツール紹介】
更新日 2023年10月5日（公開日 2019 年6月21日）
小さいながらも重要なファビコン（favicon）。見過ごされがちですが、ウェブサイトの印象を左右する重要な存在です。ブランドイメージの魅力を表現できる、優れたファビコンを作成し、強力なブランディングツールをあなたのサイトにも設置しましょう。そこで、本記事ではファビコンについて、デザインのコツや設定方法を詳しく解説します。
ファビコンを作成する場合は、ロゴと一緒に作成することがおすすめです。ファビコンも作成できるロゴジェネレーターなどを使って早速作成してみましょう。
＼AI がオリジナルロゴ生成をアシスト／
目次
ファビコン（favicon）とは？
ファビコンとは、ブラウザのタブに表示される小さなアイコン（16px × 16px）のことです。ブラウザで複数のタブを開いていても、一目でどのサイトのタブかがわかります。ファビコンはブラウザの上部にあるタブに表示される他に、ブックマークバー、履歴、さらに検索結果でページの URL と一緒に表示されます。
ファビコンは、お気に入り（favorite）に登録したときに表示されるアイコン（icon）を意味するフェイバリットアイコン（favorite icon）という言葉が由来で、これを略してファビコン（favicon）と呼ばれるようになりました。
Wix のホームページを例にした場合、デスクトップでのブラウザタブにはこのように表示されます。
ユーザーが Google で検索した時、一番最初に目にすることになる検索結果にもファビコンが表示されます。つまり、ファビコンは、ユーザーがあなたのウェブサイトを探している時の目印になるということです。印象的なファビコンを設定することで、ユーザーがあなたのサイトに再訪するチャンスを増やすことができます。
ファビコン作成に必要なサイズとファイル形式
一般的にブラウザのタブに表示されるファビコンは「16px × 16px」です。しかし、ブックマークアイコンに使用されるファビコンは「32px × 32px」、IE では「48px × 48px」、ショートカットを作成した時、アプリのアイコンのように表示されるファビコンのサイズは「96px × 96px」と表示場所によってサイズが変わります。そのため、複数のサイズを用意する必要があり、それぞれの画像をまとめられる「.ico」の形式に変換するのが最も使いやすい形です。
一方で、Google Chrome では、ブラウザが自動的にファビコンサイズを拡大・縮小して表示するため、「192pxｘ192px」のファビコンサイズが推奨されています。自動変換を望まない場合は、「16px × 16px」「32px × 32px」「96px × 96px」といったサイズのバリエーションを作成しアップロードしましょう。
近年、ネット上のトラフィックの 70 ％ 以上はモバイルからと言われています。モバイル表示では、ファビコンの解像度は PC 版解像度の倍以上になります。具体的には「256px × 256px」など大きいサイズのファビコン画像が必要となることもあります。
まずは、「256px × 256px」のサイズでファビコンデザインを作成し、「.png」で書き出した後、サイズ変更ツールを使って、サイズを変換しましょう。
サイズ変換ツールではサイズを最適化するだけでなく、「.ico」形式のファイルに自動変換してくれるものもあります。こうすることで、すべてのサイズのファビコンファイルを一括で作成することができます。
サイズ | 用途 |
「16px × 16px」 | ブラウザファビコン |
「32px × 32px」 | ブックマークやショートカットファビコン |
「96px × 96px」 | デスクトップショートカットファビコン |
「180px × 180px」 | Apple デバイス（iPad）用ファビコン |
「192px × 192px」 | Chrome 推奨ファビコンサイズ |
「256px × 256px」 | Android ホーム画面表示用ファビコン |
ファビコンサイズの基準： 32px 以上のサイズであれば、48 の倍数となっています。
ファイル形式
ファビコンの主要なファイル形式は「.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：リピート率向上
ファビコンは強力なブランドアセットであり、検索結果や履歴などであなたのサイトをより目立たせることができます。そのため、見やすく印象的なファビコンは、ユーザーがサイトに再訪するのに役立ちます。さらに、ユーザーがサイトをブックマークした時もファビコンが目印となり、簡単にあなたのサイトを見つけることができます。
＼AI がオリジナルロゴ生成をアシスト／
ファビコンの作成と設定のポイント
実際にファビコンデザインを作成する方法を 3 つのステップで紹介します。
STEP 1 参考となる画像やイメージを収集
ファビコンのデザインでは、シンプルな図形を使うことが肝要です。初めて作成する場合は、どのようなファビコンデザインが優れているのかわからないことも多いですよね。まずは、ファビコンの事例を検索し、デザインのインスピレーションを集めましょう。
その際に、競合サイトのファビコンを調査することで、自身の業界のファビコンデザインや、カラーパレットの傾向をつかむこともおすすめです。
STEP 2 オンラインツールを利用してデザインを作成
集めたインスピレーションをもとに、自身のブランドイメージや、屋号の文字、ブランドカラーを盛り込んだデザインを作成しましょう。ファビコンは正方形なので、正方形のフレームの中でバランスが取れるデザインにすることがコツです。
たくさんのデザインのバリエーションを作成し、その中から良いファビコンを選びましょう。
STEP 3 ファビコンを最適なファイル形式とサイズでダウンロード
納得できるファビコンデザインが作成できたら、サイズとファイル形式を確認してファイルをダウンロードしましょう。サイズとファイル形式は上記に述べた通り、標準サイズが「16px × 16px」、そしてファビコンの使用用途を確認して、最適なサイズとファイル形式を選択してください。
ファイルが用意できたら、実際にファビコンをホームページに設定しましょう。ファビコンをホームページに設置する方法は、お使いのホームページ作成ツールによって異なります。
ファビコンデザインのコツ
シンプルかつ印象的なデザインを作ることは簡単ではありません。ファビコンデザインは、表示されるサイズが限られているため、小さくても「わかる」デザインである必要があります。まずは、どのようなデザインにすることが可能なのか、さまざまなファビコン事例を参考にしながらアイデアを練りましょう。
その上、ファビコンはブランドイメージを表す必要があります。もし、ブランドのロゴマークがすでにある場合は、ロゴデザインとの統一感も重要です。洗練されたおしゃれな英語フォントを使うことで、印象的なロゴマークが作れるだけでなく、ロゴと雰囲気を合わせた、ブランド名の頭文字を使ったファビコンも簡単に作成できるでしょう。
時間をかけて、デザインのアイデアをいくつも試してみましょう。オンラインには、Wix ロゴメーカーのように、ロゴデザインからファビコンまで作成できるツールがあります。もし、自分で作成することが不安な場合は、プロデザイナーのスキルシェアサービスである「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」です。
＼ Wix の本格ホームページ作成ツール／
もっと詳しく ▶︎ Wix の AI サイトビルダーをご存知ですか？ AI で Web サイトを自動生成する、次世代の Web 制作ツールをお試しください。ほかにもWix のAI 機能の紹介と使い方を紹介した記事も要チェックです。
ファビコンの表示を確認する
ファビコンを設定したら、表示されるすべての場所（ブラウザタブ、ブックマーク、履歴、および可能であれば検索結果）で表示に問題がないか確認しましょう。確認を行うときは、キャッシュの問題を回避するために、シークレットモードに切り替えることをおすすめします。
あなたのサイトがすでにインデックスされている場合、サイト名を検索してみましょう。検索結果であなたのサイトとファビコンがどのように表示されるかを確認できるでしょう。
これは、ファビコンの視認性を確認する機会でもあります。最終的なデザインは、あなたのブランドの本質をうまく捉えていますか？もう一度ユーザーの視点から考えてみましょう。
おすすめ！ファビコンデザインツール 4 選
01. Wix ロゴメーカー
Wix ロゴメーカーはロゴだけでなく、ファビコンも併せてデザインすることが可能です。いくつかのシンプルな質問に回答するだけで、AI（人工知能）が自動であなたにピッタリのロゴやアイコンを作成してくれます。
提案されたロゴは、色やフォントなど自由に編集することができるので、自分だけのオリジナルファビコンに作りこむことができます。また、そのまますぐサイトに追加することも簡単です。ロゴとファビコン、そしてウェブサイト全てで、統一された強力なブランディングビジュアルを作成できます。
＼わずか数分で、おしゃれなロゴを作成／
02. x-icon editor
もとになるアイコン画像ファイルをアップロードして編集、または一からオリジナルのアイコンが作れるオンラインツールです。ICO 形式のアイコンファイルが生成され、Internet Explorer 9 以降のバージョンに適用する高解像度のアイコンを作成できます。サイズは、「16 x 16」「24 x 24」「32 x 32」「64 x 64」ピクセルの 4 サイズに加工できます。また、ブラシ、ペンシル、消しゴムなどの基本的なツールを用いて作業でき、とてもシンプルで使い勝手のよいプラットフォームです。特徴として「Preview」をクリックすると、5 つの異なるブラウザタブを例にして、実際のファビコン表示を確認できます。
03. Favicon. CC
手軽にデザインを楽しめるこのツールは、直観的で操作性に優れています。ファイルのダウンロード形式は ICO 形式です。このツールの特徴は、ファビコン作成中にフレーム下部に表示される「Preview」で、実際のファビコン表示をリアルタイムで確認することができます。また、「Preview」のすぐ下に、ロゴ、ファビコン、アニメーションなどの英単語が書かれた「Tag Cloud」欄があり、それぞれの英単語をクリックすると、その英単語に関連したアイコン事例を見ることができます。デザインに繋がるアイデアのヒントとして役立つでしょう。
04. Website Planet
画像をアップロードする、または無料ギャラリーからファビコンを選択し、ファビコン生成ができます。「生成」をクリックすると、ファビコンをダウンロードできるだけでなく、ファビコンの HTML コードをコピーすることができるので、コードをサイトに記述する方法でファビコンを設置する方におすすめです。また、日本語に対応しているので初心者にも使いやすいツールです。
画像をファビコンサイズに変換する無料ツール
すでにロゴやアイコンを持っていて、それをファビコンとしても使いたい場合はサイズ変換ツールが便利です。
お手持ちの画像を、全てのブラウザ、スマホのアプリサイズ、Windows での表示に対応したファビコンとしてサイズ変換してくれるサイトです。必要なファイル及び、 HTML コードを生成することができます。さらに、それぞれの環境でどのように見えるのか、画像でプレビューができる点で優れています。
最大サイズの 260 x 260 でのファビコンが作成できるよう解像度の高い画像を選択しましょう。画像が SVG ファイルであれば、色調を反転してダークモード表示に対応したファビコンの作成も可能です。
無料で半透過のアイコンが作成できる優れたツールです。PNG、GIF、JPG（JPEG）、BMP で作成された画像フォーマットを、ICO に変換します。ファビコンサイズは、「16 × 16」「32 × 32」「48 × 48」ピクセルの 3 つのサイズから選択できます。また、このツールのサービス提供元から、 GIF アニメ作成、マルチアイコン作成など、その他の豊富なツールが提供されています。便利サイトとして押さえておくと良いでしょう。また、全てのツールは日本語に対応しています。
まとめ
ファビコンは小さいながらも存在感は大きく、ウェブサイトのシンボル的な存在です。自社ブランドの強化を目指しているのであれば、この機会にファビコンを設置してみましょう。
まだ自分のサイトを持っていないなら、ファビコンの作成からホームページへの設置まで手軽にできる Wix ロゴメーカーを活用してみませんか？簡単な質問に答えるだけで、AI がおしゃれなロゴデザインを提案します。
まずは無料で Wix の AI ロゴ作成機能をお試しください。
＼わずか数分で、おしゃれなロゴを無料で作成／
編集者：Miyuki Shimose
ブログ コンテンツマネージャー
