Github Pages中Favicon无法显示的问题排查求助

问题情况 #

• 本地通过npm start或live server运行时，Favicon显示正常
• 部署到Github Pages（站点：https://danielleleslie.github.io/portfolio/）后，Favicon无法加载
• 已尝试以下几种link标签写法，且更新了build目录下的index.html，问题仍未解决：

  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?" />
  <link rel="shortcut icon" type="image/x-icon" href="/portfolio/favicon.ico" />
  <link rel="shortcut icon" type="image/x-icon" href="/portfolio/favicon.ico?" />
  

解决步骤 #

1. 确认文件位置
   把favicon.ico放在项目根目录（React项目请放在public目录），确保构建后文件被正确复制到build目录的根路径下。

2. 适配子路径部署
   如果是React项目，在package.json中添加"homepage": "https://danielleleslie.github.io/portfolio/"，重新构建后，项目会自动处理所有静态资源路径，包括Favicon。
   也可以手动修改link标签，使用相对路径：

   <link rel="icon" type="image/x-icon" href="./favicon.ico" />
   

   建议用rel="icon"替代旧写法rel="shortcut icon"，适配现代浏览器标准。

3. 强制清除缓存
   部署后按Ctrl+F5强制刷新页面，或者给href添加版本参数，强制浏览器加载新资源：

   <link rel="icon" type="image/x-icon" href="./favicon.ico?v=2" />
   

4. 检查部署配置
   确认Github Pages的部署源是build目录对应的分支或文件夹，确保部署的是最新构建的文件。

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