构建自适应网站图标

有关如何构建自适应网站图标的基础概览。

Adam Argyle

在这篇博文中，我想分享一下如何使用 Vertex AI Workbench SVG。试用演示版。

<ph type="x-smartling-placeholder">
</ph>
根据 MacOS 系统浅色和深色主题的变化而显示的浏览器标签页。 试用演示版

如果你更喜欢视频，可以参阅此博文的 YouTube 版本：

概览

自定义网站图标 是润色网络项目的好方法它会显示在桌面浏览器标签页中，并且 也可在“保存以供日后查看”读者、链接到您网站的其他博文，以及 。传统上此操作是通过 .ico 文件类型完成的，但最近 浏览器允许使用 SVG，一种矢量格式。使用 渐进式 增强功能 您可以投放受支持的.ico网站图标，并升级到.svg 可用。

SVG 能够进行缩放，而无需 质量损失，并且体积可能很小， 嵌入的 CSS，甚至是嵌入式媒体查询。这意味着，如果使用 SVG 网站图标 在阅读器应用或书签栏中，用户就有可能获取到 相关（浅色或深色）图标，因为 SVG。然后，SVG 会使用其嵌入的样式进行调整，方便使用浅色和深色模式的用户 偏好设置。

浅色和深色大网站图标示例，便于区分。

<ph type="x-smartling-placeholder">
</ph> 每个浏览器中，提供浅色和深色标签页 自适应图标自上到下概览： Safari、Firefox、Chrome。 <ph type="x-smartling-placeholder">
</ph> 每个浏览器中，提供浅色和深色标签页 自适应图标自上到下概览： Safari、Firefox、Chrome。

Markup

SVG 标记是 XML： .svg文件类型扩展名，允许更多动态类型的 代码。

首先，使 favicon.svg

创建一个名为 favicon.svg 的新文件，并添加以下内容：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">

</svg>

这是我的 SVG 文件，我已调整与我的海报图片相关的 viewBox 的大小：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">

</svg>

添加形状和路径

接下来，添加 SVG 路径代码。这通常意味着要在代码编辑器中打开 SVG 代码通常不太人性化。请参阅此处的实用指南 通过从 API 导出和优化 SVG 设计工具。

本次 GUI 挑战的海报图片 一位设计师在 Adobe 的 Illustrator。I 很大 并对其进行优化。我对它运行了 SVGOMG 然后用人工修剪的底线

以下示例是来自我的“skull”艺术作品路径组（在清理后） ：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <g id="skull">
    <path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
    <path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
    <path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
  </g>
</svg>

请注意直观易懂的 ID 选择 #eyes-and-nose 和 喜欢的课程 .favicon-stroke。这些图片来自我为使用 CSS 所做的实际编辑。 您无需添加类和 ID，即可使 SVG 成为自适应网站图标。

在 HTML 的 <head> 标记中的 .ico 网站图标后面，添加以下代码：

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

由于新图标看起来可能与 .ico 版本完全相同，因此请验证其是否 。打开开发者工具的 Network 面板。按图片过滤并搜索 网站图标：

显示已搜索过滤条件的开发者工具中的“Network”窗格的屏幕截图 网站图标和突出显示的 favicon.svg 资源。

样式

与 HTML 一样，您可以将 <style> 标记添加到标记中，用于标记 文档范围：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
  </style>
  …
</svg>

浅色主题版本将是网站图标 SVG 的默认颜色。通过 我编写的样式大多为描边颜色和填充颜色：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    .favicon-stroke {
      stroke-width: 8px;
      stroke: #8929ff;
    }
    #skull-outline { fill: white }
    #eyes-and-nose, #hat-outline { fill: #8929ff }
    #hat-fill, #hat-bill { fill: #e662e6 }
  </style>
  …
</svg>

浅色主题网站图标预览示例。

接下来是最有趣的部分，那就是为网站图标的深色主题版本设置样式。通过 相应样式将导入到媒体查询的 style 标记中：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    …
    @media (prefers-color-scheme: dark) {
      /* dark theme styles */
    }
  </style>
  …
</svg>

开发者工具的屏幕截图，其中显示了覆盖 SVG 眼睛和鼻子的填充色。

我的结果是这样的：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    …
    @media (prefers-color-scheme: dark) {
      .favicon-stroke { stroke: #343a40 }
      #skull-outline { fill: #adb5bd }
      #hat-outline { fill: #343a40 }
      #eyes-and-nose { fill: #343a40 }
    }
  </style>
  …
</svg>

深色主题网站图标预览示例。

我选择将亮紫色边框换成漂亮的深灰色边框 (#343a40)， 将骷髅头颜色从白色更改为了浅冷灰色 (#adb5bd)，但是 左边是粉色强调帽。

并排预览浅色和深色网站图标。

总结

现在您已经知道我是怎么做到的了，您该怎么做 ‽ 🙂?

让我们一起采用多样化的方法，学习所有在 Web 上构建应用的方法。 创建演示，在 Twitter 微博上添加链接，然后我会添加 到下面的社区混剪部分！

社区混剪作品

  • 我是从 @tomayac 了解到这一方法的，具体代码如下： 他的 博客