有趣的网站图标:SVG+Favicon
favicons
是在浏览器选项卡中看到的小图标,当浏览浏览器的书签和标签时,它们可以帮助用户清晰的知道是哪个网站。它们是互联网历史的一部分,能够实现一些很酷的效果。
一个非常新的技巧是能够将 SVG
用作 favicon
,现在大部份浏览器都支持这一特征。
以下是如何向网站添加收藏夹图标的代码:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="alternate icon" href="/favicon.ico">
<link rel="mask-icon" href="/safari.svg" color="#1454ec">
如果浏览器不支持 SVG 图标,它将忽略第一个链接元素声明并继续第二个,这确保了所有支持网站图标的浏览器都可以正常显示。
细心的你可能发现第二行中 rel
声明的备用属性值,这是向浏览器声明,使用.ico
文件格式的 favicon
是专门用作替代表示的。
最后一行代码,用于加载另一个 SVG 图标,名为safari.svg
。这是为了支持 Safari 的固有的标签功能,这个功能在其他浏览器支持 SVG favicon
之前就存在了。当然也可以在这里添加额外的文件,以针对不同的应用程序和服务增强网站。
以下是有关 SVG favicons
浏览器支持情况,截图数据来自 Caniuse :
为什么要用SVG
.ico
文件格式很早就存在,可以支持最大 256×256
像素的图像,为什么要用svg?
容易制作
制作.ico
文件很痛苦,现在一般通过在线网站来转换。该文件是 Microsoft 使用的专有格式,这意味着需要专门的工具来制作它们。 SVG 是一个开放标准,这意味着可以使用它们而无需任何进一步的工具或平台锁定。
面向未来
视网膜? 5K、 6k,当为网站图标使用对分辨率无感的 SVG 文件时,在确保网站图标在未来的设备上看起来也很清晰,无关显示器分辨率大小。
性能
SVG 通常是非常小的文件,特别是与它们的光栅图像对应的文件相比甚至更小。通过仅使用 16×16
像素 favicon
作为不支持 SVG 的浏览器的兼容方案,提供了一个组合设置,使其具有高度的兼容性。
使用技巧
SVG 的另一个很酷的地方是可以直接在其中嵌入 CSS,这意味着可以做一些有趣的效果,比如用 JavaScript 动态调整它们,前提是 SVG 被声明为内联而不是使用 img
标签嵌入。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: #272019; }
</style>
<!-- etc. -->
</svg>
由于 SVG 图标是使用 link 元素嵌入的,因此无法真正使用 JavaScript 对其进行修改。但是,可以使用 emoji
和 media
之类的技术。
Emoji
Emoji表情符号作为网站图标,在SVG的文本元素中使用表情符号来制作一个带有透明背景的小图标,以此作为网站的图标。如有兴趣,可以点击这里查看DEMO 。
暗黑模式支持
使用 preferred -color-scheme
媒体查询来支持暗黑模式。对于支持的浏览器,很简单就可以实现此效果。
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<style>
path {
fill: #1454ec;
}
@media (prefers-color-scheme: dark) {
path {
fill: #ffffff;
}
}
</style>
<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864 8 0z"/>
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
</svg>
正常效果
暗黑模式效果
总结
favicons 在大小上的不足,在用户体验上弥补。这些图标在网站上作为用户的导航工具,往往会留下浏览器标签。
通常情况下,favicon 是一个快速的视觉标识符,它将用户与数字呈现联系起来。建议使用中以确保它是最好的,更准确地代表品牌。