node.js 如何在 Express 中设置自定义网站图标？

How to set custom favicon in Express?

提问by Ilya Karnaukhov

I recently started working in Node.js and in the app.js file there is this line:

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

app.use(express.favicon());

Now, how do I set up my own custom favicon.ico?

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

回答by Benjamin Gruenbaum

In Express 4

在快递 4

Install the favicon middlewareand then do:

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

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

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

Or better, using the pathmodule:

或者更好的是，使用path模块：

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

(note that this solution will work in express 3 apps as well)

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

In Express 3

在快递 3

According to the API, .faviconaccepts a location parameter:

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

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

Most of the time, you might want this (as vsync suggested):

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

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

Or better yet, use the pathmodule (as Druska suggested):

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

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

Why faviconis better than static

为什么favicon比静态更好

According to the package description:

根据包装说明：

1. This module caches the icon in memory to improve performance by skipping disk access.
2. This module provides an ETagbased on the contents of the icon, rather than file system properties.
3. This module will serve with the most compatible Content-Type.

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

回答by Eduardo

No extra middlewares required. Just use:

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

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

回答by Shimon Doodkin

smiley favicon to prevent error:

防止错误的笑脸图标：

 //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);
 });

to change icon in code above

更改上面代码中的图标

make an icon maybe here: http://www.favicon.cc/or here :http://favicon-generator.org

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

convert it to base64 maybe here: http://base64converter.com/

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

then replace the icon base 64 value

然后替换图标基 64 值

general information how to create a personalized fav icon

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

icons are made using photoshop or inkscape, maybe inkscape then photoshop for vibrance and color correction (in image->adjustments menu).

图标是使用 photoshop 或inkscape 制作的，也许inkscape 然后是photoshop 用于鲜艳度和色彩校正（在图像-> 调整菜单中）。

for quick icon goto http://www.clker.com/and pick some Vector Clip Arts, and download as svg. then bring it to inkscape (https://inkscape.org/) and change colors or delete parts, maybe add something from another vector clipart image, then to export select the parts to export and click file>export, pick size like 16x16 for favicon or 32x32. for further edit 128x128 or 256x256. ico package can have several icon sizes inside. it can have along with 16x16 pixel favicon a high quality icons for link for the website.

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

then maybe enhance the image in photoshop. like vibrance, bevel effect, round mask, anything.

然后也许可以在 Photoshop 中增强图像。像活力，斜角效果，圆形面具，任何东西。

then upload this image to one of the websites that generate favicons. there are also programs for windows for editing icons like https://sourceforge.net/projects/variicons/.

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

to add the favicon to website. just put the favicon.ico as a file in the root folder of the domain. for example in node.js in public folder that contains the static files. it doesn't have to be anything special like code above just a simple file.

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

回答by DaafVader

No need for custom middleware?! In express:

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

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

Then put your favicon in public and add the following line in your html's head:

然后将您的网站图标公开并在您的 html 的头部添加以下行：

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

回答by ThomasReggi

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

I had it working locally without the __dirname +but couldn't get it working on my deployed server.

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

回答by Anastasios Andronidis

If you are using Express > 4.0, you could go for serve-favicon

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

回答by Mohsin Khan

If you have you static path set, then just use the <link rel="icon" href="/images/favicon.ico" type="image/x-icon">in your views. No need for anything else. Please make sure that you have your images folder inside the public folder.

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

回答by Nikolas H

In app.js:

在 app.js 中：

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

Assuming the icon resides in "/public/images/favicon.ico" add next link in html's head:

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

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

This worked fine in a project auto-generated with the command:

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

express my-project

回答by elig

Install express-faviconmiddleware:

安装express-favicon中间件：

npm install express-favicon --save

Use it like this:

像这样使用它：

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

回答by amunnelly

You must install middleware to serve the favicon.

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

I tried this just now:

我刚才试过这个：

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

and got this error message back:

并收到此错误消息：

Error: Most middleware (like favicon) is no longer bundled with Express and must be installed separately. Please see https://github.com/senchalabs/connect#middleware.

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

I think we can take that as being definitive.

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