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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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