Apple-touch-icon property details about Apple device private

We used to use Favicon in the browser to identify the site, the use of the following:

[HTML]View PlainCopy

1. <link href="Http://image.feeliu.com/web/favicon.ico" rel= "shortcut icon" />
2. <link href="Http://image.feeliu.com/web/favicon.ico" rel= "Bookmark" />

With more mobile devices now available, Apple has apple-touch-icon private properties for iOS devices, adding this property, which can be added to the home screen using the Add to Home button on Iphone,ipad,itouch's Safari browser to make it easier for users to access later. The implementation method is to add the following code to the

[HTML]View PlainCopy

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

The Apple-touch-icon tag supports the Sizes property, which can be used to place different devices.

The icon for the 57x57 (default) corresponds to 320x640 's iphone old device, 72x72 corresponds to the iphone and itouch for the Retina screen for ipad,114x114. The ipad3 corresponds to the high resolution of the 144x144.

This is a detailed description of the official development community:

Create Different sizes of your app icon for different devices. If you ' re creating a universal app, you need to supply app icons in all four sizes.

For IPhone and IPod touch Both of these sizes is required:

• x pixels

• x pixels (High resolution)

For IPad, both of these sizes is required:

• x pixels

• 144 x 144 (high resolution)

When IOS displays your app icon on the Home screens of a device, it automatically adds some visual effects to your icon so That's it coordinates with the built-in icons on the Home screen. Specifically, IOS adds:

• Rounded Corners

• Drop Shadow

• Reflective Shine (unless you prevent the shine effect)

Note:you can prevent the addition of all effects by naming your icon Apple-touch-icon-precomposed.png (this is available In IOS 2 and later).

Ensure your icon is eligible for the visual enhancements IOS adds (if you want them). You should produce a image in PNG format:

Has 90°corners

Does not has any shine or gloss

So the most perfect wording should be:

[HTML]View PlainCopy

2. <link rel="Apple-touch-icon" sizes="57x57" href= "Touch-icon-iphone.png"/>
4. <link rel="Apple-touch-icon" sizes="72x72" href= "touch-icon-ipad.png" / >
6. <link rel="Apple-touch-icon" sizes="114x114" href= "touch-icon-iphone4.png" / >
8. <link rel="Apple-touch-icon" sizes= "144x144" href=" Apple-touch-icon-ipad3-144.png " />

Although the official use of the PNG image for illustration, but the actual test JPG format is also available (not recommended), the picture does not need to do fillet and highlight effects, like the native app, the system will automatically add rounded corners and highlights for the icon. If you do not want the system to add effect to the icon, you can use apple-touch-icon-precomposed instead of Apple-touch-icon, then we provide the icon to do their own fillet and highlight the effect.

The priority of the icon search is as follows:

If you do not have an icon that matches the recommended size of the device, it will take precedence over the recommended size but closest to the recommended size.

If there is no icon larger than the recommended size, the icon closest to the recommended size is preferred.

If more than one icon fits the recommended size, the icon that contains the keyword precomposed will be selected first.

If you do not specify an icon in the zone with the link tag, the apple-touch-icon will be searched automatically under the site root directory ... Or apple-touch-icon-precomposed ... The icon for the prefix. If the equipment recommended size is 57x57, the priority is as follows:

Apple-touch-icon-57x57-precomposed.png

Apple-touch-icon-57x57.png

Apple-touch-icon-precomposed.png

Apple-touch-icon.png

There are four icon sizes on the third-generation IPad: 57x57, 72x72, 114x114, 144x144.

Because the retina icon is twice times the size of the standard icon, in fact we only need to do 2 icons: X 114 and 144 x 144. Set the size of the retina icon to the size of the standard icon, and iOS will automatically scale as appropriate.

[HTML]View PlainCopy

2. <!--standard IPhone--
4. <link rel="Apple-touch-icon" sizes="57x57" href= "touch-icon-iphone-114.png" / >
6. <!--Retina IPhone--
8. <link rel="Apple-touch-icon" sizes="114x114" href= "touch-icon-iphone-114.png" / >
10. <!--standard IPad--
12. <link rel="Apple-touch-icon" sizes="72x72" href="Touch-icon-ipad-144.png" />
14. <!--Retina IPad--
16. <link rel="Apple-touch-icon" sizes="144x144" href= "touch-icon-ipad-144.png" / >

Official development Community "IOS Human Interface Guidelines" address http://developer.apple.com/library/ios/#documentation/userexperience/ Conceptual/mobilehig/iconsimages/iconsimages.html

Apple-touch-icon property details about Apple device private