ファビコンとは、ブラウザのタブやアドレスバーに表示される、サイトのシンボルとなるアイコンのことを指します。

サイトを運営するにあたって、ファビコンを目にする機会があるはずです。ファビコンはサイズが小さく、ユーザーに与える情報量が少ないため重要性を見出せていない方も少なくありません。

しかし、ファビコンはサイトにおいて重要な要素の1つで、間接的ですがSEOにも影響を及ぼします。設定しているか否かで、集客やブランディングに大幅な違いが生じるにもかかわらず、いまだに設定していないサイトが多く見られるのが事実です。

そこで、今回はファビコンの作成方法やSEOとの関係性など、ファビコンについて詳しくご説明いたします。

ファビコンとは

ファビコン（Favicon）とは、フェイバリットアイコン（Favorite icon）の略で、サイトやブログのシンボルとなるアイコンのことです。ブログやサイトを持っている人であれば誰でも設置可能で、以下の位置に表示されます。

スマートフォンのホーム画面にサイトのショートカットを設置している人は、よく目にしているはずです。

ファビコンのサイズは最低限3つ用意する

ファビコンのサイズは、以下のように表示するブラウザによってさまざまです。

出典：【2022年最新版】ファビコン（favicon）のサイズ一覧と作り方

すべてのサイズを作成すると時間がかかりますので時間がない方は必ずしも用意する必要はありません。

しかし、最低でも以下の3つは揃えてください。

上記の3つを揃えることでスマートフォン、ブラウザともに対応できます。

ファビコンの拡張子は.icoが望ましい

ファビコンの拡張子は.icoがもっとも望ましい形です。.pngや.gifでも表示することは可能ですが、ブラウザによっては表示されないものもあります。

.pngや.gifしか持っていない場合、以下のようなWEBで展開されているサービスを利用することで.icoに変換可能です。

また、WordPressには、一般的な画像をアップロードすることでファビコンとして表示できる機能もあります。

.icoは複数の画像を1つにまとめられる

.icoは1つのファイルに複数の画像をまとめられるという特徴があります。表示箇所に合わせて適切なサイズを自動で選択をしてくれるため、1つ1つ割り当てる必要がありません。

ファビコンが表示される3つの場所

ファビコンが表示される場所は次の3ヶ所です。

タブやアドレスバーの左端

ブラウザでサイトやブログを開いた際、タブやアドレスバーの左端にファビコンが表示されていることがほとんどです。ファビコンをもっとも目にする場所ともいえます。

ブックマークしているサイトのタイトルの左端

お気に入りのサイトやブログへすぐアクセスしたい場合、ブックマークをすることがあります。ブックマークされたサイトやブログのタイトルは一覧になり、そのタイトルの左端にファビコンが表示されます。

検索結果のURLの左端

検索エンジンを使用した際、検索結果にはタイトルやURL、概要文が羅列されます。過去にはパソコンの検索結果にファビコンが表示されたこともありますが、現在ではスマホに限ってURLの左端にファビコンが表示されます（2022年3月時点）。

ファビコンを設定する3つのメリット

ファビコンは必ずしも設定する必要はありません。しかし、設定することで以下のようなメリットが存在します。

何のサイトであるかすぐに分かってもらえる

ファビコンを設定することで、自分のサイトが何を発信している、何が得られる、何があるのかを認識してもらえます。

ブラウザで複数のタブを開いていると、目的のタブを見失うこともよくあります。目的のタブを見失ってしまうとサイト離脱率の上昇に直結してしまいます。その際に、ファビコンを設定していると目的のタブを瞬時に見つけることが可能なうえ、結果的にサイト離脱率も下がります。

ユーザーのことを考えるのであれば、ファビコンは設定すべきです。

信頼を得られる

ファビコンを設定しているとユーザーは次のような思いを抱くため、信頼できるサイトだと思われます。

ネットが普及していくとともに、ユーザーの危機感も増しているのが事実です。そのため、ファビコンを設定することで安心してサイトを訪れてもらえます。特に世間でよく知られているようなロゴだと信頼性は一気に高くなります。

ブランディングになる

企業などのイメージをそのままファビコンに反映させることで、ブランディングになります。

企業のサイトがファビコンにロゴマークを多く採用している理由は、ブランディングを助長しサイトのアクセス数をアップさせるためです。

ファビコンが世の中に広く認知されるようになれば、数あるサイトやブログのなかから、自分のサイトやブログにアクセスが集まるようになります。

ファビコンを見ただけでどのサイトか分かるようにすることが肝心です。

ファビコンとSEOの関係性

サイトを運営するにあたりSEOへの配慮は必須です。SEOにはさまざまな種類がありますが、ファビコンがSEOに与える影響を詳しく知る方はそう多くはありません。

ファビコンとSEOに直接的な関係性はない

ファビコンとSEOに直接的な関係はありません。したがって、ファビコンを設置しないからといってSEOに直接悪影響を与えるわけではありません。

ファビコンとSEOの間接的な関係性

ファビコンを設定していないサイトは、次のような理由でユーザーからの評価が低くなることがあります。

ブックマークや同時に開いているタブの数が多い場合、ファビコンを設定している方が、どこに何のサイトがあるかが一目瞭然です。したがって、ファビコンを設定するとサイトの視認性を上げることができ、結果的に滞在時間と回遊率の上昇が見込めます。

滞在時間と回遊率の上昇は、SEOと直接的な関係はありません。しかし、滞在時間と回遊率の上昇はユーザーの信頼がアップしたともいえます。

かなり遠回しではありますが、ファビコンの設定はSEO効果がないとは言い切れません。

ファビコンは不要ではない

ファビコンはSEOに直接影響を与えるわけではありません。加えて、設置を義務化されているわけでもありません。

しかし、設置しないデメリットよりも設置するメリットのほうが大きく、特別な理由がない限り、ファビコンは設置すべきです。

効果的なファビコンにするデザインのコツ

ファビコンをデザインする際は、次のコツを意識するとより効果的です。

適当にデザインしても、本当に効果的なファビコンを作り出すことはできません。

ユーザーの目に止まるデザインにする

ユーザーの目に止まるようなデザインにすることで、サイトのクリック率が上昇します。この際、派手で目立つ色を適当に採用するだけでは効果はほとんどありません。

ユーザーの目に止まるデザインにするためには、他のサイトやブログで使われていない色を採用してください。この際も、淡い色ではなく、はっきりとした色を採用することで、ユーザーの目に留まりやすくなります。

サイトのテーマと関連付ける

サイトのテーマとファビコンのデザインは関連付いたものにしてください。ファビコンとサイトのテーマが関連付いていないとユーザーが不満を抱える恐れがあります。

サイトのテーマと関連付いたファビコンの例は以下のとおりです。

独自のロゴがない場合は上記のようにテーマに関連付けたファビコンをデザインすることが肝心です。

テーマカラーと関連付ける方法もある

ファビコンのデザインは、テーマカラーに合わせる方法もあります。サイトやブログにテーマカラーが存在する場合、同じ色をファビコンに採用することで関連性を持たせることが可能です。

ロゴを持っていなかったり、適切なデザインが思い浮かばなかったりした際にカラーだけでも合わせておけるというメリットがあります。

複雑にしない

ファビコンは複雑ではなくシンプルなものを採用してください。

ユーザーに影響を与えるからといって、情報を詰めすぎると複雑な形状、色になってしまいます。ファビコンは小さく表示されるので、複雑な形や色をしていると、何を伝えたいのかが分からなくなります。

スマホのような小さな画面でも認識できるように、シンプルなデザインを心がけてください。

ファビコンを作成する方法

ファビコンを1からデザインするとなると、画力やデザインセンスが必要になります。

しかし、画力やデザインセンスはすぐには身につくことはありません。そのため、ファビコンを作成する際には、ファビコン作成ツールを用いるようにしてください。

ファビコンを作成できるソフト

ファビコンを作成できるソフトには次のようなものがあります。

これらはパソコンにダウンロードしてから使用する必要があります。スマホやタブレットでは使用できないので注意してください。

@icon

@iconは、以下の画像形式に対応しているソフトです。

これらの画像形式を読み込んでICO、BMP、PNG、ICLに変換・保存することが可能です。towofus SOFT社が出しており、透過やマルチアイコンの編集にも対応しています。

Quick Any2Ico

Quick Any2Ico は、以下の画像形式に対応しているソフトです。

これらの画像形式をICO形式のファイルに変換できます。サイズも16px × 16pxから512px × 512pxまでの10種類に対応しており、PNG形式として保存することも可能です。

ToYcon

ToYcon は、画像をソフト内にドラッグ＆ドロップすることで、ICO形式のファイルが容易に作成できるソフトになります。

対応している画像形式は以下のとおりです。

また、アイコンをマルチアイコンにする機能、アイコンをPNG画像に変換する機能を持ちあわせています。複数のファイルをまとめて作成できるため、初心者でも使い勝手の良いソフトです。

ファビコンを作成できるサイト

ファビコンの作成は、ソフトに限らずサイトでもおこなえます。ファビコン作成がおこなえるサイトは次のとおりです。

半透過マルチアイコンfavicon.icoを作ろう!

半透過マルチアイコンfavicon.icoを作ろう! は、次の画像形式を「.ico」に変換できるサイトです。

画像を指定するだけで作成できるので、最低限の知識しか要しません。サイズは16px × 16px、32px × 32px、48px × 48pxの3種類から選択できます。

日本語にも対応しているため、安心して使用可能です。

RealFaviconGenerator.net

RealFaviconGenerator.net はファビコン作成に数分しか要しません。

対応している画像形式は以下のとおりです。

RealFaviconGenerator.netを使用することでMac、デスクトップブラウザ、Androidなどに表示できるファビコンを作成できます。

また、サイトアドレスやURLを入力することで、ファビコンに関する問題点を分析することも可能です。

ファビコンの例

ファビコンは企業や個人によって、以下のようにデザインが異なります。

ロゴマーク

もっとも多く見られるファビコンは、企業のロゴをそのまま採用しているものです。世間に認知されているようなロゴがファビコンになっている場合、一目見ただけで何のサイトかが分かります。

ロゴマークをファビコンにしているサイトには、大企業や学校が多く見られます。

イニシャル1文字

イニシャルの1文字をファビコンにすることで、企業やサイト名がわかりやすくなります。ファビコンのサイズ感で的確な情報を伝えられるため、決して珍しいケースではありません。

なお、イニシャルがそのままロゴマークになっている企業は、どちらの利点も併せ持っているといえます。

ファビコンにするものがない場合

ファビコンにするロゴマークがない場合、サイトカラーに合わせたシンプルな図形をファビコンにするケースもあります。

無理にモチーフを探そうとして情報過多になるよりも、シンプルな図形の方が認識されやすいといったメリットもあります。

まとめ

ファビコンはSEOに直接影響はしないものの、ユーザーの評価に直結するため重要な要素ですのでファビコンを設定していない場合にはすぐに設定するようにしてください。モチーフとして多く採用されているものはロゴマーク、イニシャルなどです。万が一、モチーフになるものが見つからない場合は、テーマカラーを元にシンプルな図形を作成してください。ただし、複雑すぎて情報過多になると逆効果ですので注意が必要です。

SEOコンサルティングの東京SEOメーカーTOPへ戻る

この記事の監修者

上級SEOコンサルタント　坂口　直樹

新潟大学大学院を卒業後、事業会社で10年働く間にSEOに出会う。自身でサイトを多数立ち上げ、実験と検証を繰り返しながらSEOを研究。お金に変えることを目的とはせず、ユーザーに何が有益かを問い続け改良を繰り返すうち、「インターネット上の真実ではない情報を正してユーザーのためになる情報を発信する」という天啓を得る。現在は東京SEOメーカーの上級SEOアドバイザーとしてアサイン。