开发工具桌面应用前端构建【免费下载链接】forge:electron: A complete tool for building and publishing Electron applications项目地址https://gitcode.com/gh_mirrors/fo/forge点击查看免费下载在 Electron Forge 中应用图标贯穿「打包产物」与「各平台安装包」两个层面前者通过packagerConfig.icon控制可执行文件/App 的图标后者通过对应 Maker 的config控制 DMG、Deb、Squirrel、Wix 等安装程序界面中的图标。本文以仓库中的官方指南 docs/guides/create-and-add-icons.md 为主线结合 maker 源码与配置类型定义系统讲解从 1024x1024 源图出发如何生成各平台所需格式.icns/.ico/.png/ Icon Composer.icon、如何处理高 DPI 密度、如何分别配置应用图标与安装程序图标并给出 Windows 图标缓存刷新的排障方案。读完本文你将能为一套 Electron 项目完整配置 macOS、Windows、Linux 三平台的应用与安装包图标。第一步生成各平台所需的图标文件Electron 的打包与安装流程不会自动把一张图片转换成平台所需格式因此你需要先为每个目标平台准备好符合格式与尺寸要求的图标文件。推荐使用网络上各类在线转换工具完成格式转换起点统一使用一张1024x1024px的高质量源图——这个尺寸可以无损缩放到各平台要求的分辨率也能满足 Apple Retina 等高分屏的2x需求。支持高分屏使用 2x 密度后缀在支持高 DPI 的平台如 Apple Retina 显示屏上可以在图片基础文件名后追加2x后缀将其标记为高分辨率图若icon.png是标准分辨率图片则icon2x.png会被视为 DPI 强度翻倍的高分辨率图。如果你想在同一目录中同时支持多种 DPI 密度的显示设备可以把不同尺寸的图片放在同一个文件夹并使用「不带 DPI 后缀」的基础文件名Electron 会自动按密度匹配。官方推荐的目录结构如下images/ ├── icon.png ├── icon2x.png └── icon3x.png除2x外Electron 还支持以下全部 DPI 后缀可覆盖从 1x 到 5x 的主流屏幕密度1x、1.25x、1.33x、1.4x、1.5x、1.8x、2x、2.5x、3x、4x、5x各平台推荐的格式与尺寸不同操作系统对图标的封装格式和像素尺寸要求差异很大官方推荐如下操作系统格式尺寸 / 说明macOS.icns或.icon使用 1024x1024 源图保留.icns以兼容旧版本同时可额外提供 Icon Composer 的.icon文件以支持 macOS 26Windows.ico256x256 像素Linux.png512x512 像素两个容易踩的坑Windows 的.ico必须由支持该格式的图像编辑器导出例如 GIMP 等绝不能把.png直接重命名成.ico——否则打包时 Electron Packager 会抛出Fatal error: Unable to set icon错误。.ico内部包含多分辨率帧及位深信息重命名只会得到一张无效的伪 ICO。macOS 的 Icon Composer.icon文件属于较新的能力electron/packager从 v18.4.0 起支持 macOS Icon Composer 文件。若需要同时兼容 macOS 26 与更早版本应同时提供.icns和.icon两个文件后文会说明如何在配置中同时指定。第二步在 Forge 配置中设置应用图标应用图标打包后 App / 可执行文件的图标统一通过packagerConfig.icon配置但 Windows、macOS、Linux 三者的具体写法和生效路径并不相同。Windows单个 icon 路径无需写扩展名在 forge.config.js 中配置packagerConfig.icon即可module.exports { // ... packagerConfig: { icon: /path/to/icon // no file extension required } // ... };提示当只提供一个 icon 路径时Electron Packager 会自动补上对应平台的扩展名Windows 下推断为.ico所以这里无需手动追加.ico。配置更新后运行 Make 命令构建项目即可生成带图标的应用产物npx electron-forge make或npm run make。macOS单 .icns 或双文件兼容方案如果只需要传统 macOS 图标格式沿用单个icon路径即可Packager 会自动推断.icns扩展名module.exports { // ... packagerConfig: { icon: /path/to/icon // .icns will be inferred } // ... };如果需要一套配置同时兼容 macOS 26 和更早版本则同时提供.icns与.icon两个文件并写成数组形式module.exports { // ... packagerConfig: { icon: [ /path/to/icon.icns, /path/to/icon.icon ] } // ... };此时 Electron Packager 会在 macOS 26 之前的系统上使用.icns文件在 macOS 26 及之后的系统上使用.icon文件。使用.icon文件需要特别注意两个前提条件打包.icon文件目前要求 macOS 26 或更高版本、Xcode 26 或更高版本因为 Electron Packager 需要调用 Apple 的actool工具来编译 Icon Composer 资源同时提供多个 macOS 图标文件时必须显式写出文件扩展名即写成icon.icns、icon.icon而不是裸文件名icon否则 Packager 无法区分.icns与.icon两个输入。配置完成后同样通过 Make 命令构建项目。Linux双重配置两处都要设置Linux 的图标配置是三大平台中最特殊的一个既要在 Forge 配置对应 maker-deb 打包进安装包又要在 Electron 主进程中设置对应运行时的窗口图标。首先在makers中为electron-forge/maker-deb配置图标module.exports { // ... makers: [ { name: electron-forge/maker-deb, config: { options: { icon: /path/to/icon.png } } } ] // ... };同时在主进程实例化 BrowserWindow 时加载同一个图标const { BrowserWindow } require(electron); const win new BrowserWindow({ // ... icon: /path/to/icon.png });从源码看icon正是electron-forge/maker-deb配置类型中options里的一个显式字段其类型注释为 Path to a single image that will act as icon for the application见 packages/maker/deb/src/Config.ts而 MakerDeb.make() 会通过{ options: {}, ...this.config, ... }把这段配置原样透传给底层electron-installer-debian最终写入.deb包内 desktop 文件的Icon字段。因此这里要求的是单张图片的路径Linux 推荐 512x512 的.png。完成两处配置后运行npm run make构建项目即可。第三步别忘了安装程序Installer图标应用图标和安装程序图标是两回事——安装程序Setup.exe、DMG、.deb、MSI 等通常都有自己的图标需要在各 Maker 的config中分别配置。官方完整示例位于 forge.config.js 的makers段// forge.config.js module.exports { // ... makers: [ { name: electron-forge/maker-squirrel, config: { // An URL to an ICO file to use as the application icon (displayed in Control Panel Programs and Features). iconUrl: https://url/to/icon.ico, // The ICO file to use as the icon for the generated Setup.exe setupIcon: /path/to/icon.ico } }, { // Path to a single image that will act as icon for the application name: electron-forge/maker-deb, config: { options: { icon: /path/to/icon.png } } }, { // Path to the icon to use for the app in the DMG window name: electron-forge/maker-dmg, config: { icon: /path/to/icon.icns } }, { name: electron-forge/maker-wix, config: { icon: /path/to/icon.ico } } ] // ... };各 Maker 的配置项含义与底层来源如下electron-forge/maker-squirrelWindows Setup.exe / nupkgiconUrl应用图标的 URL用于显示在「控制面板 程序和功能」中setupIcon生成的Setup.exe使用的 ICO 文件路径。从源码看MakerSquirrel 的配置类型直接继承electron-winstaller的Options见 packages/maker/squirrel/src/MakerSquirrel.ts并在make()中通过{ ...this.config, ... }合并透传给createWindowsInstaller见 MakerSquirrel.make()因此这两个字段即electron-winstaller的原生选项。electron-forge/maker-debDebian/Ubuntu.deboptions.icon打包进.deb的应用图标单张图片路径推荐.png字段定义见 packages/maker/deb/src/Config.ts。electron-forge/maker-dmgmacOS 磁盘映像iconDMG 窗口内显示的 app 图标路径使用.icns。MakerDMG 的配置类型继承自electron-installer-dmg的ElectronInstallerDMGOptions见 packages/maker/dmg/src/Config.ts其单测也验证了配置与createDMG调用之间的透传关系见 packages/maker/dmg/spec/MakerDMG.spec.ts。electron-forge/maker-wixWindows MSIiconMSI 安装程序使用的 ICO 文件。MakerWix 的配置类型继承自electron-wix-msi的MSICreatorOptions见 packages/maker/wix/src/Config.ts同样属于底层库的原生选项。需要了解各 Maker 的完整配置项可查阅仓库内的 Makers 配置文档其中 squirrel.windows.md、deb.md、dmg.mdx、wix-msi.md 等子页分别对应各 Maker。完成安装程序图标配置后同样使用 Make 命令构建项目。故障排查图标不更新先刷新系统图标缓存各操作系统都有图标缓存机制。如果修改图标后界面仍显示旧图标或默认图标推荐先重置缓存。Windows 刷新图标缓存Windows 会把所有应用程序图标缓存到一个隐藏的「图标缓存数据库」中。如果 Electron 应用的图标没有正确显示可以通过系统自带的ie4uinit.exe工具使缓存失效ie4uinit.exe -show该命令会触发系统重新加载并重建图标缓存执行后若仍不生效通常还需重启资源管理器任务管理器中对「Windows 资源管理器」右键选择「重新启动」或注销再登录系统让缓存彻底重建。macOSlsregister/ 重建 LaunchServices 数据库与 LinuxGTK/Qt 图标主题缓存也有各自的图标缓存修改图标后建议重启桌面环境或执行对应缓存清理命令确认效果。小结一套图标配置的最小清单目标平台应用图标packagerConfig安装程序图标Maker configWindowsicon: /path/to/icon自动补.ico256x256maker-squirreliconUrlsetupIconmaker-wixicon均用.icomacOS单个icon推断.icns或数组[icon.icns, icon.icon]maker-dmgicon.icnsLinux无图标由 Maker 与主进程设置maker-deboptions.icon.png512x512另需在主进程new BrowserWindow({ icon })中重复配置实操顺序建议先准备 1024x1024 源图 → 按上表转换出.icns/.ico/.png高分屏需求可补2x系列→ 在packagerConfig与各 Makerconfig中填写路径 → 执行npm run make生成并验证产物 → 若图标未更新则刷新系统图标缓存。赞分享开发工具桌面应用前端构建【免费下载链接】forge:electron: A complete tool for building and publishing Electron applications项目地址https://gitcode.com/gh_mirrors/fo/forge点击查看免费下载相关推荐MagiskBootAndroid 启动镜像解包与重打包的 4 个关键步骤MagiskBootAndroid 启动镜像解包与重打包的 4 个关键步骤 Meta DescriptionMagiskBoot 是 Magisk 自带的启移动开发系统底层跨平台应用图标全攻略electron-vue图标设计与自动化生成方案跨平台应用图标全攻略electron vue图标设计与自动化生成方案 你是否还在为Electron应用的图标适配问题头疼不同操作系统需要不同尺寸、不同格式的前端桌面应用Rofi图标配置终极指南如何完美显示应用图标与自定义图标Rofi图标配置终极指南如何完美显示应用图标与自定义图标 Rofi作为Linux桌面环境中强大的应用启动器和窗口切换器其图标支持功能让用户体验更加直观和美观CLI上一篇【亲测免费】 探索YUV视频播放的新境界YUV播放器推荐下一篇EhLib v10.2.42Delphi 和 C Builder 开发者的利器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考