Reputation: 51
I have decided to change my web app icon for iOS.
This is the way I used to link my icons:
<!-- iOS 7 iPad (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-152x152-precomposed.png"
sizes="152x152"
rel="apple-touch-icon-precomposed">
<!-- iOS 6 iPad (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-144x144-precomposed.png"
sizes="144x144"
rel="apple-touch-icon-precomposed">
<!-- iOS 7 iPhone (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-120x120-precomposed.png"
sizes="120x120"
rel="apple-touch-icon-precomposed">
<!-- iOS 6 iPhone (retina) -->
<link href="/assets/img/misc/ios/apple-touch-icon-114x114-precomposed.png"
sizes="114x114"
rel="apple-touch-icon-precomposed">
<!-- iOS 7 iPad -->
<link href="/assets/img/misc/ios/apple-touch-icon-76x76-precomposed.png"
sizes="76x76"
rel="apple-touch-icon-precomposed">
<!-- iOS 6 iPad -->
<link href="/assets/img/misc/ios/apple-touch-icon-72x72-precomposed.png"
sizes="72x72"
rel="apple-touch-icon-precomposed">
<!-- iOS 6 iPhone -->
<link href="/assets/img/misc/ios/apple-touch-icon-57x57"
sizes="57x57"
rel="apple-touch-icon-precomposed">
and this is the new method I discovered:
<link rel="apple-touch-icon" href="/assets/img/misc/ios/icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/misc/ios/icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/misc/ios/[email protected]" />
<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/misc/ios/[email protected]" />
However the new method not work when I test it on my so I wanted to know what is the absolute correct way of making a web app icon appear for IOS6 & IOS7?
Upvotes: 4
Views: 1976
Reputation: 468
Per the documentation,
To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.
So technically your new method should be fine. Note the documentation lists the sizes for iOS 7. If you have all of the correct sizes they will be used specifically.
If you do not have all the correct sizes,
the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
This means you could just include the iOS 7 sizes. I don't see any reason to to put any extra effort into adding or removing the older icons. But if the quality requires it, include the correct sizes for all versions of iOS.
If no icons are specified using a link element in the html
the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:
apple-touch-icon-76x76.png
apple-touch-icon.png
So you don't actually have to use the link elements either as long as you name your files correctly and place them in the root directory.
Here's a link to Apple's documentation on Specifying a Webpage Icon for Web Clip
Upvotes: 2