GitHub Pages站点Safari 14.0.3标签栏favicon不显示问题求助

修复方案 #

代码调整 #

Safari对favicon的识别规则与Chrome有差异，仅设置当前的两行配置无法覆盖Safari标签栏的识别要求，你可以替换原有favicon相关代码为以下适配配置：

<!-- 通用基础图标，适配Chrome等大多数浏览器 -->
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon_2.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon_2.png">
<!-- Safari专属配置 -->
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon_2.png">
<link rel="mask-icon" href="/images/favicon_2.png" color="#ffffff">
<!-- 兜底配置，避免GitHub Pages路径解析异常 -->
<link rel="shortcut icon" href="/favicon.ico">

如果没有对应尺寸的图标，可以先用现有文件临时替换，Safari会自动缩放，有条件的话单独输出对应尺寸的PNG文件显示效果会更清晰。如果地球图标有透明底，可把mask-icon的color属性修改为你想要的展示色值。

缓存刷新操作 #

清理缓存后图标短暂显示又消失是Safari的预加载缓存机制导致，代码更新后配合以下操作即可生效：

• 将站点添加到Safari收藏夹，触发标签栏图标重新拉取
• 重启Safari后先使用隐私模式访问站点，确认显示正常后再切回普通模式

常见favicon相关link标签rel属性说明 #

• rel="icon"：W3C标准通用站点图标声明，所有现代浏览器都支持
• rel="apple-touch-icon"：苹果生态专属图标声明，适配iOS、macOS下Safari的主屏幕添加、收藏夹、标签栏等场景
• rel="mask-icon"：Safari专属的单色模板图标声明，用于标签栏、书签栏的适配显示
• rel="shortcut icon"：兼容旧版浏览器的历史遗留声明，现在多数浏览器也会将其作为兜底识别项

内容的提问来源于stack exchange，提问作者user12035742