node.js 无法使用 Express.js 更改网站图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11658035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to Change Favicon with Express.js
提问by gtmtg
This is a really basic question, but I'm trying to change the favicon of my node.js/Express app with
这是一个非常基本的问题，但我正在尝试使用以下命令更改我的 node.js/Express 应用程序的图标
app.use(express.favicon(__dirname + '/public/images/favicon.ico'));
and I'm still getting the default favicon. This is in my app.configurefunction, and yes, I've verified that there isa favicon.icoin the /public/images/favicon.ico.There's nothing about a favicon.icoin the console, either, which leads me to believe that this line of code is being ignored. Everything else in the function (setting port, setting views directory, setting template engine. etc.) seems to be working fine, so why would this line of code not be executing?
我仍然得到默认的图标。这是在我的app.configure功能，是的，我已经验证，有是一个favicon.ico在/public/images/favicon.ico。还有的约没有favicon.ico在控制台中，要么，我相信这线索，这行代码被忽略。函数中的其他所有内容（设置端口、设置视图目录、设置模板引擎等）似乎都运行良好，那么为什么这行代码没有执行呢？
What I tried
我试过的
- Emptying browser cache
- Restarting Terminal and running
node app.jsagain - Adding
{ maxAge: 2592000000 }, as described here
- 清空浏览器缓存
- 重新启动终端并
node app.js再次运行 - 添加
{ maxAge: 2592000000 }，如所描述这里
Thanks in advance.
提前致谢。
Update:I got it to work. See my answer below for more information.
更新：我让它工作了。有关更多信息，请参阅下面我的回答。
回答by gtmtg
I tried visiting the site in Safari for the first time (I normally use Chrome) and noticed that it was showing the correct favicon. I tried clearing my cache in Chrome again (twice) to no avail, but after more searching, I found that apparently favicons aren't stored in the cache. I "refreshed my favicon" using the method described hereand it worked!
我第一次尝试在 Safari 中访问该站点（我通常使用 Chrome）并注意到它显示了正确的图标。我再次尝试清除 Chrome 中的缓存（两次）但无济于事，但经过更多搜索，我发现显然图标未存储在缓存中。我使用此处描述的方法“刷新了我的收藏夹图标”并且它起作用了！
Here's the method (modified from the above link), in case the link goes dead:
这是方法（从上面的链接修改），以防链接失效：
- Open Chrome/the problematic browser
- Navigate to the favicon.ico file directly, e.g. http://localhost:3000/favicon.ico
- Refresh the favicon.ico URL by pressing F5 or the appropriate browser Refresh (Reload) button
- Close the browser and open your website - voila, your favicon has been updated!
- 打开 Chrome/有问题的浏览器
- 直接导航到 favicon.ico 文件，例如http://localhost:3000/favicon.ico
- 按 F5 或相应的浏览器刷新（重新加载）按钮刷新 favicon.ico URL
- 关闭浏览器并打开您的网站 - 瞧，您的网站图标已更新！
回答by user976647
What worked for me finally:
最终对我有用的是：
Look that the
看那个
app.use(express.favicon(__dirname + '/public/images/favicon.ico'));
is at the beginning of the app configuration function. I had it before at the end. As the Express doc says: 'The order of which middleware are "defined" using app.use()is very important, they are invoked sequentially, thus this defines middleware precedence.'
是在app配置功能的开头。我在最后之前有过。正如 Express 文档所说：“使用“定义”中间件的顺序app.use()非常重要，它们是按顺序调用的，因此这定义了中间件优先级。
I didn't need to set any maxAge.
我不需要设置任何 maxAge。
To test it:
要测试它：
- Restart the server with
node app.js - Clear the browser cache
- Refresh the Favicon with directly accessing it by using "localhost:3000/your_path_to_the favicon/favicon.ico" and reloading
- 重启服务器
node app.js - 清除浏览器缓存
- 通过使用“localhost:3000/your_path_to_the favicon/favicon.ico”并重新加载直接访问它来刷新Favicon
回答by captDaylight
The above answer is no longer valid.
以上答案不再有效。
If you use
如果你使用
app.use(express.favicon(__dirname + '/public/images/favicon.ico'));
You'll get this error:
你会得到这个错误：
Error: Most middleware (like favicon) is no longer bundled with Express and must be installed separately
What you're going to need to do is get serve-favicon.
您需要做的是获取serve-favicon。
run
跑
npm install serve-favicon --save
then add this to your app
然后将此添加到您的应用程序
var express = require('express');
var favicon = require('serve-favicon');
var app = express();
app.use(favicon(__dirname + '/public/images/favicon.ico'));
回答by joedotnot
What worked for me follows. Set express to serve your static resources as usual, for example
对我有用的方法如下。例如，设置 express 像往常一样为您的静态资源提供服务
app.use(express.static('public'));
Put favicon inside your public folder; Then add a query string to you icon url, for example
将网站图标放在您的公用文件夹中；然后将查询字符串添加到您的图标 url，例如
<link rel="icon" type="image/x-icon" href="favicon.ico?v="+ Math.trunc(Math.random()*999)>
In this case, Chrome is the misbehaving Browser; IE. Firefox. Safari (all on Windows) worked fine, WITHOUT the above trick.
在这种情况下，Chrome 是行为不端的浏览器；IE。火狐。Safari（全部在 Windows 上）运行良好，没有上述技巧。
回答by Bhavin
Simplest way I could come up with (valid only for local dev, of course) was to host the server on a different port
我能想到的最简单的方法（当然仅对本地开发人员有效）是将服务器托管在不同的端口上
PORT=3001 npm run start
PORT=3001 npm run start
回答by Shimon Doodkin
smiley favicon to prevent error:
防止错误的笑脸图标：
var favicon = new Buffer('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 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 fav icon a high quality icons for link for the website.
快速图标转到http://www.clker.com/并选择一些矢量剪贴画，然后下载为 svg。然后将它带到inkscape并更改颜色或删除部分，也许从另一个矢量剪贴画图像中添加一些内容，然后导出选择要导出的部分并单击文件>导出，选择大小如16x16作为favicon或32x32，进一步编辑128x128或256x256 . ico 包内可以有多种图标大小。它可以与 16x16 像素的收藏夹图标一起为网站链接提供高质量的图标。
then maybe enhance the imaage in photoshop. like vibrance bivel round mask , anything.
然后也许可以在photoshop中增强图像。像 vibrance bivel 圆形面具，任何东西。
then upload this image to one of the websites that generate favicons. there are also programs for windows for editing icons(search like "windows icon editor opensource", figure our how to create two images of different size inside a single icon).
然后将此图像上传到生成网站图标的网站之一。还有用于编辑图标的窗口程序（搜索“windows icon editor opensource”，了解如何在单个图标内创建两个不同大小的图像）。
to add the favicon to website. just put the favicon.ico as a file in your root domain files folder. for example in nodejs in public folder that contans the static files. it doesn't have to be anything special like code above just a simple file.
将网站图标添加到网站。只需将 favicon.ico 作为文件放在根域文件文件夹中。例如在包含静态文件的公共文件夹中的 nodejs 中。它不必像上面的代码那样特殊，只是一个简单的文件。
回答by zemirco
Have you tried clearing your browser's cache? Maybe the old favicon is still in the cache.
您是否尝试过清除浏览器的缓存？也许旧的图标仍在缓存中。
回答by med116
How to do this without express:
如何在没有快递的情况下做到这一点：
if (req.method == "GET") {
if (/favicon\.ico/.test(req.url)) {
fs.readFile("home/usr/path/favicon.ico", function(err, data) {
if (err) {
console.log(err);
} else {
res.setHeader("Content-Type","image/x-icon");
res.end(data);
}
});
}
