爱意满满的作品展示区。
horace68

做了一个 App 图标生成器,把 iOS/Android/Web 图标尺寸的坑都踩了一遍

  •  
  •   horace68 ·
    lianhr12 · 16h 12m ago · 294 views
    最近在给自己的一个小站点做图标资源的时候,被 Xcode 的 Assets.xcassets 和 Android 的自适应图标折腾得有点烦,干脆把这套流程写成了一个小工具,顺手记录一下踩过的坑。

    起因是这样的:iOS 现在一个 AppIcon.appiconset 少说要准备 20 多个尺寸的 PNG ,从 iPhone 的 Spotlight 、Settings 到 App Store 的 1024 ,稍微手抖漏一个就会在打包的时候报错,Xcode 的报错信息还经常不知道具体缺哪个。Android 这边更麻烦,自适应图标要拆前景层和背景层,还要兼容旧版本的传统图标,mdpi 到 xxxhdpi 一套跑下来,手动导出很容易出现某个密度的图标模糊或者裁切错位。之前一直是在 Photoshop 里用脚本批量导出,改一次 Logo 就要重新跑一遍脚本,效率很低。

    于是写了这个 AppIconGenerator:

    核心逻辑很简单,上传一张 1024x1024 的源图,所有处理都在浏览器本地用 Canvas 完成,不会上传到服务器,这点对于还没公开的产品图标或者客户资产比较重要。生成之后会按平台分好文件夹,iOS 直接是 Assets.xcassets 能用的结构,Contents.json 也一并生成好,Android 是标准的 mipmap 目录加自适应图标的两层结构,Web 那边顺带出了 favicon 和 PWA 需要的几个尺寸。做完之后可以在右侧实时看一下图标贴到手机主屏幕或者暗色背景下的效果,省得导出之后再发现颜色和真机不一致。

    工具地址: https://appicongenerator.org/

    目前图标生成和编辑器是完全免费无限使用的,如果需要用 AI 从文字直接生成一版图标素材,会有一个每月次数限制,这部分是为了覆盖一点点接口成本。欢迎路过的开发者试试,也欢迎提意见,尤其是如果你们那边还有其他平台(比如鸿蒙、小程序)的图标规范槽点,我可以看看要不要加进去。
    No Comments Yet
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   999 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 22:51 · PVG 06:51 · LAX 15:51 · JFK 18:51
    ♥ Do have faith in what you're doing.