ファビコン作成方法を徹底解説：ファビコンでサイトのブランド力を高めよう
Web サイトにファビコン（Favicon）を設置していますか？
ファビコンとは、サイトのタブに表示される小さなアイコン。Web サイト上のデザインやコンテンツに気を取られ、ファビコンの設置を見落としてしまうことは少なくありません。
そんな、つい忘れがちになってしまうファビコンですが、実はサイトのブランドを高めるための絶好のツールです。
そこで、この記事ではファビコンが具体的にどのような役割を担っているのか理解を深めるとともに、ファビコンの作成から設置までの手順を分かりやすく解説します。
8 つのファビコン作成ツールと、適切なファイル形式・サイズに自動で変換してくれる 3 つの変換ツールも記事の中で紹介しています。
ファビコンとは？
ファビコンは、お気に入り（favorite）に登録したときに表示されるアイコン（icon）を意味する favorite icon（フェイバリット・アイコン）が名前の由来です。この名前を縮約して、favicon（ファビコン）と呼ばれるようになりました。
ブラウザ上サイトアドレスの隣、ブラウザタブやお気に入り登録リストに表示されるアイコンがファビコンです。Wix のホームページを例にした場合、デスクトップでのブラウザタブにはこのように表示されます。
2019 年 5月、Google はモバイルでの検索結果にファビコンを表示する新デザインを導入しました。これは、ファビコンが Web サイトの「ブランド」を視覚的に表し、ユーザーが検索結果を見た際に一目でサイトを見分けられることを促します。ますますファビコン設置の重要性が高まったと言えるでしょう。スマートフォン上の検索結果ではファビコンはこのように表示されます。
ファビコン設置の利点とは？
ファビコンは、サイトのブランディングを高めるための絶好のツールです。この特徴をより深く理解するために、以下 2 つの利点を頭に入れておきましょう。
一目で Web サイトを識別できる：
たとえば、多くの人が日頃から利用している検索エンジン Google のファビコンは、Google の頭文字「G」をモチーフにし、社名ロゴのデザインや色合いを取り入れたアイコンが使われています。Wix の場合は、社名そのものをファビコンとして使用しています。このように、独自のファビコンを設置することで、ユーザーが一目でサイトのブランドを識別でき、印象に残りやすくなります。
ユーザビリティを向上できる：
インターネットで検索をしながら作業をしていると、沢山のブラウザタブが開きっぱなしになりがちです。ファビコンを設置していないと、このような状況においてサイトが埋もれてしまい、再度、目当ての Web サイトに戻ることは容易ではないでしょう。ユーザーが Web サイトを識別する要素となるファビコンを設置することは、よりユーザビリティに配慮したサイトを作成できることに繋がります。
ファビコンを設置する利点を理解したところで、実際にどのようにファビコンを作成し、設置するかを確認しましょう。
ファビコンの作成方法
ファビコンは通常のアイコンやロゴとはやや異なるため、ファビコンのあり方を意識したデザインのコツを確認しましょう。
ファビコンデザインのコツ
ファビコンはサイズ的に大きくないため、細かなデザインを施すのではなく、小さくても見やすく分かりやすいシンプルなデザインにすべきです。
また、ファビコンを設置していないサイトは、グレーの地球儀マークが表示されます。ユーザーの視線を引くという点で、グレーと対照的なトーンの色相を取り入れることにより、よりユーザーの目に止まりやすくなるでしょう。
しかし、ファビコンの役割は、先述のとおりサイトのブランディングを高めることです。そのため、ファビコンを単に目立たせるということではなく、作成したサイトのイメージとかけ離れることなく、一貫性のあるデザインにする必要性があります。
3 つのコツを押さえ、次に進みましょう。
極力シンプルに
ユーザーの視線を引くことを意識
サイトのイメージと一貫性を持たせる
ファビコンのサイズとフォーマット
ファビコンをサイトや検索結果に表示させるには、サイズやフォーマットなどの規定を満たす必要があります。Google がファビコンのガイドラインを発表しているので、確認してみましょう。要約は下記の通りです。
ファビコンのサイズが 48 ピクセルの倍数であること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）
16 × 16 ピクセルのファビコンは指定しない
Google がファビコンのファイルとホームページをクロールできること（Google をブロックしない）
サイトのブランドを視覚的に識別できるファビコンであり、ユーザーが検索結果を見ただけでサイトを判別できること
ファビコンの URL は固定すること（頻繁に変更しない）
有効なファビコンの主要なフォーマットには「.png」「.gif」「.ico」などがあります。
３つのサイズ無料変換ツール
すでにロゴやアイコンを持っていて、それをファビコンとしても使いたい場合は変換ツールが便利です。
英語のツールですが、使い方はいたって簡単です。アイコン画像をアップロードすると、下部にプレビューが表示されます。プレビュー確認後、ICO または PNG 形式を選択してダウンロードするだけのシンプルなツールです。また、正方形でないアイコン画像をアップロードした場合は、上記の画像のようにファビコンにしたい部分を適正サイズで選択することができます。
無料で半透過のアイコンが作成できる優れたツールです。 PNG、 GIF、JPG（JPEG）、BMP で作成された画像フォーマットを、ICO に変換します。ファビコンサイズは、16 x 16 と 32 x 32 と 48 x 48 ピクセルの 3 つのサイズから選択できます。また、このツールのサービス提供元から、ファビコン一括生成ツールの「様々なファビコンを一括生成。favicon 」や GIF アニメ作成、マルチアイコン作成など、その他の豊富なツールが提供されています。便利サイトとして押さえておくと良いでしょう。また、全てのツールは日本語に対応しています。
手持ちのファビコンファイルを拡張子 .ICO へと変換します。高速変換、透過対応、多サイズ対応、といったいくつかのメリットに加え、ファビコン変換の手順を説明する動画が用意されているところが特徴と言えます。日本語対応なのでスムーズに作業ができます。
無料で使える 8 つのファビコン作成ツール
以下、初心者の方でも気軽に使える 8 つのファビコン作成ツールを紹介します。
いくつかのシンプルな質問に回答するだけで、AI（人工知能）が自動であなたにピッタリのロゴやアイコンを作成してくれるツールです。
出来上がったロゴは、色やフォントなど自由に編集することができるので、自分だけのオリジナルなアイコンに作りこむことができます。
元になるアイコン画像ファイルをアップロードして編集、または一からオリジナルのアイコンが作れるオンラインツールです。ICO 形式のアイコンファイルが生成され、Internet Explorer 9 以降のバージョンに適用する高解像度のアイコンの完成が期待できます。サイズは、16 x 16、24 x 24、32 x 32、64 x 64 ピクセルの 4 サイズに加工できます。また、ブラシ、ペンシル、消しゴムなどの基本的なツールを用いて作業でき、とてもシンプルで使い勝手のよいプラットフォームです。特徴として、「Preview」をクリックすると、実際のファビコン表示を 5 つの異なるブラウザタブを例に確認できます。
手軽にデザインを楽しめるこのツールは、直観的で操作性に優れています。ファイルのダウンロード形式は ICO 形式です。このツールの特徴は、ファビコン作成中に、フレーム下部に表示される「Preview」で実際のファビコン表示をリアルタイムで確認することができます。また、「Preview」のすぐ下に、ロゴ、ファビコン、アニメーションなどの英単語が書かれた「Tag Cloud」欄で、それぞれの英単語をクリックすると、その英単語に関連した、アイコン事例を見ることができます。デザインに繋がるアイデアに役立つでしょう。
Windows 8、7、 Vista、XP、2003、2000、ME、98、95、NT、iOS、Linux、Android など複数のブラウザとデバイスに対応したアイコンを作成でき、ファイル形式は、ICO、PNG、XPM、XBM、ICPR に変換できます。ペイントツールは、ペンシル、ブラシ、カーブなどの充分なツールと、カラーパレットの 256 色もの豊富な色彩を使ってデザインが楽しめます。この作成ツールを利用する場合は、ソフトウェアをダウンロードする必要があります。
画像をアップロード、または無料ギャラリーからファビコンを選択し、ファビコン生成ができます。「生成」をクリックすると、ファビコンをダウンロードできるだけでなく、ファビコンの HTML コードをコピーすることができるので、コードをサイトに記述する方法でファビコンを設置する方にお勧めです。また、日本語に対応しているので初心者の方でも使いやすいツールです。
Dynamic Drive Favicon Editor（ベータ版）
他のツールと同様にドットを塗りつぶしオリジナルのアイコンを作成、または元画像（16 x 16）をアップロードし自由に編集することができます。このツールの特徴は、編集・作成画面の右下「Favicon Gallery」に、いくつかの既存アイコンが用意されており、好みの色でぬり絵のように楽しく作業を進めることができる点です。
このツールの特徴は、ファビコン作成に加え、クリックボタンやアニメーション画像など、他にもオリジナルで作成できる作成ツールが揃っています。また、それぞれのツールには、コード記述が必要なユーザーのために、HTML コードの記載があるので、実用性の高さが伺えます。生成できるファビコンのファイル形式は ICO 形式（16 x 16 または 32 x 32）です。
元画像を圧縮、そしてオリジナルアイコンを作成できます。消しゴム、ペンシル、ブラシなど基本的なツールが揃っており、編集時はリアルタイムで実際のファビコンプレビューを見ることができます。編集画面の下部には、最近このツールを活用して作成されたファビコンデザインが表示されるので、デザインの参考になるでしょう。
ファビコンをサイトへ設置
理想のアイコンが完成したら、いよいよファビコンをあなたのサイトへ設置する時です。
先に述べた Google のガイドラインを参考のもと作成したファビコンを、次の手順で設置してみましょう。
サイトのヘッダーに次の構文の <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 サイトに使用できるファビコンフォーマットは「.JPG」と「.PNG」です。
まとめ
いかがでしたか？
ファビコンは小さいながらも存在感は大きく、Web サイトのシンボル的な存在です。ブランディング強化を目指したいという方は、この機会にファビコンを設置してみましょう。
この記事を参考に、ファビコンを作成して、今すぐあなたのサイトへ設置してみましょう。ほんの少しの作業があなたのビジネスの加速に繋がります。
まだ、自分のサイトを持っていない方は、手軽にファビコン作成から設置までできる Wix を活用してホームページを作成しましょう！
東福 千恵
コミュニティ マネジャー
