favicon設定ガイド｜20ファイル用意して後悔した話と、今必要な3ファイル
結論（私の判断基準）
- 必要なファイルは3つだけ：favicon.ico、favicon.svg、apple-touch-icon.png
- 20ファイル用意する必要はない：私は用意して後悔した
- SVGが使えるなら1ファイルで十分：ダークモード対応もできる
- PWA対応は最初からやらない：必要になったらやる
私は以前、あらゆるサイズのfaviconを20ファイル以上用意していた。無駄だった。
私が20ファイル用意して後悔した話
「完璧にしたい」と思って、ファビコンジェネレーターで20ファイル以上生成した。
favicon-16x16.png
favicon-32x32.png
favicon-48x48.png
android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon-57x57.png
apple-touch-icon-60x60.png
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-114x114.png
apple-touch-icon-120x120.png
apple-touch-icon-144x144.png
apple-touch-icon-152x152.png
apple-touch-icon-180x180.png
mstile-70x70.png
mstile-144x144.png
mstile-150x150.png
mstile-310x150.png
mstile-310x310.png
...
HTMLの<head>も膨大になった。管理が面倒。
**問題は更新するときだった。**ロゴを変更したら、20ファイル全部作り直し。1つ漏れがあると、どこかのブラウザで古いアイコンが表示される。
調べたら、今のブラウザは3ファイルで十分だった。
キャッシュで詰んだ話
faviconを更新した。確認した。変わってない。
ブラウザのキャッシュを消した。変わってない。
シークレットモードで開いた。変わってない。
Vercelのエッジキャッシュだった。
faviconは強力にキャッシュされる。ブラウザだけじゃない。CDNにもキャッシュされる。
結局、ファイル名を変えた。favicon.svgをfavicon-v2.svgにして、HTMLも書き換えた。
<link rel="icon" href="/favicon-v2.svg" type="image/svg+xml">
それ以来、faviconを更新するときは必ずクエリパラメータを付けるか、ファイル名を変える。
2025年版：必要なファイルは3つだけ
| ファイル | 用途 | サイズ |
|---|---|---|
| favicon.ico | 古いブラウザ用 | 32×32（1種類でOK） |
| favicon.svg | モダンブラウザ用 | サイズ指定不要 |
| apple-touch-icon.png | iOS用 | 180×180 |
これで全デバイス・全ブラウザをカバーできる。
HTMLの記述（コピペ用）
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
これだけ。20行書いていた頃が馬鹿らしい。
各ファイルの作り方
favicon.ico（32×32）
古いブラウザ用。ルートディレクトリに置く。
https://example.com/favicon.ico
**必ずルート直下に置く。**RSSリーダーなど一部のツールは/favicon.icoしか見ない。
favicon.svg
モダンブラウザ用。SVGならサイズ指定不要で、どの解像度でも綺麗に表示される。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="14" fill="#4A90D9"/>
</svg>
ダークモード対応もできる：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
circle { fill: #4A90D9; }
@media (prefers-color-scheme: dark) {
circle { fill: #6BA8E5; }
}
</style>
<circle cx="16" cy="16" r="14"/>
</svg>
apple-touch-icon.png（180×180）
iOSでホーム画面に追加したときに表示されるアイコン。
180×180のPNGを用意して、140×140程度のアイコンを中央に配置。周囲に余白を持たせる。
Android用はどうするか
Android用はmanifest.json（またはsite.webmanifest）で指定する。
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
<link rel="manifest" href="/site.webmanifest">
PWA対応するなら必要。普通のWebサイトなら不要。
私は最初からPWA対応を入れない。「PWAにしたい」という具体的な要件が出てから対応する。
よくある失敗（私がやったこと）
失敗1：16×16を指定した
Googleは「16×16は指定しないでください」と明言している。48px以上を推奨。
失敗2：favicon.icoをサブディレクトリに置いた
/assets/favicon.icoに置いたら、一部のツールで認識されなかった。ルート直下に置く。
失敗3：キャッシュが効いて更新されない
これは本当に焦った。ファビコンは強力にキャッシュされる。更新したら?v=2のようなクエリパラメータを付ける。
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">
**または、ファイル名自体を変える。**私は今、更新するときは必ずこれをやる。
私の割り切り
| やること | やらないこと |
|---|---|
| favicon.ico、favicon.svg、apple-touch-iconの3つを用意 | 20サイズを網羅する |
| SVGでダークモード対応 | PNGで複数サイズを用意 |
| キャッシュ対策でバージョン番号を付ける | 「いつか反映されるだろう」と待つ |
| PWAは要件が出てから対応 | 最初からmanifest.jsonを用意 |
**完璧を目指すと管理が破綻する。**必要最小限で十分。
撤退基準（ここまでやらない）
- 個人開発ではfavicon.svg 1ファイルで済ませる：icoもapple-touch-iconも作らない
- クライアント案件では3ファイル：これ以上は増やさない
- PWA対応は要件が出てから：「最初から入れておこう」はやらない
迷ったときの判断
| 迷い | 私の判断 |
|---|---|
| 何ファイル用意するか | 3ファイル（ico、svg、apple-touch-icon） |
| SVGを使うか | 使う。ダークモード対応もできる |
| Android用を用意するか | PWAなら用意、普通のサイトなら不要 |
| どこに置くか | favicon.icoはルート直下、他は任意 |
| キャッシュが効いたら | ファイル名を変えるか、クエリパラメータを付ける |
まとめ
- 必要なファイルは3つ：favicon.ico、favicon.svg、apple-touch-icon.png
- 20ファイル用意する時代は終わった
- SVGを使えばダークモード対応もできる
- favicon.icoはルート直下に置く
- キャッシュ対策を忘れない
私は20ファイル用意して後悔した。キャッシュで詰んで焦った。今は3ファイルで十分。個人開発ならSVG 1ファイルで済ませる。