iOS 主屏幕图标
Apple Touch Icon 生成器：制作 180×180 PNG 主屏幕图标
输出一张 180×180 PNG，把背景和图案留白一次处理好。
上传 Logo，调整留白和纯色背景，再对照真实导出像素与 iPhone 主屏幕效果。圆角由 Apple 设备显示时处理，因此下载文件保持完整方形。
上传 Logo，制作 Apple Touch Icon
建议使用简洁、对比清楚的图案，缩小到手机主屏幕尺寸后仍能辨认。
PNG · JPG · WEBP · SVG · 最大 10 MB
如何制作 Apple Touch Icon
- 01
上传方形 Logo 或图标
尽量上传方形 Logo 符号。横向完整字标居中后通常会变得太小，不适合主屏幕图标。
- 02
调整 Apple Touch Icon 留白与背景
选择符合品牌的纯色，为系统圆角裁切留出空间，不要提前把圆角画进源文件。
- 03
下载 180×180 PNG
把 apple-touch-icon.png 放入网站公开资源目录，并把生成的 link 标签加入页面 head。
Apple Touch Icon 的尺寸、格式与文件名
本工具只解决一个明确任务：生成 Safari 在访客把网页添加到 iPhone 或 iPad 主屏幕时使用的网站图标。
尺寸
180×180 像素
适用于高分辨率 iPhone Web Clip。Safari 会从页面声明的图标中选择适合设备的尺寸。
文件名
apple-touch-icon.png
常见的根目录文件名，便于部署、检查和长期维护。
渲染方式
完整方形、不透明
所选颜色会填满每个像素；圆角与最终显示效果由 iOS 处理。
如何把 Apple Touch Icon 添加到网站
把 PNG 放到 link 标签引用的地址，图片与代码同时部署。添加到主屏幕前，先直接打开线上图片地址检查文件。
查看 Apple 的 Web Clip 图标文档Apple Touch Icon 常见问题
Apple Touch Icon 是什么？
它是 Safari 在用户把网站添加到 iPhone 或 iPad 主屏幕时使用的图片，与浏览器标签页里显示的小尺寸 favicon 不同。
为什么本工具输出 180×180？
Apple 文档把 180×180 列为高分辨率 iPhone Web Clip 图标尺寸。网站可以为其他设备声明更多尺寸，但清晰的 180×180 PNG 是这个专用工具实用的单文件方案。
需要自己制作圆角吗？
不需要。导出文件应保持完整方形，由 iOS 应用设备上的圆角形状。提前制作圆角可能产生双层边缘或不必要的空隙。
图标可以保留透明背景吗？
本工具会把图案合成到你选择的纯色背景上，并移除透明通道，使主屏幕结果更可预期，避免透明区域出现意外底色。
为什么主屏幕仍显示旧图标？
先直接打开部署后的 PNG 地址，确认它返回新文件；再检查重复的 link 标签、站点或 CDN 缓存。已经添加到主屏幕的旧书签可能需要删除后重新添加。