手机App图标的常用尺寸
做移动应用开发时,图标尺寸不能随便定。比如iOS系统里,启动图标(App Icon)通常需要提供多种尺寸,最常见的是180×180px用于iPhone主屏幕,而1024×1024px则是提交App Store的原始大图。安卓这边更复杂些,不同分辨率设备要求不同,常用的有48×48px、72×72px、96×96px、144×144px和192×192px,对应ldpi到xxxhdpi的屏幕密度。
如果你在设计一个微信小程序,建议准备108×108px的图标,它会自动适配显示为圆形或圆角矩形,太小可能模糊,太大又浪费资源。
网页中favicons的尺寸规范
网站的小图标,也就是favicon,虽然不起眼,但缺了它页面标签页就少了点辨识度。现在主流做法是使用32×32px和16×16px两种尺寸。可以将它们做成ico格式,包含多个尺寸在一个文件里。比如:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32" type="image/ico">另外,苹果设备访问网页时会优先查找apple-touch-icon,推荐使用180×180px,并通过以下代码声明:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">桌面软件与UI组件中的图标大小
Windows程序界面常用24×24px、32×32px和48×48px的图标,尤其在工具栏或菜单中。如果图标太小,细节看不清;太大则占用空间。一般建议核心操作按钮使用24px或32px,保持整体界面协调。
在网页UI设计中,比如导航栏上的设置、消息、用户头像等图标,20×20px到24×24px最为常见。这类图标通常放在按钮内,配合文字使用,清晰易识别最重要。
设计时的实用技巧
实际制作中,最好从最大尺寸开始画,比如192×192px或256×256px,保留足够细节,再逐级缩小生成其他尺寸。缩放过程中要手动调整边缘,避免出现模糊或断线。特别是16×16这种极小尺寸,复杂的图形会糊成一团,得简化图形甚至重绘。
导出时注意命名规范,例如:icon-16.png、icon-32.png、app-icon-180.png,方便开发人员调用。如果是给团队协作的项目,提前出一份图标尺寸说明文档,能省去不少沟通成本。