PNGファビコン 96x96 を Google で使う方法

Googleを開き、自社ブランド名を検索して、ページタイトルの横にあるアイコンをよく見てみてください。ぼやけたり、ピクセル化されていたり、引き伸ばされているように見えるなら、Googleが低解像度のfaviconを強制的に拡大表示しているケースがほとんどです。これはまさにPNGファavicon 96x96パターンが解決する問題であり、Googleが内部でより鮮明な候補を選ぶ際に使っている2倍ダウンサンプルロジックと同じ考え方に基づいています。

96x96 PNGファaviconとは実際には何なのか

96x96 PNGファaviconとは、96ピクセル幅×96ピクセル高さの正方形のラスター画像で、image/pngというMIMEタイプで配信されます。96ピクセルという寸法には意味があります。デスクトップ検索結果においてページタイトルの横のアイコンを描画する際にGoogle検索が使う48ピクセルのCSSサイズと、ちょうど2倍の関係にあるためです。

ブラウザや検索エンジンが48x48サイズのアイコンを描画する必要があり、ソースのPNGが96x96であれば、ダウンサンプリングによってエッジが鮮明になり、アンチエイリアスも綺麗に掛かります。一方、ソースが16x16で48x48にアップスケールされると、ぼやけが生じます。96x96というサイズはスイートスポットです。ファイルサイズを10 KB未満に抑えられるほど小さく、あらゆる一般的な描画ターゲットに品質劣化なしで対応できるほど大きいという、ちょうど良いバランスが取れています。

なぜこのサイズがGoogle検索で重要なのか

Googleの公式faviconドキュメントによると、faviconが検索結果に表示される資格を得る(保証ではなく)のは、Googleがそれをクロールでき、正方形であり、少なくとも8x8ピクセル以上である場合です。Googleは48x48より大きいサイズを推奨しています。

96x96 PNGはこの推奨範囲内に収まり、表示サイズとちょうど2倍の関係にあるため、Googleのレンダラーは綺麗にダウンサンプリングできます。Googleのクローラーは、<link rel="icon">宣言やルートのfavicon.icoの中から、見つけた中で最も大きな有効な正方形画像を選びます。96x96 PNGはその選定に勝つことが多く、一度選ばれれば、それがSERP(検索結果ページ)でユーザーに表示される画像になります。96x96が他の一般的なサイズの中でどう位置付けられるかについては、faviconサイズ完全ガイドをご覧ください。

sizes属性がブラウザにどのアイコンを使うか伝える仕組み

HTML仕様は、<link rel="icon">タグのsizes属性を通じて、ブラウザに対しどのアイコンを読み込むかのヒントを与えます。WHATWG HTML標準で定義されている通り、ユーザーエージェントが特定のサイズ(たとえばGoogle検索結果用の48x48やWindowsタスクバーピン留め用の32x32)のアイコンを必要とする場合、ターゲットのサイズに一致するかそれを超えるsizes値を持つ宣言済みのアイコンが選択されます。

以下が96x96 PNGファaviconを宣言する正規のパターンです:

&lt;link rel='icon' type='image/png' sizes='96x96' href='/favicons/favicon-96x96.png'&gt;

フォーマットは正確に"96x96"、小文字、区切り文字はx、という形にする必要があります。ブラウザは"96"、"96 X 96"、空白を含むその他のバリアントを無視します。

実践的な実装:アイコンセット全体

96x96 PNG単体での配信だけでは不十分です。現代のブラウザは階層化されたアイコン群を期待しています。一般的な<head>ブロックは以下のようになります:

&lt;link rel='icon' type='image/svg+xml' href='/favicon.svg'&gt;
&lt;link rel='icon' type='image/png' sizes='96x96' href='/favicons/favicon-96x96.png'&gt;
&lt;link rel='icon' type='image/png' sizes='32x32' href='/favicons/favicon-32x32.png'&gt;
&lt;link rel='apple-touch-icon' sizes='180x180' href='/favicons/apple-touch-icon.png'&gt;
&lt;link rel='shortcut icon' href='/favicon.ico'&gt;

順序が重要です。サイズが大きく優先度の高いアイコンを先に記述してください。ブラウザは必要なsizesに最初にマッチした時点で処理を停止します。ルートのfavicon.icoは、ファイルを直接プローブする古いブラウザやcurlスタイルのスクレイパーへの対応として機能します。

96x96 PNGのベストプラクティス

96x96でデザインし、アップスケールは避ける。ソースSVGから96x96 PNGを新規書き出しすることで、ピクセルグリッドが綺麗に保たれます。32x32エクスポートをアップスケールすると、解消したかったはずのぼやけがそのまま焼き付いてしまいます。
URLは恒久的に保つ。Googleが一度アイコンをインデックスした後でURLを変更すると、完全な再クロールが必要になります。Googleのドキュメントによると、これには数日から数週間かかる可能性があります。
10 KB未満に抑える。色を絞った96x96 PNGは通常2〜6 KBになります。デプロイ前にOxipngなどのPNG最適化ツールを通すようにしましょう。
正方形は必須条件。Googleのクローラーは非正方形の画像を無視します。96x95のようなファイルは検索結果では無効です。
出稿前に48x48でプレビューする。Mzu favicondlのようなツールを使って、実際の表示サイズで96x96 PNGをレンダリングしてください。48x48で濁って見えるなら、Googleでも濁って見えます。

96x96が適さないケース

PWAの構築やAndroidホーム画面用アイコンが必要な場合は、site.webmanifestで192x192と512x512のPNGが求められます。これらがプラットフォームで実際に使われるサイズです。そのシナリオについては、Webアプリマニフェストアイコン設定ガイドを参照してください。一方、ブラウザタブ、アドレスバー、Google検索結果については、96x96とSVGを組み合わせるのが最も鮮明で現実的な構成です。

推奨構成

アップスケールされた小さいファイルではなく本物の96x96 PNGを、独自の<link>タグにsizes='96x96'を付けて配信してください。これにSVGプライマリ、32x32 PNGフォールバック、ルートのfavicon.icoを組み合わせます。このスタックであれば、Googleの「48x48より大きい」という推奨を満たしつつ、検索結果で鮮明に表示でき、レガシーブラウザでもグレースフルにフォールバックします。