electron-builder打包桌面运行只显示一半图标,桌面图标和程序左上角图标显示不全的问题

吃炸鸡的前端

已于 2023-04-20 11:26:57 修改

阅读量1.4k

点赞数 2

文章标签： electron 前端 javascript

于 2023-04-10 17:54:53 首次发布

本文链接：https://blog.csdn.net/weixin_43239880/article/details/130066060

版权

问题在于运行时图标的ico文件过大或尺寸不符，解决方案是创建不超过50kb且为256x256像素的ico图标，通过指定网站转换并替换到public文件夹，更新package.json配置确保图标路径正确，避免因png转ico后大小超出限制导致任务栏图标显示不全。

摘要由CSDN通过智能技术生成

问题描述

如图：

问题分析

桌面又是正常的，但是运行时的图标却不正常。按理来说这两个图标是同一个。但是却出现了运行在任务栏的图标显示不全的问题。经过了很多的搜索和尝试，最终确定问题所在：
1.logo图片最低为256*256像素
2.生成的ico图标不能高于50kb

解决方法：

1.准备一张256×256像素的图片，然后大小大概在30kb上下。
2.到网站中去制作256*256的ico图标。（也可以使用其他方式去生成ico图标，但是生成的ico图标不能大于50kb）
网站为：https://convertio.co/zh/
注意生成的ico文件不能大于50kb，大于50kb就会出现任务栏图标显示不全的问题
3.将该ico图标放置到publich文件夹
在这里插入图片描述

4.package.json配置:

"win": {
      "icon": "public/logoTemplate.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    }

总结：总结就是你的ico图标需要是256*256的，并且不能大于50kb，只要大于了，就会出现这个问题。另外就是最好直接用ico图标，不要用png，因为用了png，还会经过nsis的处理。复杂的图标转成ico的时候就会大于50kb了，比如有时你20kb的png，经过nsis的处理，会变成100kb的ico,这样子就又会导致这个问题的出现