2026年にfaviconを適切に設定するには、最新の機能と後方互換性のバランスを取る必要があります。このガイドでは、すべてを実用的なチェックリストにまとめました。
2026年版 Faviconチェックリスト
- favicon.ico (32×32) — ルートに配置します。普遍的なフォールバックです。
- favicon-32x32.png — 最新のブラウザタブ用（Retina対応）。
- favicon-16x16.png — 標準DPIのブラウザタブ用。
- apple-touch-icon.png (180×180) — iOSホーム画面用。
- android-chrome-192x192.png — AndroidおよびPWA用。
- android-chrome-512x512.png — PWAスプラッシュスクリーン用。
- site.webmanifest — Androidアイコンを参照するPWA manifest。
- HTML <link> tags — すべてのページの
<head>内に記述します。
デザインのベストプラクティス
シンプルに保つ
16×16ピクセルでは、細かいディテールは完全に消えてしまいます。最適なfaviconは次のとおりです。
- 一文字または記号
- 前景と背景のコントラストが高い
- グラデーションや細い線がない、太くクリーンな形状
透明な背景を使用する
単色の背景は、最新のブラウザUIでは古く見えます。透明なPNGは、ライトモード、ダークモード、カスタムテーマなど、あらゆるブラウザテーマに自然に溶け込みます。
例外: Apple Touch Iconsは、iOSが透明な領域を黒で埋めるため、単色の背景を持つ必要があります。
ライトモードとダークモードの両方に対応してデザインする
ダークモードが標準になりつつあるため、ライトとダークの両方の背景でfaviconをテストしてください。暗いfaviconが暗いブラウザタブにあると見えません。prefers-color-schemeをサポートするSVG faviconの使用を検討してください（当社のSVG faviconガイドを参照してください）。
大きなサイズから始めて、縮小する
常に512×512ピクセル以上でデザインし、必要な各サイズでエクスポートしてください。必要に応じて16×16バージョンを手動で最適化してください。自動縮小では、ぼやけた結果になることがあります。
技術的なベストプラクティス
ファイルの配置
favicon.icoはドメインのルートに配置してください。ブラウザは自動的にそこを探します。- 他のファイルは、整理のために
/favicons/サブディレクトリに配置しても構いません。 - HTMLでは絶対パスを使用してください（
/favicon.icoであり、favicon.icoではありません）。
キャッシュ戦略
- faviconファイルには長いキャッシュヘッダー（1年）を設定してください。これらはめったに変更されません。
- 更新する際は、キャッシュを無効にするクエリ文字列を使用してください:
href="/favicon.ico?v=2" - またはファイルをリネームしてください:
href="/favicon-v2.ico"
パフォーマンス
- TinyPNGや
pngquantのようなツールでPNGファイルを最適化してください。 - 32×32のPNGは2KB未満であるべきです。
- ブラウザが32×32しか必要としないときに、512×512の画像を提供しないでください。
SEOのベストプラクティス
Google検索結果
Googleは検索結果にfaviconを表示します。あなたのfaviconが表示されるようにするには：
- 48pxの倍数（48×48、96×96など）のfaviconを提供してください。
robots.txtでfaviconファイルをブロックしないでください。- faviconはウェブサイトと同じドメインにある必要があります。
- 正方形の画像である必要があります。
- 不適切、攻撃的、または一般的なアイコンであってはなりません。
ページ間の一貫性
サイトのすべてのページで同じfaviconを使用してください。ページごとに異なるfaviconを使用すると、ユーザーを混乱させ、ブランド認知度を低下させます。
避けるべき一般的なアンチパターン
| アンチパターン | なぜ悪いのか | 代わりにすべきこと |
|---|---|---|
| favicon.icoのみ提供 | iOS/Android/PWAのサポートが不足 | すべてのサイズを提供 |
| テキスト付きのフルロゴを使用 | 16pxでは判読不能 | 記号またはモノグラムを使用 |
| JPEGを.icoにリネーム | ブラウザが拒否する可能性あり | 適切な形式変換を使用 |
| CDNからのみfaviconを提供 | Googleがインデックスしない可能性あり | 同じドメインでホスト |
| アニメーションfavicon | 気が散る、サポートが不十分 | 静的アイコンを使用 |
| faviconがまったくない | プロフェッショナルではない、SEOに悪影響 | 追加する — 5分でできます |
Favicon設定のテスト
- ブラウザタブ — Chrome、Firefox、Safari、Edgeで確認します。
- ブックマーク — ページをブックマークしてアイコンを確認します。
- iOSホーム画面 — iPhoneのホーム画面に追加します。
- Androidホーム画面 — Androidのホーム画面に追加します。
- Google検索 — Search Consoleを使用してfaviconのインデックス登録を確認します。
- ソーシャルシェア — リンクプレビューのOG imageを確認します。
競合他社がどのようにfaviconを扱っているか知りたいですか？Mzu favicondlを使用して、任意のウェブサイトのfavicon設定を即座に確認できます。