admin 管理员组文章数量: 1184232
一、前言
在开发一款桌面应用时，设置窗口图标和桌面快捷方式图标是两个必须的需求。下面来看看我基于Electron开发的实际项目中是如何配置最终实现了这个需求吧。
二、实现设置窗口图标和桌面快捷方式图标
1、准备好你的Icon图标
要得到一个icon图标十分简单，你需要有一张目标图标的png格式图片，然后找一个可以免费在线转换icon图标的网站转换下载即可，这里我提供一个我用过的很不错的在线转换工具：
。
这里需要说明一下，有的童鞋可能在纠结转换成多大的图标才可以呢？
我的快捷方式图标尺寸是256×256，不过64×64、128×128的都行，建议快捷方式的图标不要尺寸太秀珍。
那么窗口图标可以使用多大的呢？经过我的尝试，20×20、32×32、64×64的都可以正常显示，窗口图标和桌面快捷方式图标可以使用同一个尺寸的，也就是最大256×256。我的窗口图标选用的是20×20的。
2、代码配置
由于Electron中这两个图标是分开配置的，所以由两个地方需要进行配置。分别是：
01、package.json中，这里配置的是控制打包后的桌面快捷方式的图标：
"build": {
"productName": "XXX",
"appId": "XXX",
...... // 因为这篇文章重点讲解图标配置，所以此处省略别的配置代码
"mac": {
"icon": "./XXX/logo.ico"
},
"win": {
"icon": "./XXX/logo.ico"
},
"linux": {
"icon": "./XXX/logo.ico"
},
"nsis": {
"oneClick": false,
"guid": "idea",
"perMachine": true,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./XXX/logo.ico",
"uninstallerIcon": "./XXX/logo.ico",
"installerHeaderIcon": "./XXX/logo.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "idea"
}
}
02、在主进程文件index.js（可能你的主进程文件叫main.js或者别的，总之领会精神就好，哈哈哈），这里配置的是窗口图标 ：
mainWindow = new BrowserWindow({
...... // 因为这篇文章重点讲解图标配置，所以此处省略别的配置代码
height: 600,
width: 1020,
// 下面这行代码就是配置窗口图标的核心代码了
icon: path.join(__dirname, './XXX/logo20.ico'), // 注意，这里的path是一个node模块哦，需要npm安装并且引入使用。最直接的作用就是拼接字符串。
})
3、实现需求
经过上面的步骤，不出意外的话，你本地启动项目应该已经可以看到窗口图标已经变成你想要的样子了，这个不需要打包即可看到效果。另外的快捷方式的图标需要你使用打包工具进行打包后安装即可看到效果。
三、效果展示（图片）
1、窗口图标效果
当一切没有问题后这块的图标就是你的目标图标了
出现这个情况的有3种可能：1、你没有在主进程index.js中设置窗口图标配置；2、你的图标格式不是icon格式；3、你配置的icon路径不对
2、快捷方式效果
参考链接
欢迎大家一起讨论、学习
版权声明：本文标题：掌握Electron的图标秘密：轻松设计窗口和桌面快捷方式 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1772225975a3553544.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论