electron 应用图标修改

最新推荐文章于 2024-03-19 19:30:05 发布
最新推荐文章于 2024-03-19 19:30:05 发布
阅读量1.7k 收藏 2
点赞数 2
文章标签： electron javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A_man_of_ideas/article/details/134731382
版权

  • 修改窗口图标

  • 更换Electron应用程序的桌面图标

  1. 准备好你想要作为图标的图片文件，可以是PNG格式
  2. 安装一个可以转换图片格式为ICO的工具，例如在线转换工具“在线转换icon图标工具”。将你的PNG图片文件上传并转换为ICO格式
  3. 将转换得到的ICO文件放到你的Electron项目的public或assets文件夹中（桌面应用图标要求大小不能超过256*256这个，且后缀为【.ico】,将图标放到固定文件目录中（自建））
  4. 在package.json文件中，找到"build"字段，添加"icon"字段并设置其值为你的ICO文件的路径
  6. 运行npm run build或yarn build命令来重新构建你的Electron应用程序
  7. 完成构建后，你的Electron应用程序的桌面图标应该已经更换为你选择的图标了
摆烂程序鱼
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Electron如何修改图标
qq_2422941992的博客
02-08 5955
问题：在electron的icon更换过程，是发生在最后的打包阶段，而不是开发过程中的。也就是说，大多数情况下，这个图标是打包的时候决定的。 解决： 1、把要修改的图标放入工程里面，图标必须是ico格式 2、执行打包命令还不懂怎么打包的可以参考点击打开链接 在打包的基础上加上--icon=图标路径，回车就可以可以了 [毕业设计][期末作业]二手闲置小程...
electron-icon-maker:图标生成器，用于生成电子封装所需的所有图标文件
05-02
电子制造者 全球使用 使用进行全局安装 npm install -g electron-icon-maker 使用 electron-icon-maker --input=/absolute/path/file.png --output=./relative/path/to/folder 本地使用 本地安装 npm install --save-dev electron-icon-maker 使用 ./node_modules/.bin/electron-icon-maker --input=/absolute/path/file.png --output=./relative/path/to/folder 争论 --output, -o = [String] Folder to create files --input, -i = [String] Path to PNG file 推荐
electorn更换窗口图标
任磊
10-23 8149
在用electron开发桌面端的时候，打包成exe文件，需要更改默认的图标： 具体做法： 在根目录新建新建存放icon图标的目录： 需要两个icon：icon.icns，icon.ico 注意： 1、这两个图标大小不能256*256 2、不能直接用png的图片，把后缀改为.ico 否则会报错（可以到在线生成icon的网站上传下载） 改配置文件：根目录下 package.json 重新打包，就发现生成的exe文件的图片改变了。 但是，打包后运行发现， 窗口的图标并未改变，那么.
electron桌面应用图标更改
最新发布
qq_44741577的博客
03-19 800
重新打包，安装后就是新图标了。完成后会在根目录多出来一个。
electron修改vue项目打包后的exe图标
xi1213的博客
03-06 4498
vue用electron打包点击这里 安装electron-icon-builder 添加图标生成器：npm i electron-icon-builder 生成图标 1、在package.json的scripts中添加一条命令并保存： “electron:generate-icons”: “electron-icon-builder --input=./public/icon.png --output=build --flatten” 2、将你准备的图片命名为icon.png并复制到public目录下
Electron修改图标
热门推荐
Zheng.Zeng的博客
04-23 3万+
一：前言      首先，大家需要知道：electron的ico更换过程，是发生在最后的打包阶段，而不是开发过程中的。也就是说，大多数情况下，这个图标是打包的时候决定的。二：操作      ①把要修改的图标放入工程里面，图标必须是ico格式   ②执行打包命令还不懂怎么打包的可以参考点击打开链接在打包的基础上加上--icon=图标路径，回车就可以看到以下界面就这么简单，图标就修改成功了!...
Electron-vue 关于图标的修改
mm_0123456789的博客
04-28 6712
electron-vue 图标 提示：图标包括：启动项目时桌面主题图标，窗口左上角图标，菜单栏图标，系统托盘图标，打包安装图标、开始菜单图标、快捷方式图标等。 文章目录electron-vue 图标1. 启动项目默认图标与窗口左上角图标2. 菜单栏图标3. 系统托盘图标4. 打包安装包图标5. 开始菜单图标和快捷方式图标总结 1. 启动项目默认图标与窗口左上角图标 这两个图标均由 mainWindow 的 icon 属性决定： 代码如下（示例）： mainWindow = new BrowserWi
Electron设置窗口图标、设置桌面快捷方式图标
BigFamer的博客
10-26 2万+
一、前言 在开发一款桌面应用时，设置窗口图标和桌面快捷方式图标是两个必须的需求。下面来看看我基于Electron开发的实际项目中是如何配置最终实现了这个需求吧。 二、实现设置窗口图标和桌面快捷方式图标 1、准备好你的Icon图标 要得到一个icon图标十分简单，你需要有一张目标图标的png格式图片，然后找一个可以免费在线转换icon图标的网站转换下载即可，这里我提供一个我用过的很不错的在线转换工具：在线转换icon图标工具。 这里需要说明一下，有的童鞋可能在纠结转换成多大的图标才可以呢？ 我的快捷方式图标
【electron】 打包应用修改图标和进程名字
kinghzking的专栏
11-20 5635
这个一般是文件被打开或者VSCode等工具占用了该文件，关闭掉相应进程就行了。在网上找了两个网站，都可以制作icon，但是第二个最大只能制作。制作一个大于等于256*256的icon。resources\app.asar占用。制作一个大于等于256*256的icon。resources\app.asar占用。icon必现大于等于 256*256。icon必现大于等于 256*256。icon图标要包含各种分辨率的。icon图标要包含各种分辨率的。修改package.json。修改package.json。
Electron应用图标的配置与生成
duzm200542901104的专栏
03-21 8544
electron修改项目打包后的exe图标和打开之后的窗口图标
electron-packager 将网页打包成桌面端应用设置icon不起作用，替换electron-packager默认图标
G佳伟
05-23 2377
electron-packager 将网页打包成桌面端应用设置icon不起作用，替换electron-packager默认图标，Electron在windows平台下需要使用 .ico 格式作为图标文件，而非 .png 或 .svg 格式，因此您应该将图标文件转换为 .ico 格式。此外，务必确保图像大小不大于 256x256 像素。
2014-12-16-关于更换应用程序图标的问题
12-16
首先，我是把软件安装在手机上测试的，不是在模拟器上。当我想更改应用程序图标时，我首先按以下步骤操作了： 在res/drawable-hdpi或res/drawable-ldpi或res/drawable-mdpi目录下，加下你要显示的图片，最好后缀是为.png的，然后修改AndroidManifest.xml文件，里面有这样一行代码<application android:icon="@drawable/icon" android:label="@string/app_name">，把它改为<application android:icon="@drawable/***" android:label="@string/app_name">（“***”表示你放入的图片的名，比如你放入app.png，那么就是android:icon="@drawable/app"） 记得在AndroidManifest.xml文件中把所有activity中的icon的属性都改为你的图片@drawable/***。 然后发现程序运行页面的图标更改成功了，但是桌面上的应用程序图标还是原来的。 原因：手机中之前安装过这个软件，在手机中存有原来这个软件的图标，当我们换图标时，它直接调用原来版本的软件的图标。 解决办法：使用杀毒软件或者手机管家等清理手机垃圾缓存等即可解决。  
Apps.Electron:使用 Electron 构建应用程序发行版的种子
08-05
Apps.Electron 使用 Electron 构建“桌面”应用程序发行版以便在 macOS、Windows 和 Linux 上运行良好的种子 脚步： 将此 repo 克隆到您的计算机 将应用程序的所有准备就绪文件复制到文件夹“src/app-primary” 将图标（在“build”文件夹中）替换为您的应用程序图标 - 如果您需要从 PNG 图像创建图标文件，请使用此转换工具 ( ) 键入“npm install”以安装所有依赖项（当然，在项目文件夹的终端/命令提示符中） 输入“npm run electron”来测试你的包含 Electron 的“桌面”应用程序 输入“npm run electron-build”来构建你的应用程序的发行版（macOS、Windows 和 Linux） 打开名为“dist”的文件夹以查看“桌面”应用程序的分布。 更多信息： 修改p
在Linux上自动安装Nativefier（Electron）Web应用程序的脚本（遵循Freedesktop规范）-Linux开发
05-27
nativefier-freedesktop遵循Freedesktop规范的脚本，用于在Linux上自动安装Nativefier（Electron）Web应用程序。 使用此脚本构建的Web应用程序示例（位于phabricator.kde.org上的KDE Phabricator）nativefier-freedesktop脚本，用于按照Freedesktop规范在Linux上自动安装Nativefier（Electron）Web应用程序。 使用此脚本构建的Web App的示例（位于phabricator.kde.org上的KDE Phabricator）：可以从带有可修改图标的应用程序菜单中启动，它使用自定义CSS和本机通知：简介Nativefier是一个可自动构建Web应用程序的脚本从URL开始使用Electron技术。 它使用便携式Web应用程序创建一个文件夹。 目的
ElectronReactApp:适用于Electron + React应用程序的轻量级样板
04-27
ElectronReactApp 适用于Electron + React应用程序的轻量型样板模板。 它支持桌面应用程序所期望的所有基本功能，但是您无需编写代码即可完成此操作。 （仅专注于编写自己的应用程序。）现成的支持： 热重载（无需刷新即可查看代码更改） 本地范围CSS模块（） 应用程序图标（只切换图像） 菜单（加上键盘快捷键即可使用） 非常简单的运行和构建命令 仅在dev或prod中运行代码的选项 如何使用 # Clone the repo git clone https://github.com/zvphy/ElectronReactApp # Enter the project cd ElectronReactApp # Install dependencies npm install 怎么跑 npm start 这将打开Electron，生成文件，并允许热重装。 入
电子窗口徽章：Electron Windows Badge插件，用于访问和修改Windows中应用程序图标的徽章编号
02-04
电子窗徽章 Electron Windows Badge插件可访问和修改Windows中应用程序图标的徽章编号。 安装 $ npm i电子窗口徽章-保存 用法 1) Require electron-windows-badge in your main process: const Badge = require('electron-windows-badge'); 2) Initialize new object of badge while creating window: function createWindow () { win = new Brows
electron 修改修改应用默认图标
九段刀客的博客
03-21 5286
1、安装生成icon图标依赖 npm install electron-icon-builder --save-dev 2、配置启动命令 "scripts": { "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten" }, 3、生成icon yarn electron:generate-icons 完成后会在根目录多出来一个build目录
Electron实战系列六：应用图标生成
m0_68635815的博客
02-17 263
基于electron-forge。
electron修改图标
10-11
要修改 Electron 应用程序的图标，需要在应用程序的 package.json 文件中指定新图标的路径，然后在主进程代码中使用 `app` 模块的 `setIcon` 方法设置新的图标。示例代码如下： ```js const { app } = require('electron') const path = require('path') const newIconPath = path.join(__dirname, 'new_icon.png') app.setIcon(newIconPath) ``` 在上面的代码中，`__dirname` 表示当前文件所在目录，`new_icon.png` 是新图标的文件名，需要将其放在应用程序的资源目录中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值