ファビコンの設定方法｜ブラウザーのタブと検索結果を分けて確認

小さなアイコンに仮のロゴが残っていませんか。元画像、公開URL、タブの表示、検索結果の扱いを順に点検します。

ファビコンは、小さく表示されるサイトの目印

ブラウザーのタブなどに出る小さなアイコンは、サイトを見分ける手がかりになります。大きなロゴをそのまま縮めると、細い線や長い文字が読めないことがあります。まず、どの部分を残せば自分のサイトだと分かるかを考えます。

ここでは設定の確認手順を中心に説明します。ブラウザーのタブに出ることと、Googleの検索結果へ採用されることは、別の確認です。検索結果用の条件は、Googleの公式ガイドも参照してください。

用途に合う画像を用意（編集部作成）

完成した画像を大きく見るだけでなく、実際のタブに近い小さな表示でも見比べます。明るい背景と暗い背景の両方で確認すると、透明部分の見え方にも気づきやすくなります。

CMSではサイト設定や公開設定にファビコンの登録欄がある場合があります。自作サイトでは、HTMLのhead内にlink rel="icon"で画像を指定する方法が使われます。ファイルを置いただけで完了したと思わず、実際のページが参照しているURLを確認してください。

設定後の確認（編集部作成）

Googleの公式ガイドでは、サイトを視覚的に表すこと、正方形であること、画像とホームページをクロールできること、URLを頻繁に変更しないことなどが案内されています。ガイドラインを満たしても表示が保証されるわけではありません。

画像サイズや対応形式の詳細は更新される可能性があるため、実装時には公式の条件に合わせます。検索結果で古いアイコンが出る場合、公開元の指定が正しいかと、検索側で情報が更新されたかを分けて確認してください。

ファビコンには、ブラウザーなどに保存された情報が影響する場合があります。まず設定と公開URLが正しいかを調べ、そのうえで別の環境の表示と比較します。何度もURLを変え続けるより、変更日時と使用ファイルを記録して原因を絞り込みましょう。

別々に管理する画像（編集部作成）

ファビコン、サイト上部のロゴ、SNSの共有画像では、使われる大きさや比率が違います。同じブランドの見た目を保ちながら、用途に合ったファイルを用意します。デザイン担当者へ頼む場合は、どこで使う画像かを明記して渡すと、作り直しを減らせます。

SITE PORTを使う際も、ロゴだけでなくファビコンや共有画像をどこで登録するか確認しましょう。完成例を見ながら必要な素材をそろえると、テンプレートの仮画像を残さず公開する準備ができます。

SITE PORTの完成例を見る・編集のデモを見る。自分で更新する場面を想像しながら、利用できる機能とサポート範囲を申込前に確認してください。

[SNS共有画像の確認](/articles/ogp-social-preview-check)・[画像の軽量化](/articles/website-images-size-alt)