/

给网站添加保存到移动设备主屏的 icon

By adding an iOS icon, anyone who decides to save your webpage to the home screen of their iPhone, iPad, or Android will see a nice app-like icon rather than an image of your page.

Here is a table of the current iOS icon sizes from Apple:

iPhone 6/7, iPhone SEiPad / iPad MiniiPad ProiPhone 6/7 Plus
120×120152×152167×167180×180

For Android icons you’ll want to follow these specifications:

Android RegulaAndroid Hi-Res
1128×128192×192
<link
  href="http://www.yoursite.com/apple-touch-icon.png"
  rel="apple-touch-icon"
/>
<link
  href="http://www.yoursite.com/apple-touch-icon-152x152.png"
  rel="apple-touch-icon"
  sizes="152x152"
/>
<link
  href="http://www.yoursite.com/apple-touch-icon-167x167.png"
  rel="apple-touch-icon"
  sizes="167x167"
/>
<link
  href="http://www.yoursite.com/apple-touch-icon-180x180.png"
  rel="apple-touch-icon"
  sizes="180x180"
/>
<link
  href="http://www.yoursite.com/icon-hires.png"
  rel="icon"
  sizes="192x192"
/>
<link
  href="http://www.yoursite.com/icon-normal.png"
  rel="icon"
  sizes="128x128"
/>

Make the first apple one the 120 x 120.

If you don’t want to create all these images, you should at least create the larger resolution ones. That way they’ll look good on the hi-res devices.

References: