Favicon：如何确保浏览器只下载 SVG 版本

Posted 2022-05-24 前端精髓

<!-- Correct -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

有了这个，Chrome 不再重复下载两个图标，而是单独使用 SVG（应该如此）。只是需要注意的事情。我的 ICO 文件是 5.8kb，所以现在每个未缓存的页面加载都节省了 5.8kb，这对我来说很重要。

除了 Safari 之外，所有当代浏览器都支持SVG 图标 。如果您的网站包含既是ICO（后缀）和SVG图标，请务必添加 sizes="any" 给ICO属性 的 <link> ，以 防止 Chrome浏览器下载和使用ICO图标而不是SVG图标。