57

这是一个非常基本的问题，但我正在尝试更改我的 node.js/Express 应用程序的图标

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

而且我仍然得到默认的图标。这是在我的app.configure函数中，是的，我已经验证了 a 中有一个。 控制台中也没有关于 a 的任何内容，这让我相信这行代码被忽略了。函数中的其他所有内容（设置端口、设置视图目录、设置模板引擎等）似乎都工作正常，那么为什么这行代码不会执行呢？favicon.ico/public/images/favicon.icofavicon.ico

我试过的

  • 清空浏览器缓存
  • 重新启动终端并node app.js再次运行
  • 添加{ maxAge: 2592000000 }，如此处所述

提前致谢。

更新：我让它工作。有关更多信息，请参阅下面的答案。

4

8 回答 8

84

我第一次尝试在 Safari 中访问该站点（我通常使用 Chrome）并注意到它显示了正确的图标。我尝试再次（两次）清除 Chrome 中的缓存但无济于事，但经过更多搜索后，我发现显然 favicon 没有存储在缓存中。我使用此处描述的方法“刷新了我的网站图标”并且它有效！

这是方法（从上面的链接修改），以防链接失效：

  1. 打开 Chrome/有问题的浏览器
  2. 直接导航到 favicon.ico 文件，例如http://localhost:3000/favicon.ico
  3. 按 F5 或相应的浏览器刷新（重新加载）按钮刷新 favicon.ico URL
  4. 关闭浏览器并打开您的网站 - 瞧，您的网站图标已更新！
于 2012-07-25T21:48:20.243 回答
35

最后对我有用的是：

看那个

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

是在app配置功能的开头。最后我之前有过。正如 Express 文档所说：“使用“定义”中间件的顺序app.use()非常重要，它们是按顺序调用的，因此这定义了中间件的优先级。

我不需要设置任何 maxAge。

要测试它：

  • 重启服务器node app.js
  • 清除浏览器缓存
  • 通过使用“localhost:3000/your_path_to_the favicon/favicon.ico”直接访问它并重新加载来刷新 Favicon
于 2013-01-06T06:24:39.647 回答
19

上面的答案不再有效。

如果你使用

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

你会得到这个错误：

Error: Most middleware (like favicon) is no longer bundled with Express and must be installed separately

您需要做的是获取serve-favicon。

跑

npm install serve-favicon --save

然后将其添加到您的应用中

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

app.use(favicon(__dirname + '/public/images/favicon.ico'));
于 2014-10-20T12:51:00.463 回答
2

对我有用的方法如下。设置 express 以像往常一样为您的静态资源提供服务，例如

app.use(express.static('public'));

将网站图标放在您的公共文件夹中；然后将查询字符串添加到您的图标 url，例如

<link rel="icon" type="image/x-icon" href="favicon.ico?v="+ Math.trunc(Math.random()*999)>

在这种情况下，Chrome 是行为不端的浏览器；IE。火狐。Safari（全部在 Windows 上）运行良好，没有上述技巧。

于 2017-01-18T00:59:29.783 回答
2

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

于 2018-07-13T20:39:50.493 回答
1

您是否尝试过清除浏览器的缓存？也许旧的 favicon 仍在缓存中。

于 2012-07-25T20:42:21.907 回答
1

笑脸图标以防止错误：

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

更改上面代码中的图标

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

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

然后替换图标 base 64 值

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

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

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

然后也许可以增强 Photoshop 中的图像。像 vibrance bivel 圆形面具，任何东西。

然后将此图像上传到生成网站图标的网站之一。还有用于编辑图标的 windows 程序（搜索“windows icon editor opensource”，了解我们如何在单个图标中创建两个不同大小的图像）。

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

于 2015-09-05T22:12:27.767 回答
0

如何在没有快递的情况下做到这一点：

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);
            }
     });
}
于 2014-07-16T15:36:00.337 回答