应用图标是一张画要穿 36 种尺寸的衣服,5 个平台,从 16 像素的浏览器标签页到 1024 像素的商店上传。应用图标生成器取一张照片,用覆盖裁剪把它裁成正方形,再把整个家族导出为一个 ZIP:按平台分文件夹的 36 个 PNG,外加一份 PWA manifest 和一份 iOS 图标集 manifest。图片不上传;裁剪、重采样与 ZIP 组装全部在浏览器的画布上完成。
5 个平台共 36 个尺寸
清单是 iOS 12 个、Android 9 个、Web 5 个、macOS 6 个、Windows 4 个。iOS 从 29 像素的设置图标到 1024 像素的应用商店上传,中间是 40、58、60、76、80、87、120、152、167 与 180。Android 覆盖 512 像素的 Play 商店图标、2 个自适应图标尺寸(48 与 192),以及从 ldpi 的 36 到 xxxhdpi 的 192 的 5 档启动器密度。Web 放着 192 与 512 的 PWA 一对、180 像素的 Safari apple-touch-icon,以及 32 与 16 的 2 个 favicon。macOS 依次是 16、32、128、256、512、1024;Windows 是 44、71、150 的 3 块磁贴,加一张 500 像素的商店图。平台开关按组跳过,纯 Web 构建下载 5 个 PNG 和一份 manifest,而不是全部 36 个。只想要一个目标尺寸的话,图片尺寸调整用同一套覆盖裁剪规则做单次缩放。
从 4000×3000 的照片到 512 的图标
每个目标都是正方形,所以矩形照片要先变成正方形才能缩放。规则是覆盖裁剪:scale = max(w / iw, h / ih),w、h 是目标,iw、ih 是源。4000×3000 的照片进 512 目标:scale = max(512/4000, 512/3000) = max(0.128, 0.17067) = 0.17067,源正方形边长 512/0.17067 = 3000,居中取:sx = (4000 − 3000)/2 = 500,sy = 0。4:3 的照片交出它的 3000×3000 中心,两侧各切掉 500 像素。竖版照片则切掉上下。取 max 是刻意的:取 min 会把整张照片塞进正方形里留下空白角,而图标不能留白角。图片格式转换只换编码不动几何,图片裁剪在你只要裁剪时套用同一套中心正方形算法。
每个尺寸一次重采样,不是一条链
36 个输出中的每一个都是从原始图片用一次画布操作画出来的,平滑开启,质量设为高。没有 1024 到 512 再到 256 的链:16 像素的 favicon 是从 1024 源一步 0.015625 倍缩出来的,128 像素的 macOS 图标是从 512 一步 0.25 倍缩出来的。这有看得见的后果。因为每个尺寸共享同一份裁剪与同一次重采样,在 1024 下读得清楚的细节,正是 16 下变成噪点的细节,所以 32、48、64、128、180 的预览行,是弱设计在 ZIP 生成前露出破绽的地方。
ZIP 里装了什么
压缩包最多装 36 个 PNG,分在 ios/、android/、web/、macos/、windows/ 文件夹里,外加 3 份文档。选了 Web 就有 manifest.json:应用名、截到前 12 个字符的 short_name(My Very Long App 上报为 My Very Long)、带 any maskable 用途的 2 个 PWA 图标、主题色与背景色 #ffffff、display 为 standalone。选了 iOS 就有 ios/Contents.json,带 Xcode 期望的 14 条,把 20、29、40、60、76、83.5 与 1024 点尺寸映射到 PNG 文件。一份 README.md 按平台列出尺寸与文件对照表。下载名从应用名派生:任何非字母数字字符都变成连字符,整体小写,所以 My Cool App 产出 my-cool-app-icons.zip。末尾的标点会变成第 2 个连字符(my-cool-app--icons.zip),这是名字框限定 30 个字符的原因之一。PNG 是无损编码,1024 图标的重量由画面决定;当商店或 Web 预算在意字节时,图片压缩器就是重新编码、把同样像素压便宜的地方。
图标去哪儿:manifest、启动屏、商店
manifest 里的 2 个图标是浏览器实际安装用的:192 给安装界面,512 给启动屏与分享卡片。any maskable 用途告诉系统可以把图裁成圆或圆角方块,所以安全区是画布中心约 80% 的圆:把主体留在里面,把留白留给平台的装饰。web/ 里的 32 与 16 是 favicon 的同族,是浏览器在读 manifest 之前就去抓的标签页图标。网站图标生成器覆盖这个家族的其余部分,包括多尺寸的 ICO、Windows 的 mstile 与可直接粘贴的 HTML 链接标签。应用商店与 Play 商店条目是评审最先看到的,所以 1024 与 512 是值得再看一遍的尺寸。
同一套缩放数学,处处都在
覆盖裁剪加一次高质量降采样,是一小块到处出现的数学。图片尺寸调整把它用在单个目标上,压缩器重编码它输出的像素,文件大小转换器是衡量结果的地方:36 个 PNG 的 ZIP 就是 1024 母版用字节付费的地方,16 像素的文件几乎不占地方。如果问题出在裁剪本身,主体在角落,中心正方形裁不到它,图片裁剪指南在缩放之前讲裁剪的数学。图标是这套数学的最后一件产物:一个正方形,36 个尺寸,每一份里同一个中心。