SVG と ICO のアイコン
SVGは未来、ICOは基盤です。両方用意しましょう。
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
最新のブラウザで SVG が勝つ理由
1 つのファイルは無限に拡張可能で、ダークモード メディア クエリをサポートします。ファイル サイズは通常 2KB 未満です。
ICO が依然として必須である理由
古いブラウザ、Windows ショートカット、および一部のエンベダーは .ico のみを読み取ります。これをスキップすると、最大 5% のユーザーに壊れたアイコンが生成されます。
両方を一緒に使用する
最初にユニバーサル フォールバックとして favicon.ico をリンクし、次にそれをサポートするブラウザの上部に <link rel="icon" type="image/svg+xml"> をリンクします。
よくある質問
Should I use SVG or ICO for a favicon?
Use both. Link favicon.ico as the universal fallback, then add <link rel="icon" type="image/svg+xml"> for scalable rendering on modern browsers.
Does SVG work in every browser?
Most modern browsers support SVG favicons, but older browsers and some embedders still need .ico. Never ship SVG alone.
Can an SVG favicon support dark mode?
Yes. Embed a <style>@media (prefers-color-scheme: dark) { ... }</style> block inside the SVG file.