electron程序，tray托盘图标文件需要什么格式尺寸及位置？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

本文中，苏南大叔讲述：tray托盘图标问题。因为大量新人还是卡住这里，所以，这里苏南大叔再次做个说明总结。本文的内容主要分为两部分，第一是图标的格式是什么？第二是图标文件要放在什么位置。解决了这两个问题，就解决了Error processing argument at index 0的报错问题了。

本文测试环境：win10/electron@5.0.7。注意点就两个，一是格式（一般人不会犯错），二是位置（一般人都是这里出错了）。加油，少年！

图标的格式

首先要解决图标格式的问题，大家在这里总是傻傻的不清楚。其实，electron中图标文件的格式使用，还是非常宽松的，常见的.png/.jpg格式都是可以使用的，甚至大家可以拿为app单独做的.ico/.icns文件，直接作为tray托盘的图标使用。

测试代码如下：

// const {app, Tray} = require('electron')
// const path = require('path');
let tray = null
app.on('ready', () => {
  //tray = new Tray("./favicon.png")
  //tray = new Tray(path.join(__dirname,"./img/favicon.ico"));
  //tray = new Tray(path.join(__dirname,"./img/favicon.jpg"));
  //tray = new Tray(path.join(__dirname,"./img/favicon.icns"));
  //tray = new Tray(path.join(__dirname,"./img/favicon.gif"));
  //tray = new Tray(path.join(__dirname,"./img/favicon.bmp"));
  tray = new Tray(path.join(__dirname,"./img/favicon.png"));
})

对于electron的tray的图标格式，测试结论是：

• 支持.png/.jpg，不支持.bmp/.gif
• win10支持.ico，mac支持.icns

图标放哪里

这个步骤是大家需要仔细想的。理论上来说，您的图标文件放在项目下任何目录里面都行。不过，典型的场景是：打包之前可以正常显示，打包之后就不能运行，直接报错了。那么为啥很多人的项目报错呢？报错信息如下所示。

Error processing argument at index 0

在前一篇文章中，苏南大叔说了，这个报错信息，如果确定格式没有问题的话，就请检查路径。为啥打包之后就找不到图标文件了呢？那是因为打包的过程中，图片的位置发生了变化，或者根本就没有复制到asar文件包里面。也就是说下面代码中的<path>出了问题。

tray = new Tray(path.join("<path>","<file>.png"));

在范例代码中，<path>的取值是__dirname，意味着当前目录。但是在实际操作中，特别是有二次打包情况的vue类的情况中，使用__dirname就不一定合适了。所以，请给自己的<path>，找到一个开发中和打包后都存在的正确取值。

调试方式

但是，打包的可用途径太多了。这里，苏南大叔就无法一一描述了。总的思路就是：
首先，请确保图标格式是被支持的。一般不会出错，.png文件是万能的。
其次，打印一下打包之后的图标最终路径，可用的“打印”方式来进行调试。可以参考：

• https://newsn.net/say/electron-dialog-messagebox.html
• https://newsn.net/say/electron-log.html

再次，请查看一下最终的上述路径下，到底是不是存在着对应的图标。鉴于大多数情况下，都是被asar过的结果。请参考下面两篇文章：

• https://newsn.net/say/electron-asar.html
• https://newsn.net/say/electron-asar-explorer.html

electron-vue中的图标放在哪里

理论上来说，只要你的图标文件能够被打包过去，那么路径不是问题。但是，electron-vue的项目，因为中间参杂着一个编译的过程，一些文件（夹）是不会被复制到最终结果里面的，所以，这里面，就有非常大的报错几率的。很多小伙伴也是卡在了这里，如果您愿意思考，那么请按着上述步骤自己分析一下。要是不愿意思考，也可以评论本文查看一下参考答案。

相关链接可以查看：

• https://newsn.net/say/electron-vue-build-command.html
• https://newsn.net/say/electron-vue-static.html

图标的尺寸

在win系统中，图标的尺寸并不需要额外注意，因为是会自动缩放的。当然，如果您对像素值特别关心的话，就请额外处理处理图标文件。下面的这个文章里面，有说明，window下的图标的建议包含的尺寸，可以作为参考。

• https://electronjs.org/docs/api/native-image#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F

文章中建议：对于win系统中使用.ico文件的情况，为了达到最佳视觉效果。建议在中至少包括以下大小:

• 16x16 (100% DPI scale)
• 20x20 (125% DPI scale)
• 24x24 (150% DPI scale)
• 32x32 (200% DPI scale)
• 32x32 (100% DPI scale)
• 40x40 (125% DPI scale)
• 48x48 (150% DPI scale)
• 64x64 (200% DPI scale)
• 256x256

在mac系统中，这个图标的尺寸是很有必要进行限制的。因为它并不会进行图标缩放。经过苏南大叔的测试，对于1x文件来说，16*16像素，是合适的。当然，在视网膜屏幕上，使用32*32像素的2x文件，也是可以正常显示的。下面的是对比效果图：

相关链接

• https://electronjs.org/docs/api/native-image
• https://newsn.net/say/electron-tray.html

结束语

electron加载tray图标，Error processing argument at index 0这个报错问题，就基本上可以结题了。如果有小伙伴看完了这么详细的教程，还是说没效果，解决不了的话。那么，只能建议您放弃治疗了。孩子，前面的路太艰辛，及时回头是岸。

更多苏南大叔写的electron教程，请参考下面的链接：

• https://newsn.net/tag/electron/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。