如何解决Visual Studio Code中使用Live Server运行JavaScript项目时终端出现favicon.ico 404请求的问题

数据老陈

2026-4-30

解决Live Server终端频繁出现favicon.ico 404请求的问题

嘿，这个问题我之前开发时也碰到过，确实有点闹心——浏览器会默认自动请求网站根目录的favicon.ico，而Live Server会把所有请求日志打出来，没配置图标的话就一直刷404。给你几个实用的解决思路：

直接添加一个favicon.ico文件（最省心的方案）
其实不用特意做复杂的图标，哪怕找个16x16像素的空白图片，命名为favicon.ico放到你的项目根目录（就是Live Server启动的那个文件夹）就行。这样浏览器请求时能拿到文件，终端里就不会再出现404的报错日志了。如果想弄个正经图标，随便用个在线favicon生成工具做一个也很方便。
修改Live Server的日志级别或添加中间件拦截请求
如果你不想加图标，可以通过配置让Live Server不显示这个请求的日志，或者直接拦截它：
1. 降低日志输出级别：打开VSCode设置（快捷键Ctrl+,或Cmd+,），搜索Live Server: Log Level，把默认的info改成warn或者error。这样只有警告和错误级别的日志会显示，普通的GET请求（包括favicon的请求）就不会出现在终端里了。
2. 用中间件拦截请求：如果想彻底解决404的问题，可以在VSCode的settings.json里添加自定义中间件，让Live Server对/favicon.ico请求返回204无内容状态码：
```
"liveServer.settings.middleware": [
  {
    "route": "/favicon.ico",
    "handle": (req, res) => {
      res.writeHead(204, {'Content-Type': 'image/x-icon'});
      res.end();
    }
  }
]
```
  这样浏览器发起请求时不会得到404，终端里也不会有错误日志。
浏览器端禁用favicon请求（不推荐）
有些浏览器可以通过插件或隐藏设置禁用favicon请求，但这个方法只对自己的浏览器生效，换设备或浏览器就失效了，不如前两个方案通用，所以不太推荐。