hexo 的 Next 主题在 MacOS 下 Safari 浏览器一直不显示标签 logo 的问题

发表于 2022-03-16 分类于建站

发现博客的favicon图标一直不能在safari 的标签栏上显示，只能显示在地址栏，经过一番研究后发现是Hexo 的 Next主题的设置不正确造成的

favicon:
  small: /favicon-16x16.png
  medium: /favicon-32x32.png
  apple_touch_icon: /apple-touch-icon.png

  # 不能把 safari_pinned_tab 注释掉，只能留空，表示不启用,
  # 注释掉会默认使用 next 主题中的设置.

  # 注意: <link rel="mask-icon" href="logo.svg"> 会覆盖
  # <link rel="icon" href="favicon.png"> 导致safari favicon图标被替换为logo.svg
  safari_pinned_tab:

small与medium会生成两个与favicon相关的设置，用来在地址栏与标签栏显示网站图标

1 2	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

safari_pinned_tab会生成<link rel="mask-icon" href="logo.svg">，它会覆盖标签栏上的favicon图标，由于在设置这个属性的时候，错误的使用了非svg文件(用的是png)导致了图标不能正确显示。

解决方法

设置正确的svg文件，或者就不设置<link rel="mask-icon">属性，只使用<link rel="icon" >设置favicon图标即可。如果不设置<link rel="mask-icon">属性，需要在配置文件中把safari_pinned_tab的值留空，而不是不设置或注释掉，这样做会使用next 主题中的默认设置，造成favicon图标显示为Next官网的图标

1、themes/next/layout/_partials/head.swig

此文件内的

1	<link rel="mask-icon" href="{{ url_for(theme.favicon.safari_pinned_tab) }}?v={{ theme.version }}" color="{{ theme.android_chrome_color }}">

替换为

1	<link rel="icon" >

2、/themes/next/_config.yml

此文件内的safari_pinned_tab: 设置为空

（之前的设置：#safari_pinned_tab: /images/logo_old.svg）

关于`safari`缓存图标的问题

safari会对图标按域名进行缓存，从而造成更新图标后不能马上更新显示的问题，需要对缓存的图标进行清理。

首先要清理它的缓存：setting->privacy->Manage Website Date，搜索相关域名，删除即可。
磁盘缓存文件：~/Library/Safari目录下，删除Template Icons文件夹，如果不起作用，删除Favicon Cache，Touch Icons Cache文件夹

参考链接：safari 网站图标 favicon 不显示 | 睡月花儿 (gagahappy.com)

解决方法

关于safari缓存图标的问题

关于`safari`缓存图标的问题