ICO / Favicon / App Icon 工具

Apple 触控图标

为网站的 Apple 主屏幕快捷方式制作方形 PNG,设置底色和留白并复制引用。

图片、Emoji 和生成的图标只在您的浏览器中处理,不会上传到服务器。

这个工具是什么

Apple Touch Icon 是网站添加到 Apple 设备主屏幕时可使用的图标。您可以将标志放在实色方形背景上,生成常用 PNG 尺寸并取得对应的 HTML 引用。

如何使用

  1. 选择或拖入 PNG、JPG/JPEG 或静态 WebP 图片。
  2. 保留默认白色背景或选择其他实色,按需调整完整放入、中心裁剪和留白。
  3. 使用默认 180×180,或额外勾选其他需要的尺寸并生成。
  4. 下载 PNG 或 ZIP,复制 HTML 引用并确认文件路径正确。

支持尺寸

  • 默认生成 180×180 的 apple-touch-icon.png,适合多数常见网站需求。
  • 可按需选择 120×120、152×152 和 167×167;这些额外尺寸用于兼顾不同设备或已有图标配置。

图标生成说明

  • 完整放入(Fit)会按比例保留整张图片,空白区域使用所选背景;中心裁剪(Crop)会截取中间的正方形区域。两种方式均不会拉伸原图。
  • 留白比例按目标尺寸的每一边计算:10% 留白会让图像内容占用中间约 80% 的宽度与高度。
  • 16×16 等小尺寸适合轮廓简单、对比清晰的图案。复杂照片或细小文字缩小后可能难以辨认,请查看实际尺寸预览。

支持 PNG、JPG/JPEG 和静态 WebP 图片。单个文件最多 100 MiB,图片最多 4000 万像素,单边不超过 16384 像素。大图片可能需要更多处理时间与内存。

Apple Touch Icon 使用方法

  • 默认使用白色实底和每边 10% 留白。透明标志会绘制到所选背景上,避免在不同显示环境下出现意外底色。
  • 输出保持完整正方形,不预先裁掉四角。设备会决定主屏幕上的圆角与外观,适当留白有助于让主体远离边缘。
  • 生成的 HTML 使用 apple-touch-icon 引用,并只列出实际生成的尺寸。请将文件放在引用对应的位置。

隐私

图片、Emoji 和生成的图标只在您的浏览器中处理,不会上传到服务器。

工具不会自动保存输入或结果。请在清空或离开页面前下载需要保留的图标,并保留原始素材。

FAQ

Apple Touch Icon 是什么?

它是网站添加到 Apple 设备主屏幕时使用的 PNG 图标,通常通过网页中的 apple-touch-icon 引用指定。

应该选择多大的尺寸?

多数常见网站需求可以先使用默认的 180×180。需要匹配已有配置或额外设备尺寸时,再勾选其他选项。

为什么建议使用不透明背景?

实色背景能让透明标志周围的颜色更可控,避免不同显示环境为透明区域采用意外底色。

需要先把图标做成圆角吗?

通常无需预先裁切圆角。此工具输出标准方形 PNG,让设备应用自己的图标外观。

怎样引用下载的图标?

复制结果区生成的 HTML,并把图标放到对应路径。默认 180×180 文件名为 apple-touch-icon.png;其他尺寸使用各自生成的名称。

返回开发者工具分类首页