Lighthouseのスコアを100点にするため、サイト内の全画像をWebPに変換する作業を終えたばかりのあなた。ふと「ブラウザのタブでも favicon webp format support（WebPファビコンのサポート）に頼って、古いICOファイルを捨てられないだろうか？」と考えたことはありませんか？
2026年におけるWebPファビコン対応の現実
WebPはヒーロー画像には最適です。JPEGよりも透明度の処理に優れ、PNGよりもファイルサイズを小さくできます。しかし、ブラウザタブの生態系は全くの別物です。
技術的には、Chromiumベースのブラウザ（Chrome、Edge、Braveなど）はWebPファビコンをサポートしています。標準のlinkタグにWebPファイルを指定すれば、Chromeは問題なくレンダリングしてくれます。しかし、Safariは相変わらず頑固で、代替フォーマットを用意しないと、真っ白な四角や一般的なイニシャルアイコンにフォールバックしてしまうことがよくあります。
Googleでさえ使っていない理由
面白い事実をお教えしましょう。WebPフォーマットを開発したのはGoogleです。しかし、今Google.comやGitHubのDOMを検証しても、WebPのファビコンは一つも見つかりません。彼らは完全にICOとPNGに依存しています。
なぜでしょうか？ファビコンは非常に小さいからです。32x32ピクセルのPNGはすでに極小サイズ（多くの場合1KB未満）です。そのスケールでは、WebPの圧縮メリットは実質ゼロになります。WebPファイルをデコードするオーバーヘッドは、生のPNGやSVGをレンダリングするよりもCPUサイクルを消費する可能性があるのです。
実装方法（どうしても使いたい場合）
ユーザーの100%がChromeを使用している社内ダッシュボードを構築しているなら、次のように実装できます。
<link rel='icon' type='image/webp' href='/favicon.webp'>しかし、一般公開されているサイトでは、フォールバックを提供する必要があります。ブラウザはタグを上から下へと読み込むため、SafariがWebPの宣言でつまずかないよう、HTMLを慎重に構成しなければなりません。
2026年のベストプラクティス
プロとしての私のアドバイスは？ファビコンにWebPを使うのは完全にやめましょう。フロントエンド開発において、実際には存在しない問題を解決しようとしているだけです。
代わりに、モダンな標準スタックを採用してください：
- モダンブラウザ向けには、単一のスケーラブルベクターグラフィックを使用する（SVGファビコンガイドを参照）。
- 古いブラウザやRSSリーダーのために、ルートディレクトリに32x32のレガシーICOファイルを保持する。
- Apple Touch Iconには180x180のPNGを使用する。
どの画像タイプをどこで使うべきかまだ混乱している場合は、包括的なファビコンファイルフォーマット比較をチェックしてください。ブラウザタブを過剰にエンジニアリングするのはやめましょう。Mzu favicondlを使ってブラウザが本当に求めているフォーマットを生成し、WebPファイルは実際のページコンテンツのために取っておきましょう。