WEB — Webサイトの基礎
ファビコンは小さい表示と参照先を確認する
ブラウザのタブなどに出る小さなアイコンは、ロゴを縮めるだけでは判別しにくい場合があります。形を簡潔にし、HTMLから正しいファイルを参照できるようにします。
この記事の目次
小さくても残る形を選ぶ
長い店名や細かな模様を詰めず、輪郭や一文字など識別に必要な要素を選びます。大きい制作画面だけでなく、実際のタブ表示で見ます。背景が明るい場合と暗い場合で埋もれないかも確認します。
アイコンの参照を確認する
HTMLのheadにあるrel=iconなどの指定と、公開ファイルの場所を照合します。画像URLを直接開いて、別の画像やエラーページになっていないか確認します。OG画像とファビコンは役割が違うため、同じ横長画像を無理に流用しないようにします。
検索向けの条件も確認する
Googleはファビコンの形、取得可能性、安定したURLなどの条件を案内しています。検索向けに用意する際は最新の公式案内を確認します。ブラウザに出ることと、検索結果にも採用されることは別の確認です。
変更後は表示先ごとに見る
タブ、ブックマーク、検索結果では更新のタイミングが異なる場合があります。古く見えるときは、まず公開されているファイルと参照が正しいかを確認します。設定が正しくても、検索での表示を保証するものではありません。
画像を選ぶと拡大できます。
- 小さいタブ表示でも形を見分けられるか確かめます。
- HTMLの指定と、実際に公開された画像ファイルを照合します。
- 検索向けの条件と、実際の表示状況を別に確認します。
ロゴを知っている人だけで判断しない
大きなロゴでは読める文字も、タブの小さな表示では形としてしか見えないことがあります。最初に残したい特徴を一つ選びます。文字を使うなら字の区別、図形を使うなら輪郭を中心に見ます。細かな説明を縮小して残すより、判別に必要な要素を整理します。
複数のタブを並べた状態で、どれが自分のサイトかを確認すると用途に近づきます。明るい背景だけで確認せず、暗い周囲でも消えないかを見ます。大きな制作画面で美しく見えることと、小さく識別できることは別の評価です。
サイトのマークを更新する例
新しいロゴへ変えたサイトで、トップのロゴは変わったのにタブだけ旧マークが残る場面を考えます。まず本番HTMLが指定するアイコンのURLを確認し、そのファイルを直接開きます。古い画像を参照しているなら、公開する参照先やファイルの更新を見直します。
ファイルが新しいなら、表示先の状態を分けて確認します。通常のタブ、保存済みブックマーク、検索結果を一つの更新結果としてまとめません。それぞれ何が新しく、何が古く見えるかを記録します。検索向けの仕様を満たすかは公式案内と照合し、ブラウザで表示されたことだけを根拠に採用済みと報告しません。
アイコンの点検を分ける
| 点検 | 確認するもの |
|---|---|
| デザイン | 小さい表示で識別できる形 |
| 参照 | ページが指定する公開ファイル |
| 取得 | 画像URLが期待した画像を返すこと |
| 表示 | タブなど各場所での実際の見え方 |
記事や英語ページも同じアイコンを使うなら、代表的な下層ページの参照も確認します。トップだけ新しく、別のテンプレートでは旧ファイルを使う状態を避けます。変更記録には使う元データと公開ファイルを対応させ、次回どれを書き出せばよいか分かるようにします。検索向けURLの扱いも含め、頻繁な名前変更だけで古い表示を追いかけない運用にします。