favicon、apple-touch-icon 与 Web 清单 仍常要 PNG 阶梯(多槽位、多 WxH)。本文给 Mac 运维一份 2026 决策矩阵:槽位对比表、maskable 中心 80% 安全圆、touch 外边距、sRGB 归一、favicon 微量锐化是否允许,以及 远程 Mac mini M4 批处理上的 stat 字节门槛与烟测清单,替代群聊口头对图。
痛点:一个 brief 里其实是三种产品
- 几何冲突。32/16 要可辨;iOS 要
180×180吃圆角;清单要192与512,一母版难全优。 - maskable ≠ 放大 512。遮罩会裁边,图形须进安全区。
- 色漂。广色域定稿、sRGB 壳层交付时须先写 ICC 合同;见 sRGB·P3 清单、混排策略。
- 批量缺工人。白标换标要同一套
sips、stat与 JSONL,笔记本休眠即断链。
槽位对比矩阵:favicon、touch、manifest、maskable
下列四行对应浏览器标签、iOS 主屏、安装提示与 Android 自适应遮罩四类读者;交付时按行拆 SKU,勿混用「一张 512 打天下」。
| 交付槽位 | 典型 PNG 尺寸 | 主要风险 | 交付规则摘要 |
|---|---|---|---|
| 经典标签页 favicon | 32×32(可选 16×16) |
缩小发糊 | 矢量 glyph 可极轻 unsharp;摄影母版不宜做 favicon |
rel="apple-touch-icon" |
180×180 |
圆角吃四角 | 外周留白默认 ≥10%,细线标 12–14% |
清单 icons[](any) |
192×192 与 512×512 |
缺档或 purpose 错 | 192/512 齐备,"purpose": "any",WxH 与声明一致 |
Maskable 512 |
512×512 |
遮罩吃边 | 关键形在直径 80% 边长中心圆内,外圈当出血 |
可执行步骤:sips 阶梯、锐化、清单
pin ImageMagick;JSONL 记 sips/magick 版本。ICC 见 ICC 重压缩清单。
步骤 1:母版匹配 sRGB
sips --matchTo "/System/Library/ColorSync/Profiles/sRGB Profile.icc" master.png --out master_srgb.png
步骤 2:用 sips 输出确定性 WxH
sips -z 32 32 master_srgb.png --out favicon-32.png
sips -z 180 180 master_srgb.png --out apple-touch-icon-180.png
sips -z 192 192 master_srgb.png --out pwa-192.png
sips -z 512 512 master_srgb.png --out pwa-512-any.png
legacy .ico 才另导 16;否则 32+SVG。
步骤 3:favicon 微锐化(可选)
magick favicon-32.png -colorspace sRGB -filter Lanczos -resize 32x32! -unsharp 0x0.45+0.45+0.006 favicon-32-sharp.png
半径宜小;maskable 512 通常不锐化。
步骤 4:maskable 与 Chrome 预览
徽标缩进 80% 直径圆;DevTools → Application → Manifest 看 maskable;与 any 512 分文件除非母版留白已足。
步骤 5:哈希与 HTML / manifest 对齐
shasum -a 256 pwa-512-any.png pwa-512-maskable.png >> icons-manifest.sha256
link/manifest 路径与 QA 件一致;改名联动缓存键。
远程 M4 批处理验收清单
- 几何:WxH 与 manifest 零容差,禁奇偶混写。
- sRGB:抽检
magick identify -verbose中Colorspace: sRGB与 ICC 合同。 - 字节(可调):
favicon-32≤12KB,180≤45KB,192≤55KB,512 any≤180KB,512 maskable≤220KB;CDN 限流时调参并写 README。 - 锐化:凡
-unsharp写 JSONL 防漂移。 - 烟测:Android Chrome 与 iOS Safari 各「添加主屏幕」截图归档。
示例:test "$(stat -f%z pwa-192.png)" -le 55000。
可引用阈值
- Maskable 安全圆:直径
0.8×min(宽,高)居中;圆外像素视为可被遮罩裁掉。 - Touch 外边距:默认画布外周 ≥10% 留白;尖角方形标、细笔画可升到 14%。
- 清单双轨:
512的purpose:"any"与"maskable"建议各绑独立文件,降低 Pixel 等启动器裁切客诉。
FAQ
一个 512 同时给 any 与 maskable? 只有母版四边已留足平坦出血、且 Chrome DevTools maskable 预览无裁切时才可合并;多数品牌应拆两文件、两条 icons[]。
touch 图标比设计稿暗? 核对导出 gamma 与 Safari 假设差异;对母版重做 sips --matchTo sRGB,并在 sRGB 标定屏上复核。
下一步:租用远程 M4 做批量导出与门禁
多白标站、活动皮肤或分支并行时,把 sips 缩放、ICC 合同、magick 锐化与 stat 上限固定在远程 Mac mini M4 工人上,可夜间跑满核、白天只合流抽检。请访问 MacPng 首页,在 购买 / 租用 下单,查阅 套餐与节点,并按 帮助中心 配置 SSH 或 noVNC;更多 PNG 决策文见公开 技术见解。阅读帮助与选购无需登录。