谷歌浏览器将在v80正式版里支持网站使用SVG矢量图形来保证图标清晰度
多数网站都会在源代码头部声明某个图像作为网站图标,这个图标也会在浏览器加载时显示在标题前方进行区分。
也正是如此基于个性化和品牌宣传缘故网站都会设计自己的图标,但是问题在于这个图标尺寸非常小清晰度不够。
业界通常将这种图标称之为 Favicon 并且使用专门的格式ICO,网站需要将普通的图片转换成.ICO后再进行展示。
而火狐浏览器则支持使用矢量图形格式SVG作为网站图标,SVG不会随缩放而变形因此也不存在清晰度下降问题。
在最近的测试版更新里谷歌浏览器开发团队已经开始测试SVG图标,当加载网站时可以将SVG识别为网站的图标。
为何这么久才准备支持矢量图片格式作为网站图标也有原因 , 因为Chrome SVG相关代码已经高度集成在渲染器。
如果需要支持网站使用矢量图片格式则需要调整整个渲染器代码,这也是谷歌工程师不愿意进行支持的主要原因。
不过在谷歌浏览器金丝雀测试版里谷歌已经支持矢量图像格式图标 , 预计将在Chrome v80版开始正式进行支持。
谷歌浏览器的这个变化也会影响到其他使用Chromium的浏览器,包括Edge、维瓦尔第、Opera以及Brave等等。
因此网站也可以广泛使用SVG矢量格式作为网站的主要图标,当然对于不兼容的浏览器还可以设置额外替代办法。
此外谷歌浏览器还将支持使用Prefers Color scheme属性调整图标颜色 , 例如在黑色模式下将图标也调整为黑色。
# 当浏览器支持使用SVG图像时调用SVG图像 <link rel="icon" type="image/svg+xml" href="happyface.svg"/> # 当浏览器不支持使用SVG图像时调用替代图像 <link rel="alternate icon" type="image/png" href="sadface.png"/> #以上方法来自:http://Dahlström.net/svg/favicon/favicon.html