如何创建 Safari 固定标签页图标
你是否曾在 Safari 中固定一个标签页，然后好奇为什么你精心设计的 favicon 会变成一个无聊的灰色字母？别担心，很多人都遇到过。这不是一个 bug，而是一项特性，它需要一种特殊类型的图标。
Safari 固定标签页图标是一个独特的单色 SVG 文件，Apple 用它来保持其用户界面的整洁和一致性。它与你的标准 favicon.ico 甚至 Apple Touch Icon（用于 iOS 主屏幕书签）完全不同。
可以把它想象成你的图标为了进入 Safari 专属的固定标签页俱乐部而必须穿上的一套特殊制服。下面教你怎么制作。
准备工作
在开始之前，你需要两样东西：
- 你的 logo 的矢量版本（SVG、AI 或 EPS 格式）。
- 能够访问你网站 HTML 的
<head>部分，以便添加一行代码。
第一步：准备你的单色 SVG
Safari 会忽略你 SVG 文件内部的所有颜色，它只关心形状。你的任务是提供一个干净、单一颜色的矢量形状，可以作为一个轮廓图。
首先，在 Figma、Sketch 或 Adobe Illustrator 等矢量编辑器中打开你的 logo。移除所有文本、渐变或多种颜色。你只需要一个单一的实心形状。如果你的 logo 很复杂，你需要简化它。一个好的固定标签页图标就像一个好的应用程序图标——能被立即识别。更多相关信息，请参阅我们关于 favicon 与 logo 区别的指南。
接下来，将形状的填充颜色设置为黑色 (#000000)。Safari 会用它自己的颜色或你指定的主题颜色覆盖这个颜色，但将其设置为黑色是一个稳妥的惯例。
最后，将文件导出为 SVG。确保你的 SVG 具有 viewBox 属性，并且没有包含不必要的元数据。（像 SVGOMG 这样的工具非常适合清理这些东西）。
第二步：添加 HTML 链接标签
现在，你需要告诉 Safari 在哪里找到你的新图标。将下面这行代码添加到你 HTML 文档的 <head> 标签内：
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">我们来分解一下：
rel="mask-icon": 这个特殊的属性将该图标标识为用于 Safari 固定标签页的图标。它不是一个标准的 favicon 链接。href="/safari-pinned-tab.svg": 指向你的 SVG 文件的路径。最佳实践是这样命名它，并将其放在你网站的根目录中。color="#5bbad5": 这是你的品牌主色。当用户悬停或点击标签页时，Safari 会用这个颜色来为图标着色。选择一个与 Safari 的深色和浅色 UI 主题有良好对比度的颜色。
看看 Stripe 的实现方式。他们使用其简洁的 logo 标志作为 SVG，并将 color 属性设置为他们标志性的紫色 (#635bff)。这是一个完美的例子，展示了这个小细节如何强化品牌形象。
第三步：上传和测试
将你新创建的 safari-pinned-tab.svg 上传到你的 Web 服务器上，路径为你在 href 属性中指定的位置。上线后，在 Safari 中打开你的网站，右键点击标签页，然后选择“固定标签页”。
你应该能看到你清晰的单色图标出现了。如果没有，别慌。缓存通常是罪魁祸首。
常见陷阱及解决方法
要把这件事做对，有时可能有点棘手。以下是开发者常遇到的一些问题。
1. 图标看起来像一团模糊的东西
这通常意味着你的 SVG 太过详细。固定标签页的图标非常小，所以复杂的线条和微小的间隙会糊成一团。回到你的矢量编辑器，简化形状。记住要大胆和简洁。
2. Safari 仍然显示旧图标（或一个字母）
Safari 在 favicon 缓存方面是出了名的“顽固”。清除浏览器缓存并不总是有用。要强制刷新，你可能需要进入 Safari > 设置 > 隐私 > 管理网站数据，找到你的网站并将其删除。这个操作有点麻烦，但这是强制 Safari 重新获取图标最可靠的方法。
3. 颜色不对
记住，Safari 会忽略 SVG 文件内部定义的任何颜色。它唯一关注的颜色是你在 <link> 标签的 color 属性中设置的那个。仔细检查那个十六进制颜色代码！
设置一个 Safari 固定标签页图标是一个微小但意义重大的细节。它表明你关心每个平台上的用户体验，并完善了一个专业的 favicon 配置。一旦你注意到这个细节，你就再也无法忽视那些忽略了它的网站。