ファビコンとは？サイズ・作り方・設定方法まで

ブラウザのタブに表示される小さなアイコン、ファビコンは、サイトを見分けやすくするための基本的な表示要素です。新規サイトの公開、リニューアル、ロゴ変更、CMS移管では、画像の用意だけでなく、公開ページで正しく参照されているかまで確認する必要があります。

一方で、ブラウザで表示される状態と、Google検索結果に表示される状態は同じではありません。この記事では、サイズ・形式の決め方から作成、設定、表示不良時の確認、納品時の検収までを順に解説します。ブラウザ実装の確認とGoogle検索結果の確認を分けて進められるようになります。

ファビコンは、画像を用意するだけでなく、ブラウザ実装の確認とGoogle検索結果に関する確認を分けて進めます。

01Sectionファビコンとは？役割と設定する意味

ファビコンとは、Webサイトを識別するための小さな画像です。主にブラウザのタブやブックマークなどに表示され、複数のページを開いている利用者がサイトを見分ける手がかりになります。HTMLでは、rel="icon"を指定したlink要素で参照する方法が標準化されています。詳細はWHATWG HTML Standardのrel="icon"仕様で確認できます。

Google検索のオーガニック検索結果に表示されることもありますが、これはブラウザでの表示確認とは別です。サイト側で要件に沿って設定しても、Googleによるクロール・処理・表示判断を経るため、表示そのものは保証されません。検索向けの条件はGoogle Search Centralのファビコン公式ガイドラインを確認してください。

主に確認する表示場所

ブラウザのタブ、ブックマークなどのブラウザUIで、意図した画像が表示されるかを本番URLで確認します。Google検索結果は、ブラウザ上の確認が済んだ後に、検索向けの要件とGoogle側の状態を別途点検する対象です。

ロゴと混同しないための整理

公開前に確認する意味

ファビコンは機能を直接変える要素ではありませんが、利用者のサイト識別を支える表示要素です。新規公開、リニューアル、ロゴ変更、CMS移管の際は、設定漏れが起こりやすいため、公開確認項目に含めるとよいでしょう。

02Sectionファビコンのサイズ・形式の決め方

サイズ・形式は用途別に確認します。Google検索向けの最小条件と、ブラウザ・CMSの実装条件は混同しないことが重要です。

サイズと形式は、「Google検索で確認する画像条件」と「ブラウザやCMSで実装する条件」を分けて決めます。Google検索向けの最小条件は正方形かつ8×8px以上で、48×48pxより大きいサイズが見え方のための推奨です。

Google検索向けは最小条件と推奨を分ける

Google検索向けの画像は、正方形かつ8×8px以上が最小条件です。見え方のためには48×48pxより大きいサイズが推奨されており、96×96px、144×144pxなどが候補になります。現行の条件は公開前にGoogle Search Centralの公式ガイドラインで再確認してください。

PNG・ICO・SVGはブラウザ実装とCMS条件で選ぶ

PNG、ICO、SVGは、Google検索用の必須形式ではなく、ブラウザ実装やCMS・テーマの受入条件に応じて選ぶ候補です。

• PNGは、単一サイズのビットマップ画像として扱いやすい形式です。
• ICOは、複数のサイズを格納できる形式です。
• SVGは、拡大可能なベクター画像として扱えますが、CMSやテーマで受け付けられるかを確認します。

複数のアイコン候補を提示する場合、ブラウザはtypeやsizesなどを手がかりに候補を選択します。実装上の扱いはMDN Web Docsのlink要素解説も参考になります。

sizesと実ファイルの寸法をそろえる

PNGなどのビットマップ画像にsizes="48x48"と書く場合、リンク先の画像が実際に48×48pxとして利用できることを確認します。SVGなど拡大可能なアイコンでは、sizes="any"を選択肢にできます。sizes、type、href、実際のファイル形式と寸法は対応させます。

03Sectionロゴからファビコンを作る5つの手順

手元のロゴはファビコンの素材にできます。ただし、横長のロゴタイプ、細い線、小さな文字、複雑な模様をそのまま縮小すると、何のサイトか判別しにくくなる場合があります。ロゴ全体を使うか、シンボルや頭文字のように要素を減らすかを、小さな表示で判断しましょう。

Google検索で使用される可能性がある画像は、サイトのブランドを視覚的に表し、利用者が見分けやすいものにします。画像の細部よりも、縮小後に識別できる形・余白・コントラストを優先することが大切です。

04Sectionファビコンの設定方法｜CMSとHTMLの選び方

まずはCMSの標準設定を確認し、手動編集は権限・バックアップ・検証環境などの条件を確認したうえで検討します。

設定方法は、CMSの標準機能で行えるか、テーマやHTMLの編集が必要かによって変わります。安全性と保守性の観点から、まずCMSの設定欄を確認し、手動編集は必要な条件がそろう場合に限って検討します。

CMS設定から始める選択フロー

管理画面に「サイトアイコン」「favicon」などの設定欄があるか？
├─ ある → CMSの標準設定を優先する
│          → 本番ページのhead、画像URL、ブラウザ表示を確認する
└─ ない → CMS・テーマの公式手順を確認する
           ├─ 手順が確認できる → 公式手順に沿って設定する
           └─ テーマ・HTMLの編集が必要
                ├─ 編集権限、バックアップ、検証環境、ロールバック手順がある
                │    → 手動実装を検討する
                └─ 条件が不明または不足している
                     → 制作・保守担当へ依頼する

CMSの設定欄がある場合は、CMS標準の設定を優先します。CMSが自動的にlink要素を出力することがあるため、CMS設定と手動のHTMLタグを併用すると、古いURLや複数の候補が残る可能性があります。

HTMLで指定する基本形

HTMLで設定する場合は、公開ホームページのhead内にlink要素を置きます。以下はPNG画像を48×48pxとして指定する基本例です。

<link rel="icon" href="/assets/favicon-48.png" sizes="48x48" type="image/png">

hrefには、公開環境で取得できる画像URLを指定します。相対URL・絶対URLのどちらを使うかはサイト構成に応じますが、重要なのは本番ページが参照するURLで意図した画像を取得できることです。rel="icon"、sizes、複数候補の考え方はWHATWG HTML StandardとMDN Web Docsで確認できます。

設定後は本番で3点を確認する

CMSの設定画面で保存できても、実装完了とは限りません。本番環境で、次の順に確認します。

1. 1公開ホームページのheadに、意図したlink要素が出力されているか
2. 2hrefで指定された画像URLを直接開き、認証なしで意図した画像を取得できるか
3. 3ブラウザのタブなどで、意図したファビコンが表示されるか

05SectionGoogle検索結果向けに確認する要件

Google検索結果向けの確認は、ブラウザでファビコンが表示された後に行う別工程です。対象となるホームページURL、head内のlink、そのhrefで指定された画像URLを1組として確認します。wwwの有無、サブドメイン、CDN利用の有無だけで可否を判断せず、実際のURL構成と公開状態を照合してください。

Google検索では、ホスト名単位で1サイトにつき1つのファビコンが扱われます。サブディレクトリごとに別のファビコンを設定する運用は、Google検索向けには想定しにくい点に注意が必要です。

Search ConsoleのURL検査ツールでは、ホームページの状態確認や、必要に応じたインデックス登録リクエストができます。ただし、技術要件に適合していても、検索結果への表示はGoogle側のクロール・処理・表示判断に左右されます。公開直前には、Google Search Centralの現行ガイドラインを再照合してください。

06Sectionファビコンが表示されないときの確認順

ブラウザで表示されない問題と、ブラウザでは正常でGoogle検索結果だけが未更新の状態は、別の経路で確認します。

設定を繰り返し変更する前に、どこで表示されないのかを分けます。ブラウザでも表示されない場合は、キャッシュ、画像URL、HTML指定、画像仕様を優先して確認します。

キャッシュを疑う場合は、まずシークレットウィンドウ、別ブラウザ、別端末での表示を比べます。環境によって表示が異なるなら、画像やタグを再作成する前に、ブラウザ・CMS・配信側のキャッシュを確認するほうが効率的です。

画像URLとheadの指定に問題がない場合は、画像仕様を確認します。特にビットマップ画像では、sizesと実寸が一致しているか、typeを記載しているなら実際の画像形式と矛盾していないかを照合してください。link要素と属性の確認観点はMDN Web Docsが参考になります。

07Section公開・納品時の3項目チェック

公開や納品の確認では、見た目だけでなく、将来の更新時に設定箇所を追える状態にしておくことが重要です。Google検索結果は公開直後に変化しないことがあるため、ブラウザ実装の確認と同じ合否条件にはしません。

ファビコンを含めた公開確認や検収の進め方は、Webサイト制作を成功させるプロセスもあわせて確認してください。