ファビコンとは？役割とSEOとの関係、設置方法・作り方

SEOホームページ

ファビコンとは？

ファビコンとは、
ブラウザのタブやアドレスバー、お気に入りリスト、検索結果などに表示される、
ウェブサイトのアイコンのことです。

ブラウザでは、↓のように表示されます。

ファビコンを設定していない場合は、デフォルトマークとして「地球マーク」や「無地の四角形」などが表示されます。
WordPressで作成したWebサイトの場合は、「WordPressのマーク」が表示されます。

検索結果の表示では、↓のように表示されます。

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

ファビコンの役割は、大きく分けて以下の2つです。

アイデンティティを示す

ファビコンは、Webサイトの「アイコン」です。

ブラウザのタブ、アドレスバー、お気に入りリスト、検索結果などに表示されるため、
ユーザーがホームページのアイデンティティを認識し、識別するのに役立ちます。

例えば、企業ホームページであれば、企業の「ロゴ」をファビコンにすることで、
ユーザーが企業名を思い出しやすくなります。

商品やサービスのホームページの場合は、
商品やサービスの「シンボル」をファビコンにすることで、
ユーザーに商品やサービスのイメージを訴求することができます。

ユーザーの利便性が向上する

ファビコンは、ユーザーがWebサイトのアイコンとして機能しますので、
をWebサイト簡単に見つけたり、識別したりするのに役立ちます。

たとえば、「ブラウザ」で複数のサイトを同時に開いて情報を取得するという方法は多くの方が行っていると思います。

その際に、ファビコンがあると、どのサイトがどのタブに表示されているかを視覚的に見つけることができ、便利です。

また、「お気に入りリスト」や「検索結果」にファビコン表示されていれば、
ユーザーが自分が見たいウェブサイトを見つけやすくするのにも便利です。

ホームページの印象が向上する

ファビコンは、Webサイトのデザイン印象にも重要な要素として機能します。

企業イメージ、ロゴ、サイト配色と統一性のあるファビコンを設置することで、
WEBサイトのデザインに統一感が出て、閲覧者のイメージに残りやすくなり、
Webサイトの印象を高め、訴求力を上げる効果があります。

ファビコンは、ウェブサイトの第一印象を決める重要な要素ということができます。

ファビコン設置とSEOの関係は？

ファビコンは、SEOには直接の関係はありません。
検索エンジンアルゴリズムにファビコン設置の有無は、直接含まれているわけではありませんので、
ファビコンがないからといって検索順位が上がることはありません。

しかし、以下の理由で、ファビコンがSEOにプラスに働く可能性があります。

クリック率の向上につながる
ファビコンは、検索結果にアイコンとして表示されますので、インパクト・視認性があり、サイトのアイデンティティーを表現したものであれば、検索結果でのクリック率が上がる可能性があります。
（ファビコン設置が「ない」場合は、「印象に残らない」「古い感じがする」などで、
クリックされず、スルーされてしまう原因になることがあります。）

再訪率の向上につながる
ファビコンは、サイトを見つけるための目印として使われることも増えていますので、
ファビコン設置によって、ユーザーの再訪率が向上する可能性があります。

ファビコンの設置率は、2022年の段階で、約7割と言われています。
ファビコンを設置し、少しでもSEO効果、集客効果を上げるようにしましょう。

ファビコンのデザイン・設置の「注意点」

ファビコンは、以下の点に注意してデザインし、設置しましょう。

企業・サイトの「イメージを表現」する

ファビコンは、サイトの「アイコン」であり、「第一印象」「イメージ」を形成するものですので、以下を考えながらデザインを考え、決めましょう。

企業の「ロゴ」を表示する
必ずロゴでなければならない…ということではありません。
会社のロゴは、複雑なデザインであることも多いですので、小さく表示するファビコンでは「見にくい」「インパクトがない」場合も多いです。
自社のロゴがファビコンとしてインパクトを残せるものか判断して使用しましょう。
企業の「イメージカラー」を表現する
イメージカラーを使うことで、ブランド価値を高める効果が期待できます。
ブランドのアルファベット「頭文字の1文字」で表現する
…「イメージカラー+1文字」は、インパクトがあります。
文字フォントを工夫することで、イメージ表現を考えることもできます。
商品・サービスのイメージを「シンボライズ」する
サイトの「テーマ」を表現する
「自然志向」「高級感」「格安」「現代性」「スタイリッシュ」など、
サイトが打ち出しているテーマにあったデザインを考えるのも方法です。

「視認性」と「訴求力」を考える

ファビコンは、非常に小さく表示されることがほとんどです。
ですので、小さいアイコンで「インパクト」があり、他と「差別化」できるものであることが望まれます。

複雑で、多色を入れたデザインの場合、「わかりずらい」「印象に残らない」可能性がありますので注意しましょう。

シンプルで視認性のあるものを考えましょう。

「サイズ」と「ファイル形式」に注意する

ファビコンの「サイズ」は、

16ピクセル×16ピクセル
「ブラウザのタブ」や「アドレスバー」「お気に入りリスト」などに表示されます。
32ピクセル×32ピクセル
「デスクトップのショートカット」「スマートフォンのホーム画面」などに表示されます。

この2つのサイズが推奨されています。

ファビコンの「ファイル形式」は、以下の3つを使うことができます。

ICO
Windows、Mac OSなど様々ななOSでサポートされており、汎用性が高い。
複数のサイズのアイコンを格納できる。
ファビコンのファイル名は、「favicon.ico」にします。
PNG
背景色の透過、グラデーション、陰影を表現できる。
ファビコンのファイル名は、「favicon.png」にします。
GIF
アニメーションに対応しています。
ファビコンのファイル名は、「favicon.gif」にします。

1つのファイルで、複数のサイズを格納でき、様々なOSでサポートされている「ICO」形式を使うことをお勧めします。

ファビコンの作り方

ファビコンのファイルの作り方をご紹介します。

ファビコン作成でよく使われている「x-icon」での作成方法をご紹介して行きます。
（ファビコン用の画像を作成しておいてください）

ICO 形式のアイコンファイルを、「16 x 16」「24 x 24」「32 x 32」「64 x 64」ピクセルの 4 サイズで一気に作成、1ファイルに保存でき便利です。

まず、↓をクリックして開いてください。
https://www.xiconeditor.com/

「x-icon」のトップページが開きますので、
赤印のところ（「日本語バージョンでは「輸入」と書かれています）をクリックしてください。

「アップロード」をクリックします。

パソコン内のフォルダが開きますので、
ファビコンとして使いたい画像を選択して「開く」をクリックしてください。
⇒画像が表示されます。

必要な部分に選択範囲を移動させて、OKになりましたら
「赤印」のところ（「かわりました」の部分）をクリック。

「プレビュー」をクリック ⇒「アイコンをプレビュー」をクリック。

ファビコンの見え方を確認します。

「輸出」をクリックします。

「アイコンをエクスポート」をクリックします。

これでOKです。
ファビコンファイルが、「ICO」形式でパソコンに保存されます。

ファビコンの設定

ファビコンのファイルを保存出来たら、サーバーにアップロードします。

サーバーへのアップロードは、
サーバーの管理画面（ファイルマネージャーなど）で行う方法と、
FTPソフトを使って行う方法があります。

FTPソフトを使って行う方法

FTPソフトを起動
　　↓
サーバーの「IPアドレス」「ユーザー名」「パスワード」を入力して、ログイン。
　　↓
左側のツリービューで、Webサイトのルートディレクトリを展開します。
　　↓
右側のファイルリストで、ファビコン画像をドラッグアンドドロップします。
（ファイル名が「favicon.ico」であることを確認）
　　↓
アップロードを実行します。