ファビコンがぼやけて見える理由（とダウンスケール修正法）

シャープな1024×1024のロゴをアップロードします。ジェネレーターは16×16の ファビコンを出力します。そしてブラウザタブに表示されるのは、識別不能な しみです。心当たりがあるなら、問題は通常ロゴではなく、アイコンの縮小方法にあります。ここでは、ぼやけたファビコンが起こる コンピュータグラフィックス上の理由と、それを修正するリサイズ技法を解説します。

1回のリサイズが小さいアイコンを破壊する理由

ほとんどのファビコンジェネレーター（そしてコピペされたcanvasコードの大半）は こうします。

ctx.drawImage(img, 0, 0, 16, 16) // 1024px source → 16px target, one hop

画像を64倍に縮小する単一の drawImage 呼び出しは、単純なバイリニア補間を 使います。出力256ピクセルのそれぞれについて、ブラウザはソースのごく小さな近傍のみを サンプリングします。つまり、入力ピクセルの約 99.98%は平均化されずに捨てられています。 細いストローク、文字形状、1pxの隙間などの微細なディテールは「ブレンドダウン」 されず、ランダムな地点でサンプリングされます。だからこそ文字は粥のようになり、 ロゴは濁った塊を発症するのです。

これは解決策が知られている古典的なグラフィックスの問題です。 ステップでダウンスケールすること。毎回半分にします （1024 → 512 → 256 → 128 → 64 → 32 → 16）。各2×ステップは十分小さいので、 バイリニアサンプリングが意味のある近傍を平均化し、ディテールはスキップされず 順次統合されます。3DレンダリングのミップマップやcanvasのimageSmoothingQuality: "high" と同じ考え方ですが、 半分にするステップを明示的に連鎖させることで、ブラウザ間で一貫した結果が得られます。

修正：canvasでの段階的半分縮小

function drawDownscaled(ctx, img, targetW, targetH) {
  let source = img
  let w = img.naturalWidth
  let h = img.naturalHeight

  // Halve repeatedly while both dimensions stay above the target
  while (Math.floor(w / 2) >= targetW && Math.floor(h / 2) >= targetH) {
    const step = document.createElement('canvas')
    step.width = Math.floor(w / 2)
    step.height = Math.floor(h / 2)
    const stepCtx = step.getContext('2d')
    stepCtx.imageSmoothingEnabled = true
    stepCtx.imageSmoothingQuality = 'high'
    stepCtx.drawImage(source, 0, 0, w, h, 0, 0, step.width, step.height)
    source = step
    w = step.width
    h = step.height
  }

  // Final hop is now at most ~2x, which bilinear handles well
  ctx.imageSmoothingQuality = 'high'
  ctx.drawImage(source, 0, 0, w, h, 0, 0, targetW, targetH)
}

このループにより、最後の縮小は軸あたり最大~2×に保たれます。補間が 実際に機能する範囲です。ディテール豊かなロゴでは雲泥の差が出ます。 ストロークはつながったまま、文字のカウンター（穴）は生き残り、 エッジは灰色に溶けることなくコントラストを保ちます。

完璧なリサイズでも悪いソースは救えない

残るぼやけの大部分は、ソース側の2つのミスが原因です。

• すでに小さいラスタから始める。 64×64のソースを512に拡大して また縮小しても何も得られません。常にロゴの最大版から、理想はベクターの オリジナルから始めてください。
• 512向けにデザインして16で読めることを期待する。 優れたタブ アイコンは16px向けにデザインされたものです。細かいディテールを落とし、 ストロークをキャンバスの最低1/16の太さにし、1〜2色でまとめます。ロゴに ワードマークがあるなら、ファビコンサイズではマークか頭文字だけを使いましょう。

そして、ラスタのリサイズを完全にスキップしたいなら、SVGファビコンは解像度非依存です。 ブラウザがベクターをちょうど16pxで描画し、補間は一切関与しません。

ファビコンが実際にシャープかを確認する方法

1. 生成された favicon-16x16.png をダウンロードし、画像ビューアで400%ズームで開きます。灰色の粥ではなく、明瞭なエッジが欲しいところです。
2. ソースのロゴと並べて、腕を伸ばして目を細めて比較します。シルエットは 一致しているべきです。
3. 実際のブラウザタブで、ライトとダークの両テーマ、他のタブと並べて確認し、 識別できるかをチェックします。

私たちのジェネレーターで修正済み

このまさの失敗モードに対して自社パイプラインを監査したとき、私たちは 単一ステップのリサイズを、すべての出力サイズにわたる段階的半分縮小 （と imageSmoothingQuality: "high"）に置き換えました。 だからこそ、Favicon.one で生成されたアイコンは、 他のツールがつぶれる16pxでも持ちこたえます。ジェネレーターを比較するなら、 これがテストです。細いストロークと小さいテキストを含むディテール豊かなロゴを アップロードし、まず16×16の出力を見てください。

パイプラインの詳細は、PNGをファビコンに正しく変換する方法、 および必要な全寸法をまとめたファビコンサイズガイドをご覧ください。