为你的网站添加iPhone/iPad主屏幕图标

add-web-icon-to-home-screen

有没有想过将你的网站书签以图标的形式添加到iPhone或iPad的桌面上呢?默认情况下,iOS端的Safari浏览器的“添加至主屏幕”会将网站的截图当作图标添加到桌面上。如何定义这个图标呢?其实很简单, iOS 的网页图标与传统的网页 favicon 相似,只需要在header中添加几行代码就搞定了。

设计图标

首先,我们需要设计一个图标,设计完成后保存为png格式, 命名为 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png。

指定图标路径

在header中添加以下代码:

[php]<link rel="apple-touch-icon" href="图标路径"/>[/php]

不同的iOS设备使用的图标大小不一样,你可以参考Apple说明文档分别自定义各种设备的图标。

图标效果

默认情况下,iOS图标的会自动添加以下效果:

  • 圆角
  • 阴影
  • 高光

圆角和阴影是iOS图标的必有效果,所以我们无需对图片做太多处理,提供符合尺寸的正方形图片即可;但高光效果可以选择的, 如果图标带有 -precomposed 后缀 (如: apple-touch-icon-precomposed.png), 系统就不会为你的图标加上高光效果。EOF

文章标签:

为你的网站添加iPhone/iPad主屏幕图标》有2条评论

发表评论

8RQ6