如何为Electron应用创建带图标的桌面快捷方式？

一、ICO 文件准备与使用 #

• 制作兼容多尺寸的ICO文件，建议包含16x16、32x32、48x48、256x256像素的图层，确保在系统不同缩放比例下显示正常。
• 将ICO文件放置在项目静态资源目录，比如新建resources/icons/文件夹，把app.ico存入其中。

二、代码放置位置：主进程 #

创建桌面快捷方式属于系统级操作，必须在主进程文件（如main.js/main.ts）中编写，渲染进程无相关权限。

三、具体实现方式 #

方式1：手动触发创建（开发/调试场景） #

利用Electron内置的shell和app模块，配合path处理路径：

const { app, shell } = require('electron');
const path = require('path');

// 封装创建快捷方式的函数
async function makeDesktopShortcut() {
  const shortcutConfig = {
    target: process.execPath, // 指向应用可执行文件
    args: '', // 启动参数，无需求则留空
    icon: path.join(__dirname, 'resources/icons/app.ico'), // ICO文件路径
    iconIndex: 0, // ICO文件内的图标索引，默认0即可
    description: '自定义应用描述',
    appUserModelId: app.name // Windows系统必须配置，否则快捷方式可能异常
  };

  try {
    const shortcutPath = path.join(app.getPath('desktop'), '我的应用');
    await shell.writeShortcutLink(shortcutPath, shortcutConfig);
    console.log('快捷方式创建成功');
  } catch (err) {
    console.error('创建失败:', err);
  }
}

// 可在应用就绪后调用，或通过菜单/IPC从渲染进程触发
app.whenReady().then(() => {
  // 开发环境可直接调用测试
  // makeDesktopShortcut();
});

方式2：打包时自动创建（生产环境推荐） #

若使用electron-builder打包，直接在package.json中配置即可，无需额外编写代码：

{
  "build": {
    "win": {
      "icon": "resources/icons/app.ico", // Windows平台指定ICO文件
      "target": "nsis"
    },
    "mac": {
      "icon": "resources/icons/app.icns" // macOS平台使用ICNS格式
    },
    "linux": {
      "icon": "resources/icons/" // Linux平台放置PNG图标，自动识别尺寸
    },
    "nsis": {
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "我的Electron应用" // 快捷方式显示名称
    }
  }
}

用户安装应用时，会自动在桌面和开始菜单生成带图标的快捷方式。

四、避坑提示 #

• 路径适配：打包后__dirname指向会变化，建议用app.getAppPath()获取应用根路径，示例：

icon: path.join(app.getAppPath(), 'resources/icons/app.ico')

• 跨平台兼容：Windows仅支持ICO，macOS用ICNS，Linux用PNG，electron-builder会自动处理不同平台的图标适配。
• Windows权限：创建快捷方式可能需要管理员权限，可在nsis配置中添加"requestExecutionLevel": "highestAvailable"。

内容的提问来源于stack exchange，提问作者Shivam