safari 网站图标 favicon 不显示

favicon图标不显示

发现博客的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相关的设置，用来在地址栏与标签栏显示网站图标

<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官网的图标

关于safari缓存图标的问题

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

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