首次启动浏览器打开Node.js Express应用时Favicon报404，新标签页正常

嘿，这个问题我之前帮好几个开发者排查过，大概率是浏览器首次启动时的请求特性或者你的serve-favicon配置细节没处理到位，咱们一步步来搞定它：

1. 先确认serve-favicon的路径配置是否正确 #

很多时候问题出在相对路径不靠谱上。首次启动浏览器时，应用的工作目录可能和你开发时的预期不一样，导致相对路径找不到favicon文件。一定要用绝对路径来指定文件位置，比如借助__dirname和path模块：

const path = require('path');
const favicon = require('serve-favicon');

// 这里要确保你的favicon.ico确实在public目录下
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

2. 检查中间件的执行顺序 #

Express是按中间件的注册顺序来处理请求的，serve-favicon必须放在静态文件中间件、业务路由之前。如果后面的路由先匹配了/favicon.ico的请求，就会直接返回404。正确的顺序应该是这样：

// 第一步：处理favicon请求
app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
// 第二步：处理静态资源
app.use(express.static(path.join(__dirname, 'public')));
// 第三步：处理业务路由
app.use('/api', yourApiRouter);

3. 处理浏览器的默认favicon请求 #

有些浏览器首次启动时，会默认发起GET /favicon.ico请求，不管你HTML页面里有没有指定link标签。这时候要确保两点：

• 你的HTML页面里明确指定favicon的路径：

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

• serve-favicon确实在处理这个路径的请求，或者把favicon文件放在静态目录里，让express.static自动处理。

4. 排查缓存和文件本身的问题 #

• 先清除浏览器缓存，然后用新标签页访问试试，如果新标签页也出现404，那肯定是配置或文件路径的问题；如果只有首次启动出现，可能是浏览器首次请求的缓存机制差异。
• 直接访问http://localhost:3000/favicon.ico（替换成你的应用地址），看看能不能正常打开这个图标文件。如果打不开，说明文件不存在或者路径错误，赶紧检查文件位置和文件名拼写（注意是.ico格式，有些浏览器对格式要求很严格）。

按照这几步排查下来，基本能解决这个首次启动404的问题啦！

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