javascript - 如何在 Express 中设置自定义图标？

Question

我最近开始在 Node.js 中工作，在 app.js 文件中有这一行：

app.use(express.favicon());

现在，如何设置我自己的自定义 favicon.ico？

score 262 · Accepted Answer

在快递 4

安装favicon 中间件，然后执行：

var favicon = require('serve-favicon');

app.use(favicon(__dirname + '/public/images/favicon.ico'));

或者更好，使用path模块：

app.use(favicon(path.join(__dirname,'public','images','favicon.ico')));

（请注意，此解决方案也适用于 express 3 应用程序）

在快递 3

根据 API，.favicon接受一个位置参数：

app.use(express.favicon("public/images/favicon.ico"));

大多数时候，你可能想要这个（正如 vsync 建议的那样）：

app.use(express.favicon(__dirname + '/public/images/favicon.ico'));

或者更好的是，使用该path模块（如 Druska 建议的那样）：

app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico')));

为什么favicon比静态更好

根据包装说明：

此模块将图标缓存在内存中，以通过跳过磁盘访问来提高性能。
这个模块提供了一个ETag基于图标的内容，而不是文件系统的属性。
该模块将与最兼容的Content-Type.

score 56 · Accepted Answer

不需要额外的中间件。只需使用：

app.use('/favicon.ico', express.static('images/favicon.ico'));

score 27 · Accepted Answer

不需要自定义中间件？！快递：

 //you probably have something like this already    
app.use("/public", express.static('public'));

然后将您的 favicon 公开并在您的 html 头部添加以下行：

<link rel="icon" href="/public/favicon.ico">

score 20 · Accepted Answer

笑脸图标以防止错误：

 //const fs = require('fs'); 
 //const favicon = fs.readFileSync(__dirname+'/public/favicon.ico'); // read file
 const favicon = new Buffer.from('AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA/4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAAAAAEAAAEAAAAAEAAAABAAAAEAAAAAAQAAAQAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAEAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AAD8HwAA++8AAPf3AADv+wAA7/sAAP//AAD//wAA+98AAP//AAD//wAA//8AAP//AAD//wAA', 'base64'); 
 app.get("/favicon.ico", function(req, res) {
  res.statusCode = 200;
  res.setHeader('Content-Length', favicon.length);
  res.setHeader('Content-Type', 'image/x-icon');
  res.setHeader("Cache-Control", "public, max-age=2592000");                // expiers after a month
  res.setHeader("Expires", new Date(Date.now() + 2592000000).toUTCString());
  res.end(favicon);
 });

更改上面代码中的图标

可以在这里制作一个图标：http: //www.favicon.cc/或在这里： http: //favicon-generator.org

将其转换为 base64 可能在这里：http ://base64converter.com/

然后替换图标 base 64 值

一般信息如何创建个性化的收藏图标

图标是使用 Photoshop 或 inkscape 制作的，可能是 inkscape，然后是 photoshop 以进行鲜艳度和色彩校正（在图像->调整菜单中）。

快速图标转到http://www.clker.com/并选择一些矢量剪贴画，然后下载为 svg。然后将其带到inkscape（https://inkscape.org/）并更改颜色或删除部分，也许从另一个矢量剪贴画图像中添加一些东西，然后导出选择要导出的部分并单击文件>导出，选择像16x16这样的大小图标或 32x32。进一步编辑 128x128 或 256x256。ico 包内部可以有多种图标大小。它可以与 16x16 像素的 favicon 一起为网站链接提供高质量的图标。

然后也许可以增强 Photoshop 中的图像。像振动，斜面效果，圆形面具，任何东西。

然后将此图像上传到生成网站图标的网站之一。还有一些用于编辑图标的 Windows 程序，例如https://sourceforge.net/projects/variicons/。

将网站图标添加到网站。只需将 favicon.ico 作为文件放在域的根文件夹中即可。例如在包含静态文件的公用文件夹中的 node.js 中。它不必像上面的代码那样特殊，只是一个简单的文件。

score 8 · Accepted Answer

app.use(express.favicon(__dirname + '/public/images/favicon.ico'));

我让它在本地工作，__dirname +但无法在我部署的服务器上工作。

score 4 · Accepted Answer

4

如果您使用 Express > 4.0，则可以使用serve-favicon

于 2014-05-27T16:06:39.467 回答

score 4 · Accepted Answer

如果您设置了静态路径，那么只需<link rel="icon" href="/images/favicon.ico" type="image/x-icon">在您的视图中使用。不需要其他任何东西。请确保您的图像文件夹位于公共文件夹中。

score 2 · Accepted Answer

如果您想要一个不涉及外部文件且不使用的解决方案express.static（例如，超轻的单文件网络服务器和站点），您可以使用serve-favicon并将您的文件编码favicon.ico为 Base64。像这样：

const favicon = require('serve-favicon');
const imgBuffer = new Buffer.from('IMAGE_AS_BASE64_STRING_GOES_HERE', 'base64');
// assuming app is already defined
app.use(favicon(imgBuffer));

替换IMAGE_AS_BASE64_STRING_GOES_HERE为将 favicon 文件编码为 Base64 的结果。有很多网站可以在线进行，请搜索。

请注意，您可能需要重新启动服务器和/或浏览器才能看到它在运行localhost，并且硬刷新/清除浏览器缓存才能看到它在网络上运行。

score 1 · Accepted Answer

在 app.js 中：

app.use(express.static(path.join(__dirname, 'public')));

假设图标位于“/public/images/favicon.ico”中，在 html 的头部添加下一个链接：

<link rel='icon' href='/images/favicon.ico' class='js-favicon'>

这在使用以下命令自动生成的项目中运行良好：

express my-project

score 1 · Accepted Answer

安装express-favicon中间件：

npm install express-favicon --save

像这样使用它：

const favicon = require('express-favicon');
app.use(favicon(__dirname + 'favicon.ico'));

score 1 · Accepted Answer

您必须安装中间件才能为网站图标提供服务。

我刚才试过这个：

app.use(express.favicon(path.join(__dirname, 'public','images','favicon.ico')));

并收到此错误消息：

错误：大多数中间件（如 favicon）不再与 Express 捆绑在一起，必须单独安装。请参阅 https://github.com/senchalabs/connect#middleware。

我认为我们可以认为这是确定的。

score 0 · Accepted Answer

下面列出的代码有效：

var favicon = require('serve-favicon');

app.use(favicon(__dirname + '/public/images/favicon.ico'));

只需确保刷新浏览器或清除缓存即可。

score 0 · Accepted Answer

第 0 步：将以下代码添加到 app.js 或 index.js

app.use("/favicon.ico", express.static('public/favicon.ico'));

第 1 步：从此处下载图标https://icons8.com/或创建您自己的
第 2 步：转到https://www.favicongenerator.com/
第 3 步: 上传下载的 icon.png 文件 > 设置 16px > 创建 favicon > 下载
步骤 4: 进入下载文件夹, 你会找到 [.ico 文件], 将其重命名为 favicon.ico
步骤 5: 将 favicon.ico 复制到公共目录您创建了
第 6 步：将以下代码添加到您的 .pug 文件中的 head 标签下，在 title 标签下

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

第 7 步：保存 > 重新启动服务器 > 关闭浏览器 > 重新打开浏览器 > 出现 favicon

注意：您可以使用 favicon 以外
的名称，但请确保在代码和公共文件夹中更改名称。

score 0 · Accepted Answer

如果您使用 Express.static 来提供文件夹，只需将 favicon.ico 文件放在该文件夹的根目录中，当浏览器请求它时就会提供该文件。无需在link您的 html 中添加标签或在应用程序代码中添加特殊的中间件路由。

如果您使用反向代理，您可能需要为文件指定媒体/mime 类型（这是 IIS 中的方法），但如果您直接导航到您的应用程序，它“正常工作”。

score 0 · Accepted Answer

如果以上都不起作用，你可以试试这个！
确保您的 favicon.ico 文件位于public/icons或相应更改。
如果未导入路径，

const path = require('path') ;

然后，

app.get("/favicon.ico", (req, res) => {
  return res.sendFile(path.join(__dirname + "/public/icons/favicon.ico"));
});

javascript - 如何在 Express 中设置自定义图标？

15 回答 15

在快递 4

在快递 3

为什么favicon比静态更好

Related

Reference