如何设置快速自定义图标?

我最近开始在 Node.js 中工作,在 app.js 文件中有这样一行:

app.use(express.favicon());

现在,我要如何设置我自己的自定义 Favicon.ico?

133399 次浏览

4号快车

安装 中间件,然后:

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


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

或者更好,使用 path模块:

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

(注意,这个解决方案也可以在 Express 3应用程序中使用)

3号快车

根据空气污染指数,.favicon接受位置参数:

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

大多数情况下,您可能需要这样做(就像 vsync 建议的那样) :

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

或者更好的是,使用 path模块(就像 Druska 建议的那样) :

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

为什么 图标静电干扰

根据 包装说明:

  1. 这个模块将图标缓存在内存中,通过跳过磁盘访问来提高性能。
  2. 这个模块根据图标的内容而不是文件系统属性提供 ETag
  3. 该模块将与最兼容的 Content-Type一起使用。
app.use(express.favicon(__dirname + '/public/images/favicon.ico'));

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

如果使用 Express > 4.0,则可以使用 发球

不需要额外的中间件,只需使用:

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

避免错误:

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

更改上面代码中的图标

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

转换到64基地,可能在这里: http://base64converter.com/

然后替换基于64的图标值

如何创建个性化的最爱图标的一般信息

图标是使用 photoshop 或者 inkscape 制作的,也可能使用 inkscape 然后 photoshop 来获得活力和色彩校正(在图像-> 调整菜单中)。

对于快速图标去 http://www.clker.com/和选择一些矢量剪辑艺术,并作为 svg 下载。 然后把它带到 inkscape (https://inkscape.org/) ,改变颜色或删除部分,也许从另一个矢量剪贴画图像添加一些东西,然后导出选择部分导出,点击文件 > 导出,选择大小如16x16的图标或32x32。进一步编辑128x128或256x256。Ico 软件包可以有几个图标大小内。它可以随着16x16像素的收藏夹图标一个高品质的图标链接的网站。

然后可以在 Photoshop 中增强图像。比如振动,斜面效果,圆面罩,任何东西。

然后上传这张图片到其中一个网站,生成收藏夹。 还有一些窗口程序用于编辑像 https://sourceforge.net/projects/variicons/这样的图标。

将图标添加到网站。只需将 Favicon.ico 作为一个文件放在域的根文件夹中。例如,在包含静态文件的公用文件夹中的 node.js 中。它不必是任何特殊的东西,如代码以上只是一个简单的文件。

下列代码适用于:

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


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

请确保刷新浏览器或清除缓存。

不需要自定义中间件:

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

然后把你的图标放在公共场合,并在你的 html 的头上添加以下内容:

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

如果设置了静态路径,那么只需在视图中使用 <link rel="icon" href="/images/favicon.ico" type="image/x-icon">。不需要别的了。请确保您的图像文件夹在公用文件夹中。

步骤0: 将下面的代码添加到 app.js 或 index.js

app.use("/favicon.ico", express.static('public/favicon.ico')); < br > < br > 步骤1: 从这里下载图标 https://icons8.com/或创建自己的
步骤2: 转到 https://www.favicongenerator.com/
步骤3: 上传下载的 icon.png 文件 > set 16px > create Favicon > download
步骤4: 进入下载文件夹,找到[ . ico 文件] ,将其重命名为 Favicon.ico
步骤5: 在您创建的公共目录中复制 Favicon.ico
步骤6: 将下面的代码添加到 head 标记下的. pug 文件中,title 标记 < br >

下面
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

步骤7: 保存 > 重新启动服务器 > 关闭浏览器 > 重新打开浏览器 > 出现图标

注意: 您可以使用不同于图标的名称,< br > ,但是请确保在代码和 在公用文件夹中。

在 app.js 中:

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

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

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

这在使用以下命令自动生成的项目中工作得很好:

express my-project

安装 express-favicon中间件:

npm install express-favicon --save

像这样使用它:

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

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

我刚才试过了:

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

然后得到了这个错误消息:

错误: 大多数中间件(如图标)不再捆绑 快递和必须单独安装。请参阅 Https://github.com/senchalabs/connect#middleware.

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

如果你想要一个解决方案,不涉及外部文件,不使用 express.static(例如,一个超轻的一个文件网络服务器和网站) ,你可以使用 serve-favicon和编码您的 favicon.ico文件为 Base64。像这样:

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

将您的图标文件编码为 Base64的结果替换为 IMAGE_AS_BASE64_STRING_GOES_HERE。有很多网站可以在线搜索。

注意,您可能需要重新启动服务器和/或浏览器来查看它在 localhost上的工作情况,以及一个硬刷新/清除浏览器缓存来查看它在 Web 上的工作情况。

如果您使用 Express.static 为文件夹提供服务,只需将 Favicon.ico 文件放在该文件夹的根目录中,当浏览器请求它时,就会提供服务。不需要在应用程序代码中向 html 或特殊的中间件路由添加 link标记。

如果你使用的是反向代理,你可能需要指定文件的 media/mime 类型(在 IIS 里是这样的) ,但是如果你直接导航到你的应用程序,它就“正常工作”。

如果以上两种都不管用,你可以试试这个!
请确保 Favicon.ico 文件在 公共/图标中,或者相应地进行更改。
如果没有导入 路径,

const path = require('path') ;

那么,

app.get("/favicon.ico", (req, res) => {
return res.sendFile(path.join(__dirname + "/public/icons/favicon.ico"));
});