ダークモードに対応する favicon
ブラウザのテーマに反応できるのは SVG だけです。prefers-color-scheme クエリを含む <style> を SVG 自体の中に埋め込みます。ブラウザはアイコンを描画するときにそれを適用します。これにより、暗いタブバーでも暗いロゴが見えるようになります。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #111; }
@media (prefers-color-scheme: dark) { path { fill: #fff; } }
</style>
<path d="…your icon path…"/>
</svg>
<link rel="icon" href="/icon.svg" type="image/svg+xml"> として参照します。メディアクエリを実行しないブラウザや Google 検索のために、通常の favicon.ico も併せて残しておきます。
Safari のピン留めタブアイコン
デスクトップ版 Safari でタブをピン留めすると、平坦な単色の SVG（「マスクアイコン」）が別途使われます。形状だけで、グラデーションはありません。
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#F0562E">
color 属性はピンの色合いを設定します。この用途にはマークのモノクロ版を書き出してください。細かいディテールや複数の色を含むものは、塗りつぶされた塊として表示されてしまいます。
マスカブルアイコンとセーフゾーン
Android のアダプティブアイコンは、ランチャーに応じて画像を円、スクワークル、角丸の四角形に切り抜きます。通常のアイコンは角が切り落とされます。マニフェストのアイコンをマスカブルとして指定し、重要な要素は中央の「セーフゾーン」——おおよそ中央の 80%、つまり各辺に約 10% の余白——の内側に収めてください。
{ "src": "/android-chrome-512x512.png", "sizes": "512x512",
"type": "image/png", "purpose": "any maskable" }
背景色を全面（フルブリード）にし、ロゴはその余白の内側に余裕をもって配置します。そうすれば、どの形に切り抜かれてもロゴが欠けることはありません。
theme-color：アイコン周りのバー
favicon そのものではありませんが、モバイルではそのすぐ隣に表示されます。theme-color はブラウザの UI やアドレスバーに色を付けます。テーマに反応させることもできます。
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#111316" media="(prefers-color-scheme: dark)">
本物の .ico に実際に含まれるもの
適切な .ico は、複数のビットマップを一度に保持するコンテナで、通常は 16、32、48 ピクセルを含みます。ブラウザは用途（タブ、ブックマークバー、Windows のショートカット）に必要なサイズを選ぶため、16px の画像を拡大したり 512px の画像を縮小したりする必要がありません。実際には単一の PNG をリネームしただけの「favicon.ico」はこの利点を失い、一部のサイズでぼやけて見えます。このジェネレーターは本物のマルチサイズ ICO を書き出します。
Google 検索の favicon ルール
検索結果の横にアイコンを表示させるには、Google は次のすべてを要求します。favicon が一貫した URL に置かれていること、48×48 の倍数（48、96、144…）の正方形であること、サイトと同じホスト上にあること、それを掲載するページがインデックス可能であること、そしてアイコンが視覚的に明瞭であること。Google は独自のクローラーで、ページとは別にこれを取得・キャッシュします。そのため変更後は数日から数週間の猶予を見込み、/favicon.ico が Googlebot に対して 200 を返すことを確認してください。
ファイルは小さく保つ
- SVG：エディターのメタデータやコメントを取り除きます。整理されたアイコン SVG は多くの場合 1 KB 未満です。
- ICO：16/32/48 のみにします。64/128/256 を追加したくなっても我慢してください。利点がないままファイルが肥大化します。
- PNG：512 のアイコンが最も重いので、可逆圧縮の最適化ツールにかけてください。
実際に表示される場所でテストする
1つのブラウザだけを信用しないでください。通常のタブ（明るいテーマと暗いテーマ）、ブックマーク、iOS の「ホーム画面に追加」、Android へのインストール、そして再クロール後の Google の結果を確認します。テスト中にクリーンな読み込みを強制する手軽な方法は、プライベートウィンドウと、アイコンの URL への ?v= クエリの併用です。