favicon の最小構成(SVG + ICO + apple-touch-icon + manifest)

調査時点: 2026-10。Evil Martians の記事は 2026-01 の編集注記で「現在も有効」と確認されている。

favicon は、ブラウザのタブ・ブックマーク・ホーム画面・検索結果に出るサイトのアイコン。かつては 16 / 32 / 48 / 57 / 72 / 114 / 144… と十数サイズの PNG を並べるのが定番だったが、SVG 対応が揃った現在は 5 ファイルと manifest 1 つで足りる。

ファイル構成#

ファイル	形式・サイズ	役割
`favicon.ico`	ICO(32×32。16×16 を同梱してもよい)	レガシーブラウザ、RSS リーダー、`/favicon.ico` を直接取りに来るツール向け。ルート直下に置き、ハッシュ付きの名前にしない
`icon.svg`	正方形の SVG	現代ブラウザの主アイコン。ブラウザが縮小するので複数サイズは不要
`apple-touch-icon.png`	PNG 180×180	iPhone / iPad の「ホーム画面に追加」。透過は不可(黒で埋められる)。角丸は OS が付けるので自分で丸めない
`icon-192.png`	PNG 192×192	Android のホーム画面
`icon-512.png`	PNG 512×512	PWA のスプラッシュ
`icon-mask.png`	PNG 512×512、`purpose: maskable`	Android ランチャーが形を切り抜いても崩れないよう、中央 80% に絵を収めた版
`manifest.webmanifest`	JSON	上の 3 つの PNG を `icons` に列挙する

HTML#

1
<link rel="icon" href="/favicon.ico" sizes="32x32">
2
<link rel="icon" href="/icon.svg" type="image/svg+xml">
3
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
4
<link rel="manifest" href="/manifest.webmanifest">

ICO の sizes は 32x32 にする。かつて推奨された sizes="any" は、Chrome が ICO と SVG の両方を取りに行く不具合を招いたため、2023 年に 32x32 へ改められた。これで Chrome は SVG を優先する。

manifest#

1
{
2
  "name": "サイト名",
3
  "icons": [
4
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
5
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
6
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
7
  ]
8
}

PWA にしないサイトでも、Android のホーム画面アイコンのために置く価値はある。

ダークモード#

SVG の中に <style>@media (prefers-color-scheme: dark) { ... }</style> を書けば、Chrome と Firefox はタブの配色に合わせて色を切り替える。ただし Safari はこのメディアクエリを favicon では無視する(WebKit bug 309949、2026-04 時点で未修正)。確実に両方で見せたいなら、背景を塗ったタイル型のアイコンにして配色の切り替えに依存しない設計のほうが安全。

Google 検索結果の favicon#

正方形(1:1)で、最小 8×8px。見栄えのために 48×48px より大きいものを推奨
対応形式は ICO / PNG / GIF / JPEG / BMP / TIFF / PPM。SVG は列挙されていないので、ICO か PNG も置いておく
rel は icon / shortcut icon / apple-touch-icon / apple-touch-icon-precomposed を見る
検索結果に使われるのはホスト名ごとに 1 つ。サブディレクトリに置いた favicon はサイト全体には効かない
Googlebot-Image が favicon を、Googlebot がホームページをクロールできる必要がある
反映は数日〜数週間。URL を頻繁に変えない

生成の仕方#

SVG を 1 枚描き、ビルドスクリプトで PNG に書き出すのが楽。Node なら @resvg/resvg-js で SVG → PNG、ICO は PNG を ICO コンテナ(6 バイトのヘッダ + 16 バイトのエントリ + PNG 本体)に包めば Vista 以降のすべての環境で読める。apple-touch-icon と maskable は角丸を付けず全面塗りで、maskable だけ絵を 12% ほど内側に縮める。

落とし穴#

favicon はブラウザのキャッシュが強い。差し替えが反映されないときはプライベートウィンドウで確認する
apple-touch-icon に透過 PNG を使うと、iOS が透過部分を黒で塗る
16px での見え方を必ず確認する。細い線や小さな文字は潰れる

更新履歴#

2026-10-17: 初版。ブログの favicon を作り直す際の調査