如何修改Bootstrap Agency主题中的网站图标（favicon）

我之前也碰到过一模一样的情况！Bootstrap的Agency主题自带的GitHub favicon，大概率是通过主题核心文件加载的，而且加载顺序可能比你手动添加的自定义图标要晚，所以才会覆盖掉你的设置。下面是我亲测有效的解决步骤：

• 定位并删除默认favicon的代码
  先去主题的核心文件里找默认图标的加载代码：

  • 如果是静态HTML版本，检查根目录的index.html或者header.html，找类似 <link rel="icon" href="...github..."> 的代码，直接删掉这一行就行。
  • 如果是WordPress版本的Agency主题，打开header.php文件，同样搜索favicon关键词定位到默认图标代码并删除。
  • 要是用包管理器（npm/yarn）管理的主题，去assets文件夹下的配置文件或入口脚本里搜favicon，找到引入的地方移除。

• 调整自定义favicon的加载顺序
  把你的自定义favicon代码放到<head>标签的最底部，让浏览器最后加载它，这样就能覆盖之前的图标了。推荐同时添加多尺寸图标适配不同设备，代码示例：

  <link rel="icon" type="image/x-icon" href="/path/to/your-custom-favicon.ico">
  <link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png">
  

• 强制清除浏览器缓存
  浏览器经常会缓存旧的favicon，哪怕你改了代码也可能看不到变化。按Ctrl+Shift+R（Windows/Linux）或者Cmd+Shift+R（Mac）强制刷新页面，或者直接清空浏览器的缓存文件。

• 检查自定义图标的路径是否正确
  确认你的favicon文件路径没有写错，比如放在根目录images文件夹里的话，路径应该是/images/your-favicon.ico，别用相对路径导致浏览器找不到文件。

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