Safari 上不显示 Favicon
Favicon not displaying on Safari
我正在使用 GitHub 页面构建网站，但在使网站图标正确显示时遇到了一些麻烦。我的理解是，由于兼容性问题，您需要添加各种自定义代码以确保您的网站图标在不同浏览器中正确显示。
我目前正在使用 Safari 14.0.3 和 Google Chrome 来测试它。
我包含了以下 HTML 代码来显示我的网站图标：
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon_2.png">
<link rel="icon" href="/images/favicon_2.png">
唯一的问题是它没有显示在 Safari 的标签栏上。它正确显示在 Google Chrome 和 Safari 顶部的搜索栏中，但不显示在标签栏中。我已包含以下图片以供参考：
在 Safari 中正确显示的位置：
在 Safari 中没有显示的地方：
注意：我正在尝试显示 globe 图标。
我读过一些类似的问题，其中提到了清除缓存等，但其中 none 似乎有效。
到目前为止我尝试过的：
- Clearing all my Safari Cache（清除所有历史记录）
- 正在清空所有缓存
- 正在删除我 Mac
上 Safari Favicon Cache 文件夹中的所有文件
当我做了两个，然后最初启动 Safari 时，正确的图标在切换回另一个之前短暂地显示在标签栏中。
我有点不确定在这里做什么。有人有什么想法吗？我需要添加额外的代码吗？任何示例或资源的任何链接将不胜感激。另外，作为旁注，是否有任何指向文档的链接，我可以在其中进一步阅读所有不同的 rel="" 在这里做什么？
谢谢。
首先，检查您的网站上是否没有任何其他网页正在设置网站图标。如果没有，那只是一个小的 safari 错误。
我遇到过类似的问题，即使更改了代码，safari 似乎也会长时间保留网站图标。不幸的是，您可能只需要等待。
你可以尝试使用这个工具：
https://realfavicongenerator.net/
对我有用
我想通了 -
要使网站图标在 Safari 上正确显示，需要两行不同的 HTML 代码。换行：
<link rel="icon" href="/images/favicon.ico?v=M44lzPylqQ">
将使网站图标显示在 Safari 和 Google Chrome 的顶部搜索栏中。
Safari 选项卡上显示的 favicon 的管理方式不同。 这需要使用 HTML 代码用于 Safari 固定选项卡的 Apple 掩码图标。因此，这需要编辑以下代码：
<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ"
color="#000000">
编辑此行将使网站图标显示在 Safari 选项卡上。
注意：为了使网站图标显示在 Safari 搜索栏和 Safari 选项卡中，这两行都是必需的。
我正在使用 GitHub 页面构建网站，但在使网站图标正确显示时遇到了一些麻烦。我的理解是，由于兼容性问题，您需要添加各种自定义代码以确保您的网站图标在不同浏览器中正确显示。
我目前正在使用 Safari 14.0.3 和 Google Chrome 来测试它。
我包含了以下 HTML 代码来显示我的网站图标：
<link rel="apple-touch-icon" sizes="60x60" href="/images/favicon_2.png">
<link rel="icon" href="/images/favicon_2.png">
唯一的问题是它没有显示在 Safari 的标签栏上。它正确显示在 Google Chrome 和 Safari 顶部的搜索栏中，但不显示在标签栏中。我已包含以下图片以供参考：
在 Safari 中正确显示的位置：
在 Safari 中没有显示的地方：
注意：我正在尝试显示 globe 图标。
我读过一些类似的问题，其中提到了清除缓存等，但其中 none 似乎有效。
到目前为止我尝试过的：
- Clearing all my Safari Cache（清除所有历史记录）
- 正在清空所有缓存
- 正在删除我 Mac 上 Safari Favicon Cache 文件夹中的所有文件
当我做了两个，然后最初启动 Safari 时，正确的图标在切换回另一个之前短暂地显示在标签栏中。
我有点不确定在这里做什么。有人有什么想法吗？我需要添加额外的代码吗？任何示例或资源的任何链接将不胜感激。另外，作为旁注，是否有任何指向文档的链接，我可以在其中进一步阅读所有不同的 rel="" 在这里做什么？
谢谢。
首先，检查您的网站上是否没有任何其他网页正在设置网站图标。如果没有，那只是一个小的 safari 错误。
我遇到过类似的问题，即使更改了代码，safari 似乎也会长时间保留网站图标。不幸的是，您可能只需要等待。
你可以尝试使用这个工具： https://realfavicongenerator.net/
对我有用
我想通了 -
要使网站图标在 Safari 上正确显示，需要两行不同的 HTML 代码。换行：
<link rel="icon" href="/images/favicon.ico?v=M44lzPylqQ">
将使网站图标显示在 Safari 和 Google Chrome 的顶部搜索栏中。
Safari 选项卡上显示的 favicon 的管理方式不同。 这需要使用 HTML 代码用于 Safari 固定选项卡的 Apple 掩码图标。因此，这需要编辑以下代码：
<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ"
color="#000000">
编辑此行将使网站图标显示在 Safari 选项卡上。
注意：为了使网站图标显示在 Safari 搜索栏和 Safari 选项卡中，这两行都是必需的。