Express JS Favicon 设置：分步实战指南

如果你的 Express 应用显示空白标签页图标，相关文件可能已经存在，只是没有对外提供，或没有在页面 head 中引用。这份 Express JS favicon 指南使用 static middleware 和标准 HTML 链接完成设置。

准备工作

准备一个正方形品牌标志。Mzu favicondl 可以生成 SVG、ICO fallback，以及可选的 Apple touch PNG。

你还需要：

• 一个正在运行的 Express 应用。
• 共用 HTML 布局文件或 public/index.html 的访问权限。
• 启动应用的命令，例如 npm start。

设置 Express JS favicon

1. 创建 public 目录

   把面向浏览器的静态资源放在项目根目录的 public 中：

   my-app/
   ├─ public/
   │  ├─ favicon.svg
   │  ├─ favicon.ico
   │  ├─ apple-touch-icon.png
   │  └─ index.html
   └─ app.js

   文件名必须完全一致，因为 Linux 服务器会区分大写和小写字符。

2. 提供 public 目录中的静态文件

   在应用 route 和用于兜底的 404 handler 之前注册 static middleware：

   const express = require('express');
   const path = require('path');
   
   const app = express();
   
   app.use(express.static(path.join(__dirname, 'public')));
   
   app.listen(3000, () => {
     console.log('Listening on http://localhost:3000');
   });

   现在，Express 会将 public/favicon.svg 映射到 /favicon.svg，并可通过 / 提供 public/index.html。如果把某个 route 放在 static middleware 之前，它可能会抢先响应图标请求。

3. 在 HTML head 中链接图标

   在共用布局文件中添加明确的链接，让每个 route 都能获得这些图标：

   <head>
     <link rel='icon' href='/favicon.svg' type='image/svg+xml'>
     <link rel='icon' href='/favicon.ico' sizes='16x16 32x32 48x48'>
     <link rel='apple-touch-icon' href='/apple-touch-icon.png'>
   </head>

   HTML Standard 将 rel='icon' 定义为指向外部资源的链接，因此这些标签会为浏览器提供明确的图标 URL。

4. 检查文件和渲染后的 HTML

   重启服务器，然后分别请求这两个文件：

   curl -I http://localhost:3000/favicon.svg
   curl -I http://localhost:3000/favicon.ico

   两次请求都应返回 HTTP 200。确认页面源代码中包含相同的路径；如果文件能够正常响应，但标签页仍然显示异常，请使用 favicon 故障排查清单。

5. 安全发布图标更新

   图标变更后，将 HTML 中的 URL 更新为 href='/favicon.svg?v=2'，并在每次部署时递增版本号。也可以在文件名中加入 hash，从而避免复用旧 URL；cache-busting 指南 对这些方案之间的取舍有详细说明。

Express 常见问题

• 目录放错：除非 express.static 指向 src，否则其中的文件不会作为公开静态资源提供。
• 顺序错误：在 express.static 之前注册 catch-all 路由，可能会拦截图标请求。
• 只处理一个页面：应将 link 放在 EJS、Pug 或 HTML 的 layout 中，而不是只放在某个 route 对应的页面里。
• 子路径部署：根相对路径 /favicon.svg 在应用挂载于某个前缀下时可能无法找到；应根据 public base path 生成 URL。

总结

确保资源路径、静态中间件以及 HTML layout 中共用的 link 保持一致。这样无需专门的图标 controller，每个 Express route 都会使用同一个 favicon。