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

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

app.use(express.favicon());

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

在Express 4中

安装收藏夹中间件，然后执行以下操作：

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应用中使用）

在Express 3中

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

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比静态更好

根据包装说明：

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

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

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

笑脸图标，以防止错误：

 //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/

然后替换图标库的64值

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

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

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

然后在Photoshop中增强图像。像是充满活力，斜角效果，圆形面具等等。

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

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

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

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

然后将您的收藏夹图标公开，并在html的头部添加以下行：

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

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

我在没有它的情况下在本地工作，__dirname +但是无法在已部署的服务器上工作。

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

如果您设置了静态路径，则只需<link rel="icon" href="https://stackoverflow.com/images/favicon.ico" type="image/x-icon">在视图中使用即可。不需要其他了。请确保您的图像文件夹位于公用文件夹内。

安装express-favicon中间件：

npm install express-favicon --save

像这样使用它：

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

您必须安装中间件才能提供该图标。

我刚才尝试了这个：

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

并得到此错误消息：

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

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

下面列出的代码有效：

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

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

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

步骤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：保存>重新启动服务器>关闭浏览器>重新打开浏览器>出现图标图标

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

在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

如果您想要一个不涉及外部文件且不使用的解决方案express.static（例如，一个超轻量文件Web服务器和站点），则可以使用文件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，并且需要刷新/清除浏览器缓存才能使其在网络上正常运行。