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

electron的demo运行起来后,大家经常想修改electron的图标。那么在修改图标的过程中,又遇到了什么事情呢?大家可以看看苏南大叔的electron图标更换过程经验。本次实验的基础是:win环境,electron+vue的demo,builder打包模式

前言

首先,大家需要知道:electron的ico更换过程,是发生在最后的打包阶段,而不是开发过程中的。也就是说,大多数情况下,这个图标是打包的时候决定的。而electron的打包过程,可选的工具非常多。目前我们可能会在packager和builder之间进行选择。

其次,electron的ico,实际上也随系统不同而不同,有win版、mac版、linux版的区分,而普通的ico也可能是不能满足需求的,可能你需要做个特殊的套娃ico图标,才能在electron中正常显示。具体的ico制作过程,大家可以点击这里查看苏南大叔的文章:https://newsn.net/say/electron-ico-format.html

制作ico

大家需要先制作好win下所使用的ico文件,这里的要点是:必须是ico后缀,png是不行的(mac下是icns文件)。套娃ico里面,应该至少有一个256*256尺寸的ico,标准的ico里面是有如下尺寸的:256/128/64/32/16 。否则您就可能会看到下面的错误情况。

electron换图标之builder - ico_04

electron换图标之builder - ico_07

electron换图标之builder - ico_16

修改package.json

苏南大叔下一步要修改package.json里面的build字段里面的win相关的ico内容,指定新的ico文件。当然,如果你同名覆盖的话,就是不需要修改package.json文件的。默认的图标位置是:build文件下的icons文件夹(见截图)。win下使用的图标是:icon.ico。

electron换图标之builder - ico_02

electron换图标之builder - ico_01

查看效果

苏南大叔运行命令后,就可以看到相关效果了。

npm run build

electron换图标之builder - ico_13

electron换图标之builder - ico_14

electron换图标之builder - ico_15

electron换图标之builder - ico_99

electron换图标之builder - ico

总结

根据使用的打包方式的不同,具体的修改ico的手段也是不一样的,但是都是可以定制ico的。苏南大叔带给大家的electron系列教程中,会陆续介绍其他的更换ico的方法。大家可以继续关注苏南大叔的electron的相关文章:https://newsn.net/tag/electron/

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。