尧图网站建设 
Zettlr 图标资源全解析从 Logo 源文件到多平台打包产物的完整指南【免费下载链接】ZettlrYour One-Stop Publication Workbench项目地址: https://gitcode.com/GitHub_Trending/ze/ZettlrZettlr 是开源桌面级 Markdown 编辑器与科研写作工作台Your One-Stop Publication Workbench其官方 Logo 与整套图标资产统一存放于 resources/icons 目录。本文以该目录下的 README.md 为主体结合electron-builder.yml、forge.config.js 等打包配置与构建脚本系统梳理图标文件的用途、企业形象CI规范、各平台打包产物的生成链路以及图标再使用的许可边界帮助开发者在二次开发、插件化定制或独立打包分发时快速定位正确的图标资源。图标资产目录总览一份文件清单resources/icons/是 Zettlr 官方 Logo 的唯一权威来源同时存放了从原始设计稿到各平台最终打包产物的全部中间与交付文件。官方文档给出的完整清单如下路径说明icon.xcfLogo 的原始源文件GIMP 工程文件png/从 16px 到 1024px 的多种尺寸 PNG 导出icon.ico面向 Windows 的 ICO 导出icon.icns面向 macOS 的 ICNS 导出icon.code.icns面向 macOS 的 ICNS 导出专用于代码文件的可视化标识dmg/dmg_back.xcfmacOS DMG 安装包背景的原始源文件dmg/dmg_back.tiff编译生成的 macOS DMG 背景 TIFFdmg/dmg_back1x.png、dmg_back2x.png、dmg_back3x.png三种不同分辨率的源图用于编译最终 TIFFdmg/tiffutil.sh将三张源图编译为最终 TIFF 的小脚本仅 macOS 可用从仓库实际内容看该目录还补充了文档中未逐项列出的辅助资产包括 png.develop/开发版图标、macOS-menubar/菜单栏模板图标、icns/ICNS 生成说明与 iconset 源文件、Zettlr.icon/与Zettlr.nightly.icon/macOS Liquid Glass 图标工程、Assets.carmacOS 编译后的图标资源包以及 compile-macos-icon.shAssets.car 编译脚本下文将逐一展开。多尺寸 PNG 导出从 16px 到 1024pxpng/目录按尺寸命名存放了 10 种 PNG 导出覆盖桌面图标、安装程序图标与渲染层引用的全部场景16px、24px、32px、48px、64px、96px、128px、256px、512px、1024px这些尺寸并非冗余Electron 应用在不同平台与不同 UI 场景Dock、任务栏、窗口标题栏、文件管理器缩略图、应用内欢迎页需要不同分辨率的位图且高 DPI 显示器要求2x级别的密度支持。仓库内的实际引用点可以印证其用途README.md 首页徽标使用resources/icons/png/1024x1024.pngsource/win-onboarding/App.vue 引导窗口使用png/64x64.pngsource/win-onboarding/pages/WelcomePage.vue 欢迎页标题使用png/256x256.pngsource/win-splash-screen/App.vue 启动屏使用png/128x128.pngwebpack.main.config.js 在打包时把整个png/目录复制进assets/icons/png供渲染进程运行时引用。平台专用格式ICO、ICNS 与代码文件图标Windowsicon.icoicon.ico是 Windows 兼容的 ICO 导出供 exe 可执行文件、NSIS 安装器与任务栏使用。electron-builder.yml 中 Windows 打包目标显式指定icon: ./resources/icons/icon.ico同时 webpack.main.config.js 会把 ICO 复制到打包产物的assets/icons目录。ICO 格式内部可以容纳多种尺寸的位图Windows 会按显示场景自动选择合适的分辨率。macOSicon.icns与icon.code.icnsmacOS 使用 ICNS 容器承载多分辨率图标。electron-builder.yml 为 DMG 目标指定icon: ./resources/icons/icon.icns。与之并列的icon.code.icns则是一个特殊设计根据 resources/icons/icns/README.md 的说明它用于 Apple Finder 中对文件类型的区分——Zettlr 能打开的代码文件不应与 Markdown 文件混淆因此代码文件图标由原图标经过色相偏移 80hue-shift of 80生成。在 forge.config.js 中icon.code.icns与Assets.car一起被作为 macOS 的extraResource打进安装包并在 scripts/assets/info.plist 的文件关联声明中被引用。icns/子目录还保留了 icon.iconset 与icon.code.iconset两套 iconset 源文件内含 16px、32px、512px、1024px 等关键尺寸的 PNG以及旧版图标icon.legacy.icns。官方说明特别提醒icon.legacy.icns是旧版 Logo不要删除以免破坏历史构建。这套 iconset 由 Marc Oliver Orth 提供并授权 Zettlr 使用。macOS 菜单栏模板图标macOS-menubar/存放tray-Template.png与tray-Template2x.png文件名中的Template后缀是 macOS 菜单栏模板图标的约定系统会根据菜单栏深浅色自动渲染。在 source/app/service-providers/tray/index.ts 中托盘实现直接引用assets/icons/macOS-menubar/tray-Template.png该目录同样由 webpack.main.config.js 在打包阶段复制到产物目录。企业形象CI规范原文档同时给出了 Logo 的设计规范Corporate Identity供开发者在任何需要复刻或校验品牌视觉的场合使用Logo 中的 Z 是小写 Zeta 字符ζUnicode 码点为U03B6字体Raleway Heavy颜色背景#1cb27eZettlr 品牌绿前景#ffffff白色。仓库中的图标工程文件可以印证这一配色resources/icons/Zettlr.icon/icon.json中定义的自动渐变填充色为display-p3:0.10980,0.69804,0.49412即 sRGB 下的#1cb27e与 CI 规范完全一致夜间/深色外观下 Logo 主体则填充srgb:0.10980,0.69804,0.49412并叠加玻璃质感glass: true、translucency 0.5。而 Zettlr.nightly.icon/icon.json 中夜间版的品牌色替换为display-p3:0.62745,0.38824,0.91765约#A063EA的紫色系用于区分 nightly 预发布版本与稳定版。多平台打包链路图标如何进入最终产物图标资源最终会通过三条链路进入安装包理解它们有助于排查图标没生效类问题electron-builder 链路Linux/Windows/部分 macOS 发布electron-builder.yml 中macOS 用icon.icns、Windows 用icon.ico、Linux 用整个png/目录icon: ./resources/icons/pngDMG 安装窗口背景用dmg/dmg_back.tiffElectron Forge 链路macOS 正式构建forge.config.js 通过packagerConfig.icon: ./resources/icons/icon让打包器按平台自动补全.icns/.ico并把icon.code.icns与Assets.car作为extraResource注入webpack 资源复制链路webpack.main.config.js 在主进程构建阶段把icon.ico、png/、macOS-menubar/复制到打包产物的assets/icons下供托盘、启动屏、引导页等运行时渲染引用。此外scripts/assets/zettlr-dev.desktop 为 Linux 桌面环境提供了开发版的 Desktop Entry图标指向resources/icons/png.develop/1024x1024.pngpng.develop/目录即开发版 Logo 的 PNG 序列另有icon.develop.xcf源文件用于区分开发构建与稳定版。macOS 图标编译工作流用 iconutil 从 iconset 生成 ICNS根据 resources/icons/icns/README.md在 macOS 上可以用系统自带命令从 iconset 目录程序化生成.icns$ iconutil -c icns /path/to/icon.iconset生成后需把结果文件移动到resources/icons/icon.icns构建工具链才能正确找到它。icns 由 iconset 内各尺寸 PNG 编译而成支持从 16px 到 1024px512x5122x的完整分辨率覆盖。用 actool 编译 Liquid Glass 图标Assets.car针对 macOS 新版 Liquid Glass 风格图标仓库提供了 compile-macos-icon.sh。脚本核心逻辑是调用 Xcode 的actool把Zettlr.icon图标工程编译为Assets.car资产目录actool ./resources/icons/Zettlr.icon --compile ./resources/icons \ --output-format human-readable-text --notices --warnings --errors \ --output-partial-info-plist $PLIST_PATH \ --app-icon Icon --include-all-app-icons \ --enable-on-demand-resources NO \ --development-region en \ --target-device mac --minimum-deployment-target 26.0 --platform macosx脚本注释中给出了与 Electron Forge 集成的建议工作流先用 Icon Composer 创建.icon工程并保存到磁盘 → 调用本脚本生成Assets.car→ 在packagerConfig.extraResource中提供Assets.car路径 → 在 PList或packagerConfig.extendInfo中设置CFBundleIconName为图标工程名不带.icon后缀这是actool编译后的资源名否则 macOS 无法在Assets.car中定位图标。Zettlr.icon/icon.json即是该图标工程的描述文件包含填充色、图层、阴影、半透明等视觉参数并限定supported-platforms为 macOS。用 tiffutil 编译 DMG 背景dmg/下的背景图是 macOS DMG 安装窗口的视觉底板。dmg/tiffutil.sh 内容即一条命令$ tiffutil -cathidpicheck dmg_back1x.png dmg_back2x.png dmg_back3x.png -out dmg_back.tiff-cathidpicheck会检查并整合三张不同分辨率1x/2x/3x对应 540×380、1080×760、2160×1520的源图生成多分辨率 TIFF使 DMG 背景在 Retina 等高分屏上依然清晰。最终产物dmg_back.tiff在 electron-builder.yml 中被指定为 DMG 窗口背景窗口尺寸为 540×400内含应用图标与/Applications快捷链接两个布局元素。许可证与使用规则All rights reserved原文档特别强调图标文件的许可边界图标源文件仅提供给使用者与官方便利for your and our convenience只能在符合官方图标使用规则的前提下使用官方保留对不符合其政策用途的限制权绝大多数情况下在 PR 中为改进应用而创建 Logo 衍生作品是被允许的细节可在 PR 中协商若对某个用例是否合规不确定可通过官方邮箱联系确认。需要说明的是这份许可约束针对的是resources/icons/下的品牌图标资产本身与仓库根目录的LICENSEGNU GPL v3见 electron-builder.yml 中copyright字段是两个层面GPL v3 约束的是应用代码而图标资产遵循其自有的保留所有权利规则。因此在为 Zettlr 提交衍生 Logo、制作插件图标或分发修改版时都应同时注意这两套规则的约束。实践小结围绕 resources/icons/README.md 给出的资产清单可以归纳出几条可直接落地的实践经验找品牌 Logo 素材原始设计稿看resources/icons/icon.xcf通用位图按需从resources/icons/png/取对应尺寸README 徽标建议用 1024px 版本配 macOS 打包主图标用resources/icons/icon.icns代码文件图标用resources/icons/icon.code.icns新版 Liquid Glass 图标用resources/icons/Assets.car由compile-macos-icon.sh生成DMG 背景用resources/icons/dmg/dmg_back.tiff配 Windows 打包统一使用resources/icons/icon.icoNSIS 安装器的头部与侧边栏位图位于 resources/NSIS/配 Linux 打包electron-builder 直接读取resources/icons/png/整目录开发版桌面入口则指向resources/icons/png.develop/校验品牌色稳定版主色为#1cb27e、夜间版为约#A063EA可对照Zettlr.icon/icon.json与Zettlr.nightly.icon/icon.json中的 fill 值遵守许可图标属保留所有权利PR 内衍生可协商其他用途先联系官方确认。【免费下载链接】ZettlrYour One-Stop Publication Workbench项目地址: https://gitcode.com/GitHub_Trending/ze/Zettlr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Zettlr 图标资源全解析：从 Logo 源文件到多平台打包产物的完整指南
Zettlr 图标资源全解析从 Logo 源文件到多平台打包产物的完整指南【免费下载链接】ZettlrYour One-Stop Publication Workbench项目地址: https://gitcode.com/GitHub_Trending/ze/ZettlrZettlr 是开源桌面级 Markdown 编辑器与科研写作工作台Your One-Stop Publication Workbench其官方 Logo 与整套图标资产统一存放于 resources/icons 目录。本文以该目录下的 README.md 为主体结合electron-builder.yml、forge.config.js 等打包配置与构建脚本系统梳理图标文件的用途、企业形象CI规范、各平台打包产物的生成链路以及图标再使用的许可边界帮助开发者在二次开发、插件化定制或独立打包分发时快速定位正确的图标资源。图标资产目录总览一份文件清单resources/icons/是 Zettlr 官方 Logo 的唯一权威来源同时存放了从原始设计稿到各平台最终打包产物的全部中间与交付文件。官方文档给出的完整清单如下路径说明icon.xcfLogo 的原始源文件GIMP 工程文件png/从 16px 到 1024px 的多种尺寸 PNG 导出icon.ico面向 Windows 的 ICO 导出icon.icns面向 macOS 的 ICNS 导出icon.code.icns面向 macOS 的 ICNS 导出专用于代码文件的可视化标识dmg/dmg_back.xcfmacOS DMG 安装包背景的原始源文件dmg/dmg_back.tiff编译生成的 macOS DMG 背景 TIFFdmg/dmg_back1x.png、dmg_back2x.png、dmg_back3x.png三种不同分辨率的源图用于编译最终 TIFFdmg/tiffutil.sh将三张源图编译为最终 TIFF 的小脚本仅 macOS 可用从仓库实际内容看该目录还补充了文档中未逐项列出的辅助资产包括 png.develop/开发版图标、macOS-menubar/菜单栏模板图标、icns/ICNS 生成说明与 iconset 源文件、Zettlr.icon/与Zettlr.nightly.icon/macOS Liquid Glass 图标工程、Assets.carmacOS 编译后的图标资源包以及 compile-macos-icon.shAssets.car 编译脚本下文将逐一展开。多尺寸 PNG 导出从 16px 到 1024pxpng/目录按尺寸命名存放了 10 种 PNG 导出覆盖桌面图标、安装程序图标与渲染层引用的全部场景16px、24px、32px、48px、64px、96px、128px、256px、512px、1024px这些尺寸并非冗余Electron 应用在不同平台与不同 UI 场景Dock、任务栏、窗口标题栏、文件管理器缩略图、应用内欢迎页需要不同分辨率的位图且高 DPI 显示器要求2x级别的密度支持。仓库内的实际引用点可以印证其用途README.md 首页徽标使用resources/icons/png/1024x1024.pngsource/win-onboarding/App.vue 引导窗口使用png/64x64.pngsource/win-onboarding/pages/WelcomePage.vue 欢迎页标题使用png/256x256.pngsource/win-splash-screen/App.vue 启动屏使用png/128x128.pngwebpack.main.config.js 在打包时把整个png/目录复制进assets/icons/png供渲染进程运行时引用。平台专用格式ICO、ICNS 与代码文件图标Windowsicon.icoicon.ico是 Windows 兼容的 ICO 导出供 exe 可执行文件、NSIS 安装器与任务栏使用。electron-builder.yml 中 Windows 打包目标显式指定icon: ./resources/icons/icon.ico同时 webpack.main.config.js 会把 ICO 复制到打包产物的assets/icons目录。ICO 格式内部可以容纳多种尺寸的位图Windows 会按显示场景自动选择合适的分辨率。macOSicon.icns与icon.code.icnsmacOS 使用 ICNS 容器承载多分辨率图标。electron-builder.yml 为 DMG 目标指定icon: ./resources/icons/icon.icns。与之并列的icon.code.icns则是一个特殊设计根据 resources/icons/icns/README.md 的说明它用于 Apple Finder 中对文件类型的区分——Zettlr 能打开的代码文件不应与 Markdown 文件混淆因此代码文件图标由原图标经过色相偏移 80hue-shift of 80生成。在 forge.config.js 中icon.code.icns与Assets.car一起被作为 macOS 的extraResource打进安装包并在 scripts/assets/info.plist 的文件关联声明中被引用。icns/子目录还保留了 icon.iconset 与icon.code.iconset两套 iconset 源文件内含 16px、32px、512px、1024px 等关键尺寸的 PNG以及旧版图标icon.legacy.icns。官方说明特别提醒icon.legacy.icns是旧版 Logo不要删除以免破坏历史构建。这套 iconset 由 Marc Oliver Orth 提供并授权 Zettlr 使用。macOS 菜单栏模板图标macOS-menubar/存放tray-Template.png与tray-Template2x.png文件名中的Template后缀是 macOS 菜单栏模板图标的约定系统会根据菜单栏深浅色自动渲染。在 source/app/service-providers/tray/index.ts 中托盘实现直接引用assets/icons/macOS-menubar/tray-Template.png该目录同样由 webpack.main.config.js 在打包阶段复制到产物目录。企业形象CI规范原文档同时给出了 Logo 的设计规范Corporate Identity供开发者在任何需要复刻或校验品牌视觉的场合使用Logo 中的 Z 是小写 Zeta 字符ζUnicode 码点为U03B6字体Raleway Heavy颜色背景#1cb27eZettlr 品牌绿前景#ffffff白色。仓库中的图标工程文件可以印证这一配色resources/icons/Zettlr.icon/icon.json中定义的自动渐变填充色为display-p3:0.10980,0.69804,0.49412即 sRGB 下的#1cb27e与 CI 规范完全一致夜间/深色外观下 Logo 主体则填充srgb:0.10980,0.69804,0.49412并叠加玻璃质感glass: true、translucency 0.5。而 Zettlr.nightly.icon/icon.json 中夜间版的品牌色替换为display-p3:0.62745,0.38824,0.91765约#A063EA的紫色系用于区分 nightly 预发布版本与稳定版。多平台打包链路图标如何进入最终产物图标资源最终会通过三条链路进入安装包理解它们有助于排查图标没生效类问题electron-builder 链路Linux/Windows/部分 macOS 发布electron-builder.yml 中macOS 用icon.icns、Windows 用icon.ico、Linux 用整个png/目录icon: ./resources/icons/pngDMG 安装窗口背景用dmg/dmg_back.tiffElectron Forge 链路macOS 正式构建forge.config.js 通过packagerConfig.icon: ./resources/icons/icon让打包器按平台自动补全.icns/.ico并把icon.code.icns与Assets.car作为extraResource注入webpack 资源复制链路webpack.main.config.js 在主进程构建阶段把icon.ico、png/、macOS-menubar/复制到打包产物的assets/icons下供托盘、启动屏、引导页等运行时渲染引用。此外scripts/assets/zettlr-dev.desktop 为 Linux 桌面环境提供了开发版的 Desktop Entry图标指向resources/icons/png.develop/1024x1024.pngpng.develop/目录即开发版 Logo 的 PNG 序列另有icon.develop.xcf源文件用于区分开发构建与稳定版。macOS 图标编译工作流用 iconutil 从 iconset 生成 ICNS根据 resources/icons/icns/README.md在 macOS 上可以用系统自带命令从 iconset 目录程序化生成.icns$ iconutil -c icns /path/to/icon.iconset生成后需把结果文件移动到resources/icons/icon.icns构建工具链才能正确找到它。icns 由 iconset 内各尺寸 PNG 编译而成支持从 16px 到 1024px512x5122x的完整分辨率覆盖。用 actool 编译 Liquid Glass 图标Assets.car针对 macOS 新版 Liquid Glass 风格图标仓库提供了 compile-macos-icon.sh。脚本核心逻辑是调用 Xcode 的actool把Zettlr.icon图标工程编译为Assets.car资产目录actool ./resources/icons/Zettlr.icon --compile ./resources/icons \ --output-format human-readable-text --notices --warnings --errors \ --output-partial-info-plist $PLIST_PATH \ --app-icon Icon --include-all-app-icons \ --enable-on-demand-resources NO \ --development-region en \ --target-device mac --minimum-deployment-target 26.0 --platform macosx脚本注释中给出了与 Electron Forge 集成的建议工作流先用 Icon Composer 创建.icon工程并保存到磁盘 → 调用本脚本生成Assets.car→ 在packagerConfig.extraResource中提供Assets.car路径 → 在 PList或packagerConfig.extendInfo中设置CFBundleIconName为图标工程名不带.icon后缀这是actool编译后的资源名否则 macOS 无法在Assets.car中定位图标。Zettlr.icon/icon.json即是该图标工程的描述文件包含填充色、图层、阴影、半透明等视觉参数并限定supported-platforms为 macOS。用 tiffutil 编译 DMG 背景dmg/下的背景图是 macOS DMG 安装窗口的视觉底板。dmg/tiffutil.sh 内容即一条命令$ tiffutil -cathidpicheck dmg_back1x.png dmg_back2x.png dmg_back3x.png -out dmg_back.tiff-cathidpicheck会检查并整合三张不同分辨率1x/2x/3x对应 540×380、1080×760、2160×1520的源图生成多分辨率 TIFF使 DMG 背景在 Retina 等高分屏上依然清晰。最终产物dmg_back.tiff在 electron-builder.yml 中被指定为 DMG 窗口背景窗口尺寸为 540×400内含应用图标与/Applications快捷链接两个布局元素。许可证与使用规则All rights reserved原文档特别强调图标文件的许可边界图标源文件仅提供给使用者与官方便利for your and our convenience只能在符合官方图标使用规则的前提下使用官方保留对不符合其政策用途的限制权绝大多数情况下在 PR 中为改进应用而创建 Logo 衍生作品是被允许的细节可在 PR 中协商若对某个用例是否合规不确定可通过官方邮箱联系确认。需要说明的是这份许可约束针对的是resources/icons/下的品牌图标资产本身与仓库根目录的LICENSEGNU GPL v3见 electron-builder.yml 中copyright字段是两个层面GPL v3 约束的是应用代码而图标资产遵循其自有的保留所有权利规则。因此在为 Zettlr 提交衍生 Logo、制作插件图标或分发修改版时都应同时注意这两套规则的约束。实践小结围绕 resources/icons/README.md 给出的资产清单可以归纳出几条可直接落地的实践经验找品牌 Logo 素材原始设计稿看resources/icons/icon.xcf通用位图按需从resources/icons/png/取对应尺寸README 徽标建议用 1024px 版本配 macOS 打包主图标用resources/icons/icon.icns代码文件图标用resources/icons/icon.code.icns新版 Liquid Glass 图标用resources/icons/Assets.car由compile-macos-icon.sh生成DMG 背景用resources/icons/dmg/dmg_back.tiff配 Windows 打包统一使用resources/icons/icon.icoNSIS 安装器的头部与侧边栏位图位于 resources/NSIS/配 Linux 打包electron-builder 直接读取resources/icons/png/整目录开发版桌面入口则指向resources/icons/png.develop/校验品牌色稳定版主色为#1cb27e、夜间版为约#A063EA可对照Zettlr.icon/icon.json与Zettlr.nightly.icon/icon.json中的 fill 值遵守许可图标属保留所有权利PR 内衍生可协商其他用途先联系官方确认。【免费下载链接】ZettlrYour One-Stop Publication Workbench项目地址: https://gitcode.com/GitHub_Trending/ze/Zettlr创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考