项目运行时浏览器报favicon.ico 404错误，但项目中无该文件

嘿，这个问题我碰过好多次啦！其实原因特别简单：浏览器会默认自动向网站根目录发起favicon.ico的请求，用来显示浏览器标签页上的小图标——哪怕你完全没在项目代码里主动引用过它，它也会悄悄做这件事，这就是为啥你全局搜索项目找不到相关文件，却还是会弹出404错误的原因。

下面给你几个实用的解决办法，按需选择就行：

• 直接添加favicon图标（最推荐）
  找一个16x16或32x32像素的图标文件（可以用在线工具把普通图片转成.ico格式），放到项目的根目录（和index.html同级的位置），浏览器下次请求时就能找到它，404自然就消失了。
  如果你想自定义图标路径或者用PNG等其他格式，还可以在index.html的<head>标签里手动添加引用：

  <link rel="icon" type="image/png" href="/assets/icons/my-icon.png">
  

  把href替换成你实际的图标路径，type对应图标文件的MIME类型即可。

• 阻止浏览器的自动请求
  如果你确实不需要网站图标，可以在服务器端拦截这个请求，返回204（无内容）状态码，这样浏览器就不会抛出404错误了。举个Node.js Express的例子：

  app.get('/favicon.ico', (req, res) => {
    res.status(204).end();
  });
  

  其他服务器（比如Nginx、Apache）也可以通过配置规则实现类似效果，返回空响应或者204状态。

• 框架项目的专属处理
  如果你用的是React、Vue这类框架的脚手架生成项目，通常框架已经预留了favicon的位置：

  • Vue项目：把图标放到public目录下，框架会自动处理引用；
  • React项目：同样放到public目录，index.html里默认已经有<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />的引用，替换成你的图标就行。

内容的提问来源于stack exchange，提问作者sof-03