アイコン（ファビコン）は絶対に必要というわけではありません。
しかしながら、設定しない場合、Googleの検索結果には他社の（ファビコンを設定していない）ホームページと同じマーク（標準で用意されている地球マーク）で表示されることになります。
Googleの検索結果にファビコンが表示されることで文字情報以外に視覚的に自社をアピールできるポイントにもなりますので是非設定しましょう。
この記事では、Googleが推奨するサイズや形などファビコンを作成、設定する際のポイントをお伝えします。
目次
Google検索を考慮するなら円形を意識
Googleの検索結果では円形に切り取られて表示されます。
Googleは1:1のスクエアを推奨しており、例えば私達「鶴岡製作所」のWebサイトのファビコンは正方形で作成していますが、Googleの検索結果で表示される際に円形に切り抜かれています。
ファビコンの多くはロゴや屋号などのマークを元に作成されることが多いと思いますので、各社のガイドラインに沿って作成する必要があると思います。
その上で円形を意識する、あるいはもともと円形で作成してしまうなど形にも気を配ることで、意図した通りに表示されるようになりますね。
ちなみに2024年10月現在、Bingの検索結果では（やや角丸の）正方形で表示されていました。
検索結果用に最適なサイズは？
Googleでは、ファビコンの最適なサイズを以下のように推奨しています。
ファビコンのサイズは 48 x 48 ピクセルの倍数にしてください（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）（またはアスペクト比 1:1（スクエア）の SVG）。有効なファビコン形式であれば、すべてサポートされます。
- 推奨は48×48px 以上（48×48pxの倍数96 x 96 ピクセル、144 x 144 ピクセルなど）
- 1:1のスクエア
基本的には正方形で作成することになりますが、その上で前述の通り丸く切り抜かれることを想定して作成するとよいでしょう。
有効なファイル形式
ブラウザや役割によって異なりますが基本的にSVGで対応できます。
その他必要に応じて
SVGが使えない環境用に「.icon」
iOSのホーム用に「.png」
を用意しておくとよいでしょう。
Googleでは以下のように案内があります。
有効なファビコン形式であれば、すべてサポートされます。
ファビコンの設定方法
<head>タグに以下のコードを記述します。
基本設定
<link rel=”icon” href=”/favicon.ico” sizes=”48×48″>
<link rel=“icon” href=“/icon.svg” type=“image/svg+xml”>
※サイズはアップロードしたものに変更
※画像のパスはアップロードした場所に変更
ios用の設定
<link rel=“apple-touch-icon”href=“/apple-touch-icon.png”>（サイズは180×180px）
1サイト（1ホスト）につき1つ
例えば
https://abc.com/
と
https://123.abc.com/
という2つは別々のサイト（ホスト）として見なされるので、それぞれにファビコンを設定できます。
一方、
https://abc.com/
と
https://abc.com/123/
は後者がサブディレクトリであり、前者のメインサイトと同じホストであるため、仮にデザインや内容が異なるサイトであってもファビコンはメインサイトで設定されたファビコンがどちらにも適用されます。
その他ガイドライン
- クロールをブロックしない
- ファビコンのURLを頻繁に変更しない
- わいせつ表現やヘイト表現など不適切な表現はNG（該当のファビコンが確認された場合、標準の地球アイコンに置き換えられる）
適切にファビコンを設定してGoogle検索結果に表示させよう
たくさんの企業、お店、記事などが並ぶGoogle検索結果の画面において、他社との明確な違いやブランドを視覚的に表現するのにファビコンは最適です。
表示される際のサイズや形も考慮して、より魅力的なファビコンを設定できるとよいですね。
私たち鶴岡製作所では、ホームページの新規制作または全面リニューアルを承っております。
もちろんファビコンの設置ご相談も承っておりますのでこちらからお気軽にご相談ください。
- 【筆者】鶴岡製作所（足立区のホームページ制作会社）
- Webサイト制作、ランディングページ制作、各種調査、クリエイター育成代行まで、幅広く承ります。
ディレクション、デザイン、コーディングそれぞれ単発での対応も可能です。
