SVG 与 ICO 图标
SVG是未来；ICO是基础。两者都提供。
4 分钟阅读
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
为什么 SVG 在现代浏览器上获胜
一个文件可无限扩展，支持暗模式媒体查询。文件大小通常小于 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.