在适配 iOS 深色模式（Dark Mode）及 iOS 26 全新的 Liquid Glass（液态玻璃） 视觉体系时，许多设计师和开发者都会遇到一个令人抓狂的视觉割裂问题：当你把自己的应用放到主屏幕或底部 Dock 栏，和系统原生的“电话”、“信息”、“Safari 浏览器”摆在一起时，系统图标呈现出温润、立体的深灰玻璃质感，而你自己的图标（例如常见的一个彩色音符图标）却像一个死气沉沉的“纯黑黑洞”，完全融不进系统的视觉环境里。
为什么明明都是深色图标，视觉差距却这么大？本文将从 iOS 底层图标渲染机制出发，彻底讲透原生 iOS App 与 Safari 主屏幕 Web App（PWA） 在深色图标制作上的核心规范与避坑指南。
一、 破案：为什么你的深色图标和系统图标格格不入？
把自定义图标与系统原生图标放在同一个 Dock 栏对比时，视觉差异主要源于以下两个核心原因：
1. 背景色值的误区：纯黑 vs. 系统深灰渐变
很多人误以为“深色模式 = 纯黑色背景（#000000）”。但实际上，Apple 官方的深色模式图标背景从来不是纯黑，而是一个带有细腻明暗过渡的垂直线性渐变：
- 顶部色值（0%）：
#313131（RGB:49, 49, 49） - 底部色值（100%）：
#141414（RGB:20, 20, 20）
当你在设计软件中把 #000000 纯黑背景直接烘焙进图片里时，纯黑色会吞没所有的光影过渡，导致图标在深色壁纸或毛玻璃 Dock 栏上失去表面体积感，看起来像屏幕破了一个黑洞。
2. 渲染机制的冲突：不透明底图阻断了系统材质合成
在 iOS 18 及引入 Liquid Glass（液态玻璃） 设计的 iOS 26 中，系统不仅负责为图标铺设标准深灰渐变底色，还会根据图层结构为前景图形（如电话听筒、信息气泡）的边缘自动计算一圈晶莹的玻璃受光高光。
如果你直接提供了一张不透明的纯黑底 PNG，系统会认为整张 1024 × 1024 的画布都是你的自定义图案，从而跳过系统级的背景生成与边缘高光渲染，直接原样输出那团死黑底色。
二、 原生 iOS App 深色图标最规范的制作方案
针对通过 Xcode 编译打包的原生 App，Apple《人机界面指南》（HIG）提供了非常清晰的标准工作流。根据项目所用的工具链，你可以选择以下三种方案之一：
方案 1：使用 Xcode Asset Catalog（最省心，适用于 iOS 18+）
Apple 官方文档对深色图标有明确要求：
“Provide your dark app icon with a transparent background so the system-provided background can show through.”
（请为深色应用图标提供透明背景，以便系统提供的标准背景能够透出来。）
标准操作步骤：
- 导出透明底前景图：在 Figma、Sketch 或 Photoshop 中，隐藏或删除黑色背景图层，只保留居中的核心图形主体（如彩色的音符图形），导出为 1024 × 1024 px、带 Alpha 透明通道的 PNG。
- 配置 Xcode 属性：打开工程中的
Assets.xcassets→ 选中AppIcon→ 在右侧属性检查器（Attributes Inspector）中，将iOS外观（Appearance）切换为Any, Dark, Tinted。 - 拖入对应槽位：将导出的透明底 PNG 拖入
Dark槽位。编译运行后，iOS 会在运行时自动在你的前景图形下方合成#313131→#141414的标准深灰渐变，与系统原生图标分毫不差。
方案 2：使用 Apple 官方 Icon Composer（最推荐，完美适配 iOS 26 液态玻璃）
仔细观察系统原生的“电话”和“信息”图标，你会发现不仅外框有高光，连内部的绿色图形边缘也有一圈细腻的玻璃反光，而传统的单张 PNG 前景则是完全扁平的。想要获得这种原生的立体液态玻璃质感，需要使用官方的 Icon Composer：
- 打开 Icon Composer（内置于 Xcode 26+，也可从 Apple Design Resources 独立下载）。
- 将前景图形拆分为独立图层（强烈建议导入 SVG 矢量图形或高分辨率透明 PNG），切勿自行导入黑色背景图层。
- 切换到左下角的 Dark（深色） 预览模式，在右侧面板将背景填充（Background Fill）设为
System Dark（或Automatic），不要手动选择Solid纯黑。 - 选中前景图形图层，开启 Specular Highlights（镜面高光） 与材质光照属性，保存为
.icon格式文件并直接拖入 Xcode 工程。系统会根据设备陀螺仪与环境光，实时为你的图标前景边缘渲染玻璃光泽。
方案 3：设计稿预览或跨平台框架手动烘焙背景
如果你需要在 Figma 中输出高保真预览图，或者某些旧版跨平台打包工具强制要求上传不带透明通道的深色图片，请严格按照官方模板参数手动绘制背景图层：
- 画布尺寸：
1024 × 1024 px（保持直角，切勿自行切圆角或画外框内描边） - 背景填充：垂直线性渐变（顶部中心
(512, 0)到底部中心(512, 1024)） - 起始色（Top 0%）：
#313131 - 结束色（Bottom 100%）：
#141414
附：原生 iOS 图标三件套（Any / Dark / Tinted）交付规范速查表
| 图标模式 (Appearance) | 背景图层要求 | 前景主体要求 | 格式与画布规范 |
|---|---|---|---|
| Any (浅色默认) | 必须完全不透明（纯色或渐变，严禁包含 Alpha 通道） | 正常彩色主体 | 1024 × 1024 px PNG，sRGB 或 Display P3，保持直角 |
| Dark (深色模式) | 透明背景（由系统自动生成 #313131 → #141414 渐变） | 适配深色背景的彩色主体（可微调压暗过于刺眼的高亮色） | 1024 × 1024 px PNG（含 Alpha 透明通道） |
| Tinted (染色模式) | 纯黑 (#000000) 或 透明背景 | 纯灰度图像（Grayscale），通过白色到灰色的明暗过渡表现体积层次，供系统按用户壁纸着色 | 1024 × 1024 px PNG |
三、 进阶深坑：Safari “添加到主屏幕”的 Web App (PWA) 该怎么办？
如果你的应用不是通过 App Store 分发的原生应用，而是通过 Safari “添加到主屏幕” 生成的 Web App（PWA），那么上面原生 App 的“透明背景”规则不仅不适用，甚至完全相反！
1. 为什么 Web App 照搬原生规范会翻车？
- 不支持多状态槽位与
.icon文件：Safari 的 Web App 机制只能接收单张扁平的静态 PNG 图片。你无法为桌面图标分别指定浅色图和深色图（即使在manifest.json或<link>标签里写media="(prefers-color-scheme: dark)"，iOS 在生成桌面图标快照的那一刻也只会抓取一张图固化下来）。 - 透明通道会被 Safari 强行填成死黑：如果你按照原生规范给 Web App 换上一张透明背景的 PNG，Safari 在抓取
apple-touch-icon时由于不支持透明底合成，会直接把透明区域粗暴地填充为#000000纯黑色。 - 自带纯黑底会绕过系统智能转换：如果你在导出的 PNG 里自己画了
#000000纯黑背景，iOS 的图标智能转换算法检测到背景已经是纯黑，就会放弃处理、直接原样显示，最终变成那个突兀的黑块。
2. Web App 完美适配深色主屏幕的两种标准解法
根据你的产品定位（是需要兼顾浅色与深色模式自动切换，还是专门针对深色模式打造），可以选择以下两种方案：
解法 A：利用 iOS 智能转换机制，自动生成深色与液态玻璃效果（最推荐，兼顾双模式）
从 iOS 18 到 iOS 26，系统内置了针对单张传统图标的智能深色转换与边缘高光提取算法。只要满足以下 3 个先决条件，当系统切入深色模式时，iOS 会自动抽离你的浅色背景，替换为标准的 #313131 → #141414 深灰渐变，并给你的前景图形加上玻璃立体反光：
- 采用纯白（
#FFFFFF）不透明背景：
在设计软件中，将背景设为完全不透明的纯白色（#FFFFFF），居中放置彩色的前景主体（前景图形轮廓需干净清晰，避免在大面积白底上使用复杂的半透明彩色弥散阴影）。
- 底层逻辑：当 iOS 识别到“纯白底 + 高对比度独立中心图形”的特征时，深色模式算法会精准抠出中心图形，将白底替换为系统级深色背景。
- **必须在 HTML
<head>中显式声明apple-touch-icon**：
千万不要只在manifest.json中配置图标！ 在当前的 iOS WebKit 实现中，仅通过 Web App Manifest 声明的图标往往不会触发系统的智能深色转换与液态玻璃渲染。务必在页面 HTML 头部加上标准标签：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
- 保持直角不透明输出：
推荐导出尺寸为512 × 512 px（或180 × 180 px/1024 × 1024 px）的直角不透明 PNG。
解法 B：手动烘焙系统标准深灰渐变（最稳妥，适合固定深色风格的 Web App）
如果你日常只使用深色模式，或者你的图标前景包含复杂的渐变色彩（如粉紫蓝渐变音符），担心系统自动算法把前景色彩压暗，那么最可控的办法是手动将系统深色背景画进 PNG：
- 新建
512 × 512 px或1024 × 1024 px画布。 - 底层铺设系统标准深色渐变：顶部
#313131到 底部#141414的垂直线性渐变。 - 上层放置前景图形并手绘微高光：放上你的彩色主体图形；如果想进一步对齐左侧系统图标的液态玻璃质感，可以为前景图形添加一个
1px宽、透明度30% ~ 40%的白色内发光或渐变内描边（让高光主要分布在左上角与右下角边缘）。 - 导出为不带透明通道的直角 PNG，作为
apple-touch-icon.png部署上线。
3. 调试必看：如何解决 Safari 主屏幕图标修改后不生效？
很多开发者改完了图标并重新部署，却发现重新添加到主屏幕后还是老样子。这是因为 Safari 对 apple-touch-icon 有着极其顽固的本地缓存机制。请按以下三步强制刷新：
- 给图标 URL 加上版本号 Query 参数：
修改 HTML 代码，在图标路径后追加参数，让 Safari 认为这是一个全新的资源：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=202610">
- 彻底删除旧桌面图标：长按主屏幕或 Dock 栏上的旧 Web App 图标，将其删除。
- 强制刷新网页后重新添加：打开 Safari 访问该网页，刷新页面确认加载了最新 HTML 后，再次点击底部“分享” → “添加到主屏幕”，此时预览框中显示的图标就会焕然一新。
四、 核心要点回顾
想要让你的图标在 iOS 深色模式和液态玻璃 Dock 栏上彻底告别“纯黑黑洞”，只需记住两条黄金法则：
- 做原生 iOS App 时：深色槽位（
Dark）永远不要自己画黑底，直接上传透明背景的前景 PNG，或者用 Icon Composer 选择System Dark背景，把底色和玻璃高光完全交给系统去合成。 - 做 Safari Web App 时：千万不要用透明背景或
#000000纯黑背景；要么使用纯白底（#FFFFFF）+<link rel="apple-touch-icon">**触发系统自动深色转换，要么老老实实用#313131→#141414**手动还原系统标准深灰渐变。
版权属于：soarli
本文链接：https://blog.soarli.top/archives/1172.html
转载时须注明出处及本声明。
