シャープな 1024×1024 の PNG をアップロードしたはずなのに、ブラウザのタブでは favicon がいまだにぼやけて表示される——誰もが一度は経験したことがあるはずです。原因はほぼ常に、アップロードしたファイルとブラウザが実際にレンダリングに選んだファイルのミスマッチであり、ソースのアートワークの欠陥ではありません。

2 分でできるクイックフィックス

ぼやけた favicon の大半は、1 つのワークフローで解決します。より深い原因を追究する前に、まずこちらを実行してください。

  1. Mzu favicondl を開き、マスター画像（SVG、もしくは最低でも 512×512 の PNG）をアップロードします。
  2. 一式のパッケージを生成します。16×16、32×32、48×48 をまとめた multi-size ICO、Apple Touch Icon 用の 180×180、web manifest 用の 192×192 と 512×512 の PNG です。
  3. サイトのルートおよび /icons ディレクトリにある favicon ファイルをすべて差し替えます。古いファイルを残したままにしないでください。
  4. ブラウザをハードリロードします（macOS なら Cmd-Shift-R、Windows なら Ctrl-Shift-R）。
  5. DevTools → Network で favicon をフィルタし、新しいファイルが実際に配信されているかを確認します。

以下の最小限のスタックを HTML の head に追加します。

<link rel='icon' href='/favicon.ico' sizes='16x16 32x32 48x48'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32.png'>

ここまでの手順を行ってもタブがまだぼやけて見える場合は、以下の 7 つのうちのいずれかが原因です。

favicon がぼやける 7 つの根本原因

1. ブラウザが retina 画面で 16×16 のファイルを拡大している

最も多いのは、favicon.ico の中に 16×16 の画像しか含まれていないケースです。1× ディスプレイでは問題なく見えます。しかし retina（2× もしくは 3×）画面では、OS がその 16×16 のファイルを選び、bilinear フィルタで拡大します。ここに「にじみ」が生まれます。16、32、48 を 1 つの multi-size ICO にまとめておけば、OS は最も一致するシャープなサイズを選んでくれます。詳細は multi-size ICO のガイド を参照してください。

2. 巨大な PNG を 1 枚だけ配信している

512×512 の PNG はホーム画面の manifest には最適ですが、タブ表示には不向きです。<link rel="icon"> でその PNG だけを宣言していると、ブラウザは論理ピクセル 16 もしくは 32 までダウンサンプリングします。写真系コンテンツの bilinear ダウンサンプリングは、どうしても柔らかく見えてしまいます。タブ表示のアンカーとするには、専用の 32×32（もしくはピクセル整列された larger な）PNG が必要です。

3. SVGにviewBoxがない

viewBox属性のないSVGは、ブラウザが選んだサイズ(通常は16×16)でラスタライズされたうえで、タブの表示領域に合わせて拡大表示されます。本来シャープなベジェ曲線がぼやけた輪郭に変わってしまいます。必ずviewBox="0 0 32 32"(あるいは同様の値)を指定し、そのグリッド範囲内でデザインしてください。SVG faviconのガイドで全パターンを解説しています。

4. SVG内にラスター画像が埋め込まれている

デザイナーがIllustratorにJPEGやPNGを貼り付けて、そのままSVGとして保存してしまうケースがあります。ブラウザは一見問題なく描画しますが、16×16サイズではラスター部分はベクターのように滑らかに拡大されず、ピクセル単位でサンプリングされた画像としてそのまま表示されます。SVGのスケーラブルという利点は失われています。ラスターの塗りを実際のベクターパスへ変換するか、SVGは使わずに複数のサイズを含むICOとして書き出してください。

5. ICOに含まれるサイズが1種類しかない

ICOは単一画像ではなく、複数の画像を格納できるコンテナ形式です。16×16のPNGの拡張子を.icoに変更しただけでは、中身は16×16のみのファイルになります。OSやブラウザは、スロットに収まる範囲で最大の埋め込みサイズを選択します。16×16しか入っていないファイルでは、高DPI表示では常にソフトウェア拡大処理が行われ、結果としてソフトな見た目になります。

6. ロゴに16×16には不要な情報が多すぎる

細い線、五角形の星、グラデーション、精細なセリフ書体などは、タブサイズでは判読できなくなったり、輪郭が崩れたりします。これは技術的に「ぼやけている」というより、画素グリッドで表現できる情報量を超えているだけです。太い線と高コントラストを持つ、シンプルで力強い単一のマークに簡略化してください。

7. ブラウザが古いキャッシュを表示している

Chromeのfaviconキャッシュはとにかく強力です。新しいファイルをアップロードしても、Chromeはタブをリロードしても古い画像を返し続けます。特にmacOSでこの傾向が強く、Safariのキャッシュはさらに強力です。対処法としてはハードリロード、そして症状が改善しない場合はfaviconキャッシュを手動で削除してください。

ぼやけたfaviconを防ぐには

まとめ

faviconがぼやけるのは、ほとんどの場合、原因がはっきりしています。ほぼ確実にサイズか形式の不一致が原因なので、2分で修正できます。Mzu favicondlで適切なパッケージを生成し、すべてのファイルを置き換え、必要に応じてハードリロードとキャッシュクリアを行ってください。5分以内にタブのアイコンがくっきりし、サイトが一気に信頼感のある印象になります。

仕様上の要件を確認する

HTML Standardでは、rel='icon'を現在のページを表すアイコンのリンク関係として定義しています。