透明なファビコン ガイド
ファビコンの単色の背景は時代遅れに見え、ダーク モードと衝突します。アルファをエンドツーエンドで維持する方法は次のとおりです。
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
透明なソースから始める
背景を塗りつぶさずにロゴを PNG-32 としてエクスポートするか、SVG を使用します。ほとんどのぼかしは、ファビコン ツールではなく、焼き付けられた白い背景から発生します。
.ico はアルファ版をサポートします
.ico 内の PNG 圧縮エントリはアルファ チャネルを保持します。ビットマップ エントリでは、サイズごとに適切なエンコーディングを選択するツールを使用します。
ダークモードの扱い
<style>@media (prefers-color-scheme: dark) { ... }</style> ブロックを含む SVG を出荷し、.ico に静的フォールバックを処理させます。
よくある質問
How do I make a favicon with a transparent background?
Start from a PNG-32 or SVG with no baked-in background. Export to .ico using a tool that preserves the alpha channel.
Does .ico support transparency?
Yes when entries use PNG compression. Bitmap-encoded .ico entries do not preserve alpha.
How do transparent favicons work in dark mode?
Ship an SVG favicon with prefers-color-scheme styles, and keep a static .ico fallback for browsers that ignore SVG.