Web应用作为仿原生应用的重要补充，我们希望添加在主屏幕时，也能有像原生应用那样逼真的icon，本文介绍关于webclip的icon设置

  • 对于全局网站设置icon，将png格式的图片文件命名为 apple-touch-icon.png 并置于根目录，无需其他配置

  • 对于单个网页设置icon，在head中加入link

      <link rel="apple-touch-icon" href="/custom_icon.png">

  • 对于不同分辨率的设备分别设置不同的icon，可以使用size属性

      <link rel="apple-touch-icon" href="touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">

扩展阅读：

Configuring Web Applications

Configuring the Viewport