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



この記事は 2019 年 6 月 21 日に公開、2022 年 11 月 21 日に更新しています。


小さいながらも重要なファビコン。見過ごされがちですが、ウェブサイトの印象を左右する重要な存在です。ロゴやブランドイメージの魅力を表現できる、優れたファビコンを作成し、この強力なブランディングツールをあなたのサイトにも設置しましょう。

本記事では、このファビコンについて、デザインのコツや設定方法を詳しく解説します。


目次

ファビコンとは?

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

メリット 1:使いやすさの向上 メリット 2:ブランディング メリット 3:信頼性 メリット 4:リピート率向上

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

サイズ無料変換ツール

ファビコンとSEO

ファビコンの作り方

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

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

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

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

ロゴからファビコンは作れる?

ファビコンの設定方法

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

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

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

おすすめ!ファビコンデザインツール 4 選


ファビコンとは?


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


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


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


デスクトップ検索結果上のWix.comのファビコン

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

モバイル検索結果のWix.comのファビコン


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


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


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

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

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

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

メリット 3:信頼性

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

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

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

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


ブックマークに保存されたサイトとそのファビコンの表示例


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


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

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

このようにファビコンは表示されるデバイスやブラウザによって異なるファイルが必要となります。しかし、基本的にはまず、「16px × 16px」「32px × 32px」「96px × 96px」の 3 つのサイズでファビコンを作成しましょう。

おすすめは、まず必要となる最大の解像度でデザインを作成し、そのあとそれぞれのサイズに変更することです。

画像を一つ作成したら、後述のサイズ変換ツールでサイズを最適化したり、ジェネレータで「.ico」形式のファイルを作成しましょう。こうすることで、すべてのサイズのファビコンファイルを一つにまとめることができ、さらに適した場所で適したサイズの表示が可能になります。

サイズ

用途

「16 × 16」 ピクセル

ブラウザファビコン

「32 × 32」 ピクセル

ブックマークやショートカットファビコン

「96 × 96」 ピクセル

デスクトップショートカットファビコン

「180 × 180」 ピクセル

Apple デバイス(iPad)用ファビコン

「256 × 256」ピクセル

Android ホーム画面表示用ファビコン

ファイル形式

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


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


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

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

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

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

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


サイズ無料変換ツール

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

Your generated favicon


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


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


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

ファビコン favicon.ico 作成

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


ファビコンとSEO


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

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


検索画面に表示されるファビコンの表示例


ファビコンデザインの作成方法:3 つのステップ


実際にファビコンデザインを作成する方法を 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」です。



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

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

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

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



おすすめ!ファビコンデザインツール 4 選


01. Wix ロゴメーカー



Wix ロゴメーカーはロゴだけでなく、ファビコンも併せてデザインすることが可能です。いくつかのシンプルな質問に回答するだけで、AI(人工知能)が自動であなたにピッタリのロゴやアイコンを作成してくれます。


提案されたロゴは、色やフォントなど自由に編集することができるので、自分だけのオリジナルファビコンに作りこむことができます。また、そのまますぐサイトに追加することも簡単です。ロゴとファビコン、そしてウェブサイト全てで、統一された強力なブランディングビジュアルを作成できます。


02. x-icon editor


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


 Favicon.CC ファビコン作成ツール

手軽にデザインを楽しめるこのツールは、直観的で操作性に優れています。ファイルのダウンロード形式は ICO 形式です。このツールの特徴は、ファビコン作成中にフレーム下部に表示される「Preview」で、実際のファビコン表示をリアルタイムで確認することができます。また、「Preview」のすぐ下に、ロゴ、ファビコン、アニメーションなどの英単語が書かれた「Tag Cloud」欄があり、それぞれの英単語をクリックすると、その英単語に関連したアイコン事例を見ることができます。デザインに繋がるアイデアのヒントとして役立つでしょう。


04. Website Planet


Website Planet ファビコン作成ツール

画像をアップロードする、または無料ギャラリーからファビコンを選択し、ファビコン生成ができます。「生成」をクリックすると、ファビコンをダウンロードできるだけでなく、ファビコンの HTML コードをコピーすることができるので、コードをサイトに記述する方法でファビコンを設置する方におすすめです。また、日本語に対応しているので初心者にも使いやすいツールです。



まとめ


いかがでしたか?

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

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

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




編集者:Miyuki Shimose

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

ja03.png