iPhone和iPad用户把网页添加到主屏幕时,会显示一个图标,这就是Apple Touch Icon。本文详解Apple Touch Icon制作与设置方法。
什么是Apple Touch Icon
Apple Touch Icon是iOS系统专用的网页图标,当用户把网页"添加到主屏幕"时显示。如果不设置,iOS会截取网页截图作为图标,效果很差。设置专门的Apple Touch Icon能提升品牌形象。
Apple Touch Icon尺寸规格
不同iOS设备需要的尺寸不同:
- 180x180:iPhone Plus及最新设备(推荐)
- 152x152:iPad
- 120x120:旧款iPhone
- 76x76:iPad Mini
建议直接制作180x180的PNG,iOS会自动缩放到其他尺寸。
Apple Touch Icon制作要求
- 必须是PNG格式(不支持ICO)
- 尺寸180x180像素
- 不需要圆角,iOS会自动添加
- 背景不要透明,用纯色背景填充
- 图标居中,四周留出8-10px边距
HTML代码设置
在网页
中添加:<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">
使用图捷智转制作
- 准备一张正方形PNG logo图片
- 用图捷智转图片转换工具调整尺寸
- 生成180x180的apple-touch-icon.png
- 同时生成favicon.ico用于浏览器标签页
- 上传到网站根目录
需要制作网站图标时,使用图捷智转PNG转ICO在线工具,可以同时生成favicon.ico和apple-touch-icon所需的图片。