Electron开发实战之记账软件5——制作ico格式的logo

最新推荐文章于 2024-06-07 16:11:48 发布
最新推荐文章于 2024-06-07 16:11:48 发布
阅读量417 收藏 1
点赞数
文章标签： photoshop
原文链接：https://my.oschina.net/u/3667677/blog/3041685
版权

代码仓库： https://github.com/hilanmiao/LanMiaoDesktop

制作ico格式的logo

跟网站的favicon.icon一样，桌面端也需要像这种俄罗斯套娃一般的图标，图标有不同的尺寸来适用不同的情况，例如256256,6464等。window下是.ico,mac下是.icns,打包的build文件下我们能看到

首先你需要有一个自己的logo，格式为png。然后用 IcoFx3 工具打开你的logo，然后选择创建 Windows 图标，最后保存即可。当然你也可以用别的工具，例如Photoshop。

替换系统logo

放到两个地方： 1.build文件夹下的icons，这里是部署单独用的 2.放到static文件夹下面，这里是给系统内部用的

转载于:https://my.oschina.net/u/3667677/blog/3041685

chenggedian7759
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
electron配置应用icon（五）
赵盛的博客
06-06 7699
在打包electron应用程序的时候，如果没有配置icon，那么打出来的包图标就会是默认的。下面介绍一下如何创建自己的个性化图标。 设计图标 这里我用到了sketch，没有app的可以自行下载。 新建一个文档 创建一个宽高都为512的画板，画板内创建矩形。调整圆角，设置填充色。这里我用到了iconfont里面的图标，调整好比例。（不是专业设计师，能看就行） 设计完成后就可以导出了。 导出 选中画板，点击导出。导出png格式的文件即可。 转换图标格式 png格式是无法作为图标来使用的。mac上
5 分钟配置好 Electron 应用的图标
Becomin' Charles
02-28 4390
本文介绍了，如何给 Electron 的 App 配置一个图标，以及制作图标的工具和命令，还有各种操作系统的图标的技术规格。
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 推荐
electron打包应用logo及名称更改
最新发布
weixin_55639808的博客
06-07 361
应用图标 ico必须是源文件格式ico，尺寸256*256 **并注意路径一定要正确。
Electron应用图标的配置与生成
duzm200542901104的专栏
03-21 9651
electron修改项目打包后的exe图标和打开之后的窗口图标
electron-packager 将网页打包成桌面端应用设置icon不起作用，替换electron-packager默认图标
G佳伟
05-23 2582
electron-packager 将网页打包成桌面端应用设置icon不起作用，替换electron-packager默认图标，Electron在windows平台下需要使用 .ico 格式作为图标文件，而非 .png 或 .svg 格式，因此您应该将图标文件转换为 .ico 格式。此外，务必确保图像大小不大于 256x256 像素。
【基础】生成electron打包常用图标
weixin_38942461的博客
04-17 1503
在打包项目之前，要为项目准备图标。不同的操作系统所需图标的格式不同。例如Mac对应的格式为icns、png，Windows对应的格式为ico。png基本通用Mac和Windows。1.首先，准备一张高清的png图片，将图片放在项目文件夹中，例如public文件夹中。2.安装 electron-icon-builder。文件夹中生成一系列打包所需的图标文件。
Electron开发实战1
08-03
Electron 是由GitHub开发的一款开源框架，用于构建跨平台的桌面GUI应用。它结合了Node.js（提供后端能力）和Chromium（提供前端界面）的功能，使得开发者可以用HTML、CSS和JavaScript进行桌面应用的开发。知名项目如...
Electron实战教程（初级）
06-30
Electron作为一个优秀的跨平台桌面开源框架，吸引了大量从事原生客户端开发和前端开发的同学涉足。Electron学习的过程存在两个门槛，一是入门，二是进阶。据以往的经验，只要你能够入门并适应Electron开发的流程，就...
详解Webpack实战之构建 Electron 应用
11-29
Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用，由 Github 主导和开源，大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。 Electron 是 Node.js 和 Chromium 浏览器的结合体，用 ...
electron-egg桌面软件开发框架.rar
07-06
嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。 某某说：我们的应用要兼容多个平台，原生开发...
Electron无边框窗口（最小化、最大化、关闭、拖动）以及动态改变窗口大小
06-09
对应博客地址：https://blog.csdn.net/fukaiit/article/details/91351448 包括Electron无边框窗口原型和核心代码
Electron实战系列六：应用图标生成
m0_68635815的博客
02-17 329
基于electron-forge。
在vue项目中使用electron,生成桌面图标，快速打开系统
fang0321的博客
09-07 1946
在vue项目中使用electron,生成桌面图标，快速打开系统
electron 左上角图标 dev(开发环境)可显示 build(打包)后无法显示
qq_45831414的博客
09-14 878
ico是Iconfile的缩写，是Windows计算机中的一种图标文件格式，一般我们电脑桌面上显示的快捷方式就是这种格式的图标。一个ico文件实际上是多张不同尺寸图片的集合体，根据应用场景的不同自动选择合适的图片格式。知道ico文件的含义后，便能明白无法显示是因为我们之前的ico文件中不包含左上角那种尺寸的图片，因而无法加载图标，所以只要富集多种尺寸，即可解决问题。先说解决方法，用于作为图标的ico文件需要富集多种尺寸，必须包含256*256，且同时应当包含其他更小的尺寸。接下来解释一下这么做的原因。
Electron修改图标
热门推荐
Zheng.Zeng的博客
04-23 3万+
一：前言      首先，大家需要知道：electron的ico更换过程，是发生在最后的打包阶段，而不是开发过程中的。也就是说，大多数情况下，这个图标是打包的时候决定的。二：操作      ①把要修改的图标放入工程里面，图标必须是ico格式   ②执行打包命令还不懂怎么打包的可以参考点击打开链接在打包的基础上加上--icon=图标路径，回车就可以看到以下界面就这么简单，图标就修改成功了!...
关于electron在打包项目时如何更换所有的应用程序图标.ico
weixin_41262999的博客
10-06 5236
关于electron在打包(electron-builder)项目时如何更换图标 之前在打包项目时，没想那么多，能打包成功并运行即可，也许是强迫症吧，看这个默认图标就有些不耐烦了，就网上找找方法，于是自己做了一个 .ico 文件。 这里先提供 .png转.ico格式教程： https://jingyan.baidu.com/article/aa6a2c148372210d4c19c4ba.html ----------------------------------转成--------------
研究关于如何在Electron里从内存读取ico文件并显示的麻烦问题
panzhiyi3的专栏
11-24 1738
    最近在做一个文件夹相关应用，能够显示文件夹中的所有文件和文件夹，并能正确显示缩略图，首先关于如何获取正确的Windows文件/文件夹/系统图标缩略图本身是一个复杂的工作，Electron提供的app.getFileIcon完全没法用，拿到的是32*32小图标，而且无法拿到文件夹图标，因此此处我们开发了一个dll的native module给Electron app调用，此处步骤省略。  ...
Electron 项目（五）：打包图标
07-12 5052
设置图标： "electronPackagerConfig": { "packageManager": "npm", "icon": "src/assets/img/icon.ico" }, package 结果： 安装结果：
electron项目开发实战
09-12
对于 Electron 项目的开发实战，有很多方面需要考虑，包括项目的结构、界面设计、数据处理等。以下是一些常见的实践建议： 1. 项目结构：创建一个清晰的项目结构，将主进程和渲染进程的代码分开放置，并使用合适的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值