时间戳

首页 > 解决方案 > Favicon 未在 Safari 上显示

html - Favicon 未在 Safari 上显示

问题描述

我正在使用 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 中未显示的位置：

在此处输入图像描述

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

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

到目前为止我已经尝试过：

  1. 清除我所有的 Safari 缓存（清除所有历史记录）
  2. 清空所有缓存
  3. 删除 Mac 上 Safari Favicon Cache 文件夹中的所有文件

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

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

谢谢。

标签： htmlsafari

解决方案

我想到了 -

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

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

将使 favicon 显示在 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 选项卡中显示网站图标，这两行都是必需的。

推荐阅读