Favicon 未在 Safari 上显示答案

【问题标题】：Favicon not displaying on SafariFavicon 未在 Safari 上显示
【发布时间】：2021-10-23 09:46:46
【问题描述】：

我正在使用 GitHub Pages 构建网站，但在正确显示网站图标时遇到了一些麻烦。我的理解是，由于兼容性问题，您需要添加各种自定义代码，以确保您的网站图标在不同的浏览器中正确显示。

我目前正在使用 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 中没有显示的地方：

注意：我正在尝试显示地球图标。

我已经阅读了一些关于清除缓存等的类似问题，但这些似乎都没有奏效。

到目前为止我所尝试的：

当我做了两个，然后最初启动 Safari 时，正确的图标在切换回另一个之前短暂显示在标签栏中。

我有点不确定在这里做什么。有没有人有任何想法？我需要添加额外的代码吗？任何示例或资源的链接将不胜感激。另外，作为旁注，是否有任何指向文档的链接，我可以在其中进一步了解所有不同的 rel="" 在这里做什么？

谢谢。

【问题讨论】：

标签： html safari

【解决方案1】：

我想通了-

要在 Safari 上正确显示网站图标，需要两行不同的 HTML 代码。换行：

<link rel="icon" href="/images/favicon.ico?v=M44lzPylqQ">

将使网站图标显示在 Safari 和 Google Chrome 的顶部搜索栏中。

Safari 选项卡上显示的网站图标的管理方式不同。 这需要为 Safari 固定选项卡的 Apple 掩码图标使用 HTML 代码。因此，这需要编辑以下代码：

<link rel="mask-icon" href="{{ base_path }}/images/safari-pinned-tab.svg?v=M44lzPylqQ" 
 color="#000000">

编辑此行将允许在 Safari 选项卡上显示网站图标。

注意：要在 Safari 搜索栏和 Safari 选项卡中显示网站图标，这两行都是必需的。

【讨论】：

【解决方案2】：

您可以尝试使用此工具： https://realfavicongenerator.net/

它对我有用

【讨论】：

【解决方案3】：

首先，检查您的网站上没有任何其他网页正在设置网站图标。如果没有，那只是一个小 Safari 错误。

我遇到过类似的问题，即使更改了代码，safari 似乎也会长时间保留网站图标。不幸的是，您可能只需要等待。

【讨论】：