Customize home screen icons for iPhone and iPad websites

Set the home screen icon

As you can see above, I think you will want to customize an icon. the IOS Web page icon is similar to the traditional web page favicon, and the processing method is similar. Below we will introduce several processing methods for you.

Place in default location

Create a PNG Image named apple-touch-icon.png or apple-touch-icon-precomposed.png and place it in the root directory of the website.

Icon path

Specify an icon path for the page.CodeAs follows:

<LINK rel = "apple-touch-icon" href = "/custom_icon.png"/>
Specify icons for different devices

Specify a Special icon for different devices on the webpage. Because the icon sizes of the iPhone and iPad are different, sizes attributes are required for differentiation. If the sizes attribute is not defined, the default value of sizes is 57x57. the Code is as follows:

<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"/>
If there is no picture size, you can match the picture size of the device icon. If there is an image larger than the device Icon size, an image larger than the device Icon size will be used. If there is no picture larger than the device Icon size, use the largest image.

If the icon path is not specified in the webpage, the root directory will be searched with apple-touch-icon... and apple-touch-icon-precomposed... a png Image prefix. assume that the Icon size of a device is 57x57. The system searches for the icon in the following order:

Apple-touch-icon-57x57-precomposed.png
Apple-touch-icon-57x57.png
Apple-touch-icon-precomposed.png
Apple-touch-icon.png
Main Screen Icon size

Icon sizes for iPhone and iPod (itouch:

57x57 pixels
114x114 pixels (high resolution, iPhone 4 or above)
Icon size for iPad:

72X72 pixels