什么是 iOS 图标圆角工具?
iOS 图标圆角工具是一款专门为 iOS App 图标设计的圆角处理工具。上传一张方形 PNG 图标(通常 1024×1024),即可一键生成两种图标:圆角图标和补角方形图。所有处理在浏览器本地完成,图片不会上传服务器。
两种输出:
- 圆角图标:按 iOS App 图标的 squircle 超椭圆比例切圆角。iOS 图标的圆角不是普通的圆形圆角,而是超椭圆(superellipse)曲线,公式为 |x|⁵ + |y|⁵ ≤ 1,比普通圆角更平滑、更接近 Apple 官方图标的视觉效果
- 补角方形图:智能分析圆角周围的颜色渐变规律,将圆角外的透明区域补回为完整方形。适合需要方形图标的场景(如 Android、Web favicon、应用商店截图等)
补角渐变规律三种模式:
- 自动分析最佳:对每个角分别拟合两种渐变模型,选择残差更小的那个
- 对角线渐变:假设颜色沿对角线方向线性变化,c = a·(x+y)/2 + b,适合单光源照明或单向渐变背景
- 两边渐变:假设颜色沿 x 和 y 方向独立线性变化,c = a·x + b·y + d,适合双光源或径向渐变背景
核心功能:
- squircle 超椭圆:使用 iOS 图标标准的 |x|⁵ + |y|⁵ ≤ 1 曲线,比普通 CSS border-radius 更贴合 Apple 官方图标
- 智能补角:对四个角分别建模,自动选择最佳渐变规律,显示每个角采用的规律和拟合误差
- 线性回归:使用最小二乘法拟合渐变参数,3×3 线性方程组用克拉默法则求解
- 原始分辨率:基于原图实际像素处理,输出尺寸与原图一致
- 批量下载:可单独下载圆角图或方形图,也可一键下载两张
典型使用场景:
- iOS App 图标制作:设计师交付方形 1024×1024 图标,需转换为 iOS squircle 圆角图标预览效果
- 跨平台图标适配:同一张图标同时生成 iOS 圆角版和 Android/Web 方形版
- 图标圆角还原:已有圆角图标需还原为方形,补角算法智能外推圆角外的颜色
- 应用商店素材:生成符合 App Store / Google Play 要求的图标素材
技术原理:squircle 超椭圆曲线 |x|ⁿ + |y|ⁿ ≤ 1 中,n=5 时最接近 iOS 图标的实际圆角形状。补角算法在圆角内靠近边界处采样(|x|⁵+|y|⁵ 在 0.55~1.0 之间),用最小二乘法分别对 R/G/B 三通道拟合渐变模型,然后外推到圆角外区域。
What is the iOS Icon Corner Tool?
The iOS Icon Corner Tool is designed specifically for iOS app icon corner processing. Upload a square PNG icon (typically 1024×1024) and generate two variants with one click: a rounded icon and a filled square icon. All processing runs locally in your browser — your images never leave your device.
Two outputs:
- Rounded Icon: Applies the squircle superellipse curve used by iOS app icons. iOS icon corners are not regular circular rounded corners — they follow a superellipse curve |x|⁵ + |y|⁵ ≤ 1, which is smoother and closer to Apple's official icon look than regular border-radius
- Filled Square Icon: Intelligently analyzes the color gradient pattern around the rounded corners and fills the transparent area back into a complete square. Ideal for platforms that require square icons (Android, web favicons, app store screenshots, etc.)
Three fill gradient modes:
- Auto best fit: Fits both gradient models for each corner separately and picks the one with lower residual
- Diagonal gradient: Assumes color varies linearly along the diagonal, c = a·(x+y)/2 + b. Suitable for single-light-source or unidirectional gradient backgrounds
- Two-side gradient: Assumes color varies independently along x and y, c = a·x + b·y + d. Suitable for dual-light-source or radial gradient backgrounds
Key features:
- Squircle superellipse: Uses the iOS-standard |x|⁵ + |y|⁵ ≤ 1 curve, closer to Apple's official icon shape than CSS border-radius
- Smart corner filling: Models each of the four corners independently, auto-selects the best gradient pattern, and displays the chosen pattern and fit error for each corner
- Linear regression: Uses least squares to fit gradient parameters; 3×3 linear systems solved via Cramer's rule
- Original resolution: Processing is based on actual image pixels; output size matches the input
- Batch download: Download the rounded icon or square icon individually, or both at once
Common use cases:
- iOS app icon creation: Designers deliver a square 1024×1024 icon that needs to be previewed with iOS squircle corners
- Cross-platform icon adaptation: Generate both iOS rounded and Android/Web square variants from the same icon
- Icon corner restoration: Restore a rounded icon back to square — the fill algorithm intelligently extrapolates colors outside the corners
- App store assets: Generate icon assets that meet App Store / Google Play requirements
Technical approach: The squircle superellipse curve |x|ⁿ + |y|ⁿ ≤ 1 with n=5 best matches the actual iOS icon corner shape. The fill algorithm samples pixels inside the rounded area near the boundary (where |x|⁵+|y|⁵ is between 0.55 and 1.0), fits gradient models for R/G/B channels via least squares, then extrapolates to the area outside the rounded corners.