使网站被收藏到主屏幕时带图标

使用手机 chrome 或者 safari 的“添加到主屏幕”功能,使被收藏网站在主屏幕中与手机 APP 一样显示图标,成为 WebApp。使用手机 Chrome 时,有这样一个功能:
收藏功能

然后在主屏幕中,将网站以 WebApp 的形式保存于桌面:收藏网站

但是收藏于桌面后,有一些网站是没有图标的,系统自动拉取域名的第一个字母作为图标,测试了一些网站,大部分的网站都有相应的处理,只不过百度竟然没有,让我想不通。

实现些功能关键点在于<link rel="apple-touch-icon">这个属性,这是苹果为 iOS 设备配备了 apple-touch-icon 私有属性,添加该属性,在 iPhone, iPad, iTouch的 safari 浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上,方便用户以后访问。

使用方法:

apple-touch-icon 标签支持 sizes 属性,可以用来放置对应不同的设备。

  • 57×57(默认值)的图标对应 320×640 的 iphone 老设备
  • 72×72对应 ipad
  • 114×114对应 retina 屏的 iPhone 及 iTouch
  • 144×144的高分辨率对应 ipad3

虽然官方都用的 png 图片做说明,但实际测试 jpg 格式也可用(不推荐),图片无需做圆角和高光效果,同 Native App 一样,系统会自动为图标添加圆角及高光。如果不想系统对图标添加效果,可以用 apple-touch-icon-precomposed 代替 apple-touch-icon,这时我们提供的图标就要自己做圆角和高亮效果了。

发表评论