如何为返回Content-Type:application/json的Node.js API添加网站图标

浏览器访问任何网页或API时，都会自动请求根路径下的/favicon.ico文件作为网站图标。要给你的JSON API加上图标，只需要处理这个请求，返回对应的图标文件即可，以下是两种常见实现方式：

1. 直接编写路由处理favicon请求 #

如果用Express框架，直接添加一个/favicon.ico的GET路由，读取本地图标文件并返回：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 你的原有API路由
app.get('/api', (req, res) => {
    let data = {"data": [1, 2, 3]};
    res.status(200).json(data);
});

// 处理网站图标请求
app.get('/favicon.ico', (req, res) => {
    // 替换成你本地favicon.ico的实际路径
    const faviconPath = path.join(__dirname, 'favicon.ico');
    fs.readFile(faviconPath, (err, iconData) => {
        if (err) {
            res.status(404).end();
            return;
        }
        res.setHeader('Content-Type', 'image/x-icon');
        res.send(iconData);
    });
});

app.listen(3000);

2. 用静态文件托管自动处理 #

如果项目里有静态资源目录（比如public），把favicon.ico放在这个目录下，用express.static托管静态文件，浏览器请求/favicon.ico时会自动匹配到该文件：

const express = require('express');
const path = require('path');
const app = express();

// 托管public目录下的所有静态文件
app.use(express.static(path.join(__dirname, 'public')));

// 你的原有API路由
app.get('/api', (req, res) => {
    let data = {"data": [1, 2, 3]};
    res.status(200).json(data);
});

app.listen(3000);

只需要把favicon.ico放在项目根目录的public文件夹里就行。

额外提示 #

• 确保favicon.ico是标准格式，推荐用16x16或32x32像素的ICO文件
• 浏览器会缓存图标，测试时可以用隐私模式打开或者清除浏览器缓存
• 不管你的API返回什么内容，只要/favicon.ico路由能正常返回图标文件，浏览器就能显示它

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