有趣的网站图标:SVG+Favicon

有趣的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 对其进行修改。但是,可以使用 emojimedia 之类的技术。

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 是一个快速的视觉标识符,它将用户与数字呈现联系起来。建议使用中以确保它是最好的,更准确地代表品牌。

faviconsvg