2025 年に favicon.ico は必要か
2025 年の favicon.ico 対応についての実務ガイドです。現行ブラウザでは必須ではありませんが、サーバーログのノイズを減らし、古いツールとの互換性を残すために置く理由を解説します。
結論から
技術的には、現行のブラウザ（Chrome、Edge、Safari、Firefox）は .ico ファイルを必須としません。ただし実務上は、残しておくことを強く推奨します。
favicon.ico が無いと、サーバーログは 404 で埋まります。古いボットや RSS リーダーの多くは HTML の header を読まず、ルートの /favicon.ico を直接取りにいきます。
2025 年の推奨構成
すべての用途をカバーするのに、必要なファイルは 3〜4 個です。レガシー形式を何十サイズも作る必要はありません。
1. favicon.ico（32×32）— レガシー互換とフォールバック
- 必ずサイトのルートディレクトリ（/favicon.ico）に置く
- 主にログのエラーを防ぎ、古いツール向けの受け皿になります
2. icon.svg — 現行の標準（第一候補）
- 現行ブラウザが優先します
- 品質を落とさず、いくらでも拡縮できます
3. apple-touch-icon.png（180×180）— iOS デバイス
- iPhone / iPad で「ホーム画面に追加」したときに使われます
- 複数サイズは不要です。180×180 ですべての iOS デバイスをカバーできます
4. manifest.webmanifest（任意）
- 主に Android と PWA インストール向けです
- 192×192 と 512×512 の PNG アイコンを定義します
実装コード（HTML / Nuxt Head）
いちばん短く、現行の書き方です。
<head>
<!-- 1. Modern SVG (highest priority) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- 2. Apple iOS icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 3. Traditional .ico (fallback) -->
<!-- Note: Adding sizes="any" tells Chrome this is a bitmap, -->
<!-- so Chrome will prefer SVG over ICO -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- 4. Android/PWA configuration -->
<link rel="manifest" href="/manifest.webmanifest">
</head>Nuxt.js プロジェクトの場合
nuxt.config.ts またはページコンポーネントで：
useHead({
link: [
{ rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
{ rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
{ rel: 'icon', href: '/favicon.ico', sizes: 'any' },
{ rel: 'manifest', href: '/manifest.webmanifest' },
],
})favicon.ico を残す理由
サーバーログをきれいに保つ
favicon.ico が無いと、サーバーログは 404 で埋まります。ボット、クローラー、RSS リーダーが /favicon.ico を自動で取りにいくたびに、エラー行が増えます。ノイズが増え、本当の問題を見つけにくくなります。
古いツールとの互換
古いツール、RSS リーダー、ブックマーク管理、ブラウザ拡張の多くは、ルートに favicon.ico がある前提です。現行ブラウザでは不要でも、これらのツールは HTML の header を読まず、ルートへ直接取りにいくことが多いです。
コストはほぼゼロ、効果は大きい
32×32 の favicon.ico はファイルサイズが小さく（通常 2KB 未満）、メンテも不要です。きれいなログと広い互換性の方が、このコストを大きく上回ります。
現行のやり方：SVG を第一候補に
互換のために favicon.ico は残しつつ、主たるファビコンは SVG にしてください。
- 解像度に依存しない： 16×16 から 512×512 まで、どのサイズでもくっきり見えます
- ファイルが小さい： 同等の PNG より小さいことがよくあります
- 先まで使える： 高 DPI ディスプレイや今後のデバイスでも問題なく動きます
- ファイルは 1 つ： SVG 1 つで、複数の PNG サイズを置き換えられます
現行ブラウザ（Chrome、Firefox、Safari、Edge）はすべて SVG ファビコンに対応しています。ICO の link に sizes="any" を付けると、使えるときは SVG が選ばれます。
要点
- .ico は消さない： ブラウザが使わなくても、ルートに残してログをきれいに保ち、古いツールとの互換を維持してください。
- これからは SVG： 解像度の問題のほとんどは、SVG 1 つで足ります。
- 構成は最小で： favicon.ico、icon.svg、apple-touch-icon.png、任意で manifest.webmanifest の 3〜4 ファイルで、用途をカバーできます。
- 優先順が効く： 先に SVG、次に sizes="any" の ICO を書き、現行ブラウザが最適な形式を選ぶようにしてください。
まとめ
2025 年、現行ブラウザに favicon.ico は技術的には不要です。それでも置くのが実務の標準です。ログのノイズを防ぎ、古いツールとの互換を残し、コストはほぼゼロです。現行の SVG ファビコンと組み合わせれば、今とこれから両方に足る構成になります。
要点は単純さです。主たるファビコンは SVG 1 つ、互換用に小さな ICO、iOS 向けに Apple Touch Icon、任意で PWA 用の manifest。この最小構成で用途をカバーでき、何十サイズも管理する必要はありません。