ファビコンはタブなどでサイトを識別する画像として設定する
ブラウザーのタブやブックマークなどでサイトを識別する小さな画像のことを、ファビコンと言います。ロゴ全体を縮小するだけでなく、実際の小さな表示で区別できる形を選びます。MDNはページのヘッダーでのアイコン指定を説明しています。（MDNのページアイコン）
設定する目的はサイトの識別です。画像を付けたことだけで、運営者の信頼性や問い合わせの増加を推定する根拠にはなりません。
ファビコンでサイトを識別する｜画像と設定と表示先を点検
概要
ファビコンは、タブなどでサイトを識別するための小さな画像です。この記事では、小さく表示して判別できるデザイン、HTMLでの指定、検索結果の要件、ホーム画面用アイコンとの違い、表示されない時の点検を解説します。
公開日
更新日
小さな表示で判別できる形を選ぶ
社名の長い文字列より、ロゴマークや短い記号を候補として試します。明るい背景と暗い背景の両方で、輪郭が読めるかを点検しましょう。
元の画像と縮小した画像を比較する
大きな制作画面で見える細線や文字が、小さな表示では消える場合があります。線や要素を減らし、実際のタブに近い大きさでも区別できるかを比べます。元データを保存し、別の表示先のサイズを作る時にも使えるようにします。
設定方法と表示先ごとの要件を読む
HTMLでは、ページのheadに<link rel="icon" href="/favicon.png">のような指定を置きます。制作ツールを使う場合は、画像の設定欄と公開する操作を確認します。
タブと検索結果とホーム画面を区別する
Google検索の要件では、正方形で8×8ピクセル以上、48×48ピクセルより大きい画像が推奨されます。取得できる画像と安定したURLも必要です。要件を満たしたことと、実際に検索結果へ表示されることは別です。（Googleのファビコン要件）
ホーム画面用のアイコンには別の指定が使われる場合があります。タブで表示された画像を、そのまま全端末のホーム画面設定とみなさず、必要な表示先を列挙します。
画像のURLと公開後の表示を確かめる
設定後は画像のURLを開き、指定した画像が取得できるかを確かめます。古い画像が残る時は、指定先、公開の反映、ブラウザーに保存された情報を順に調べます。
一律にキャッシュだけを原因と決めず、設定したファイルと公開したファイルを照合しましょう。画像とページの配色は 文字と背景のコントラスト も参考になります。
SpreadSite は、Googleスプレッドシートで内容を管理し、テンプレートを使ってホームページを作成・公開・更新できるノーコードツールです。
アイコンと掲載内容を点検して公開するホームページづくりに、ぜひ使ってみてください！
よくある質問
Q: ファビコンに社名全体を入れますか？
A: 小さな表示で文字が消える場合があります。ロゴマークや短い記号を実際の大きさで比較します。
Q: 16ピクセルの画像だけでよいですか？
A: 表示先ごとの要件を読みます。Google検索では48×48ピクセルより大きい画像が推奨されています。
Q: 検索結果にはすぐ反映されますか？
A: 公開後に取得と処理が必要です。ページと画像の指定を点検し、検索結果の表示を別に評価します。
Q: 表示されない時はキャッシュが原因ですか？
A: 画像URL、指定、公開状態も原因になります。取得できるファイルと指定先を照合します。
