我最近开始在 Node.js 中工作,在 app.js 文件中有这样一行:
app.use(express.favicon());
现在,我要如何设置我自己的自定义 Favicon.ico?
安装 中间件,然后:
var favicon = require('serve-favicon'); app.use(favicon(__dirname + '/public/images/favicon.ico'));
或者更好,使用 path模块:
path
app.use(favicon(path.join(__dirname,'public','images','favicon.ico')));
(注意,这个解决方案也可以在 Express 3应用程序中使用)
根据空气污染指数,.favicon接受位置参数:
.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')));
根据 包装说明:
ETag
Content-Type
我让它在没有 __dirname +的情况下在本地工作,但是在我部署的服务器上无法工作。
__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 中。它不必是任何特殊的东西,如代码以上只是一个简单的文件。
下列代码适用于:
请确保刷新浏览器或清除缓存。
不需要自定义中间件:
//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">。不需要别的了。请确保您的图像文件夹在公用文件夹中。
<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 >
app.use("/favicon.ico", express.static('public/favicon.ico'));
<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中间件:
express-favicon
npm install express-favicon --save
像这样使用它:
const favicon = require('express-favicon'); app.use(favicon(__dirname + 'favicon.ico'));
您必须安装中间件才能为图标提供服务。
我刚才试过了:
然后得到了这个错误消息:
错误: 大多数中间件(如图标)不再捆绑 快递和必须单独安装。请参阅 Https://github.com/senchalabs/connect#middleware.
我想我们可以认为这是确定的。
如果你想要一个解决方案,不涉及外部文件,不使用 express.static(例如,一个超轻的一个文件网络服务器和网站) ,你可以使用 serve-favicon和编码您的 favicon.ico文件为 Base64。像这样:
express.static
serve-favicon
favicon.ico
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。有很多网站可以在线搜索。
IMAGE_AS_BASE64_STRING_GOES_HERE
注意,您可能需要重新启动服务器和/或浏览器来查看它在 localhost上的工作情况,以及一个硬刷新/清除浏览器缓存来查看它在 Web 上的工作情况。
localhost
如果您使用 Express.static 为文件夹提供服务,只需将 Favicon.ico 文件放在该文件夹的根目录中,当浏览器请求它时,就会提供服务。不需要在应用程序代码中向 html 或特殊的中间件路由添加 link标记。
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")); });