IPhone Favorites URLs [add to Bookmarks] and [Add to home] show custom icons instead of screenshots

IPhone Favorites URLs [add to Bookmarks] and [Add to home] display custom icons instead of Web pages:

<!--Safari Browser [Add to bookmarks]--

<link rel= "shortcut icon" href= "Static/my/img/favicon.ico" >

<!--Safari Browser [Add to Home screen]--

<link rel= "Apple-touch-icon" href= "Static/my/img/favicon.ico"/>

https://www.zhihu.com/question/19572446

The basic purpose is to place a 57x57 pixel image named Apple-touch-icon.png at the root of the website.

If more precise control is required:

1. Add the following statement to the head section of the website where the href attribute value is the path to the picture.

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

2. To meet the different resolution of the device display, you can add three different resolutions of the picture: 57x57 pixels | For the first three generations of IPhone and iPod touch, 72x72 pixels for the iPad, 114x114 pixels for use with Retina display The IPhone 4 and IPod touch and other follow-on products. Control by sizes Property:

<link rel= "Apple-touch-icon" href= "Touch-icon-iphone.png"/>
<link rel= "Apple-touch-icon" sizes= "72x72" href= "Touch-icon-ipad.png"/>
<link rel= "Apple-touch-icon" sizes= "114x114" href= "Touch-icon-iphone4.png"/>

3. You can also change the rel attribute to "apple-touch-icon-precomposed" to prevent IOS from adding a highlight effect to your icon.

IPhone Favorites URLs [add to Bookmarks] and [Add to home] display custom icons instead of Web pages