blocks|key|355889|text|不需要额外的中间件。只需使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|355890|app.use('/favicon.ico',+express.static('images/favicon.ico'));|code-block|syntax|javascript|355891|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

No extra middlewares required. Just use:

<pre><code>app.use('/favicon.ico', express.static('images/favicon.ico'));
</code></pre>

blocks|key|355930|text|不需要定制中间件？！在express中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|355931|+//you+probably+have+something+like+this+already++++
app.use("/public",+express.static('public'));+|code-block|syntax|javascript|355932|然后将您的收藏图标放在公共位置，并在您的html标题中添加以下行：|355933|<link+rel="icon"+href="/public/favicon.ico">|355934|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

No need for custom middleware?! In express: 

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

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

<pre><code>&lt;link rel="icon" href="/public/favicon.ico"&gt;
</code></pre>

blocks|key|138007|text|app.use(express.favicon(__dirname+%2B+'/public/images/favicon.ico'));+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|138008|我让它在没有__dirname+%2B的情况下在本地运行，但无法在我部署的服务器上运行。|unstyled|offset|length|style|CODE|138009|entityMap^0|0|6|B|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>app.use(express.favicon(__dirname + '/public/images/favicon.ico')); 
</code></pre>

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

blocks|key|138025|text|如果您使用的是Express+>+4.0，则可以使用serve-favicon|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|138026|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/expressjs/serve-favicon^0|Q|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you are using Express > 4.0, you could go for <a href="https://github.com/expressjs/serve-favicon" rel="nofollow noreferrer">serve-favicon</a>

blocks|key|355951|text|如果您设置了静态路径，那么只需在视图中使用<link+rel="icon"+href="/images/favicon.ico"+type="image/x-icon">即可。不需要其他任何东西。请确保您的图像文件夹位于公用文件夹中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|355952|entityMap^0|L|1S|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|356125|text|如果您想要一个不涉及外部文件的解决方案，并且不使用express.static+(例如，一个超轻量级的单文件can服务器和站点)，您可以使用serve-favicon并将您的favicon.ico文件编码为Base64。如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|356126|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));|code-block|syntax|javascript|356127|用将您的favicon文件编码为Base64的结果替换IMAGE_AS_BASE64_STRING_GOES_HERE。有很多网站可以在网上做到这一点，搜索。|356128|注意:您可能需要重新启动服务器和/或浏览器才能看到它在localhost上工作，并且需要硬刷新/清除浏览器缓存才能看到它在web上工作。|356129|entityMap^0|P|E|1Y|D|2F|B|0|0|R|W|0|R|9|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|P|$]]

If you want a solution that does not involve external files, and does not use <code>express.static</code> (for example, a super-light one file webserver and site) you can use <code>serve-favicon</code> and encode your <code>favicon.ico</code> file as Base64. Like this:
<pre><code>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));
</code></pre>
Replace <code>IMAGE_AS_BASE64_STRING_GOES_HERE</code> with the result of encoding your favicon file as Base64. There are lots of sites that can do that online, have a search.
Note you may need to restart the server and/or browser to see it working on <code>localhost</code>, and a hard refresh/clear browser cache to see it working on the web.

blocks|key|356044|text|在app.js中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356045|app.use(express.static(path.join(__dirname,+'public')));|code-block|syntax|javascript|356046|假设图标位于“/public/images/folicon.ico”中，在html的头部添加下一个链接：|356047|<link+rel='icon'+href='/images/favicon.ico'+class='js-favicon'>|356048|这在使用以下命令自动生成的项目中工作得很好：|356049|express+my-project|356050|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

In app.js:

<pre><code>app.use(express.static(path.join(__dirname, 'public')));
</code></pre>

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

<pre><code>&lt;link rel='icon' href='/images/favicon.ico' class='js-favicon'&gt;
</code></pre>

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

<pre><code>express my-project
</code></pre>

blocks|key|138272|text|安装express-favicon中间件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|138273|npm+install+express-favicon+--save|code-block|syntax|javascript|138274|像这样使用它：|138275|const+favicon+=+require('express-favicon');
app.use(favicon(__dirname+%2B+'favicon.ico'));|138276|entityMap^0|2|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

Install <code>express-favicon</code> middleware:

<pre><code>npm install express-favicon --save
</code></pre>

Use it like this:

<pre><code>const favicon = require('express-favicon');
app.use(favicon(__dirname + 'favicon.ico'));
</code></pre>

blocks|key|355904|text|下面列出的代码是有效的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|355905|var+favicon+=+require('serve-favicon');

app.use(favicon(__dirname+%2B+'/public/images/favicon.ico'));|code-block|syntax|javascript|355906|只需确保刷新浏览器或清除缓存即可。|355907|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The code listed below works:

<pre><code>var favicon = require('serve-favicon');

app.use(favicon(__dirname + '/public/images/favicon.ico'));
</code></pre>

Just make sure to refresh your browser or clear your cache.

blocks|key|138183|text|第0步:将以下代码添加到app.js或index.js|type|unstyled|depth|inlineStyleRanges|entityRanges|data|138184|app.use("/favicon.ico",+express.static('public/favicon.ico'));|offset|length|style|CODE|138185|第1步:从此处下载图标https://icons8.com/或创建自己的图标|138186|步骤2:转到https://www.favicongenerator.com/|138187|步骤3:上传下载的icon.png文件>设置16px+>创建收藏图标>下载|138188|步骤4:进入downloads文件夹，你会找到.ico文件，将其重命名为favicon.ico|138189|第5步:复制您创建的公共目录中的favicon.ico|138190|第6步:将以下代码添加到.pug文件的标题标签下的标题标签下|138191|<link+rel="shortcut+icon"+type="image/x-icon"+href="/favicon.ico">|code-block|syntax|javascript|138192|步骤7:保存>重启服务器>关闭浏览器>重新打开浏览器>图标出现|138193|注意:您可以使用favicon以外的名称，|138194|在代码和公共文件夹中，请确保更改名称。|138195|entityMap|0|LINK|mutability|MUTABLE|url|https://icons8.com/|1|https://www.favicongenerator.com/^0|0|0|1Q|0|B|J|0|0|6|X|1|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1I|8|@]|9|@$D|1J|E|1K|1|1L]]|A|$]]|$1|J|3|K|5|6|7|1M|8|@]|9|@$D|1N|E|1O|1|1P]]|A|$]]|$1|L|3|M|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1R|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1S|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1T|8|@]|9|@]|A|$]]|$1|T|3|U|5|V|7|1U|8|@]|9|@]|A|$W|X]]|$1|Y|3|Z|5|6|7|1V|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1W|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1X|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]|1C|$5|17|18|19|A|$1A|1D]]]]

step 0: add below code to app.js or index.js 
<code>app.use("/favicon.ico", express.static('public/favicon.ico'));</code> 
step 1: download icon from here <a href="https://icons8.com/" rel="nofollow noreferrer">https://icons8.com/</a> or create your own 
step 2: go to <a href="https://www.favicongenerator.com/" rel="nofollow noreferrer">https://www.favicongenerator.com/</a> 
step 3: upload the downloaded icon.png file > set 16px > create favicon > download 
step 4: go to downloads folder, you'll find [.ico file], rename it as favicon.ico 
step 5: copy favicon.ico in public directory you created 
step 6: add below code to your .pug file under head tag, below title tag 

<pre><code>&lt;link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"&gt;
</code></pre>

step 7: save > restart server > close browser > reopen browser > favicon appears 
NOTE: you can use name other than favicon, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;but make sure you change the name in code and 
 in the public folder.

blocks|key|138401|text|如果您使用Express.static提供文件夹，只需将favicon.ico文件放在该文件夹的根目录下，当浏览器请求它时，它就会被提供。不需要在html中添加link标签，也不需要在应用程序代码中添加特殊的中间件路由。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|138402|如果你在反向代理后面，你可能需要为文件指定媒体/mime类型(here's+how+in+IIS)，但是如果你直接导航到你的应用程序，它就“正常工作”。|138403|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap^0|28|4|0|V|H|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

If you are using Express.static to serve a folder, just put the favicon.ico file in the root of that folder and it will be served when the browser requests it. There's no need to add a <code>link</code> tag to your html or a special middleware route in the application code.
If you're behind a reverse proxy, you may need to specify the media/mime type for the file (<a href="https://docs.microsoft.com/en-us/iis/configuration/system.webserver/staticcontent/mimemap" rel="nofollow noreferrer">here's how in IIS</a>) but if you navigate directly to your app it &quot;just works&quot;.

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

<pre><code>app.use(express.favicon());
</code></pre>

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

How to set custom favicon in Express?

中间件

服务器

路由

我最近开始使用Node.js，在app.js文件中有这样一行：app.use(express.favicon());现在，我如何设置我自己的自定义favicon.ico？

问如何在Express中设置自定义favicon？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Express中设置自定义favicon？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Express中设置自定义favicon？
EN