Just a heads up as mobile - and thus Apple products - become more prevalent: they typically request a different icon set than favicon. If you do not provide approprite icons, typically used as Home screen 'web clip' links to your site, search results, document icons, et al a page snap-shot (often not attractive) may be used instead.
See Custom Icon and Image Creation Guidelines
It can work out to quite a few sizes/resolutions for various screens plus some that apply if providing a mobile app. I recommend reading not just the page linked above but also all the information - and there is a lot to read and digest - linked from that page.
Yes, it is a bit of effort but it can make a huge difference in how a site is perceived and used.
Most Missed Site Mobile Optimisation
Started by iamlost, Feb 17 2012 12:12 PM
4 replies to this topic
#2
DonnaFontenot
-
- Admin - Top Level
-
- 3297 posts
Peacekeeper Administrator
- Twitter:http://twitter.com/DonnaFontenot
- Facebook:http://www.facebook.com/donna.d.fontenot
Posted 17 February 2012 - 02:13 PM
Isn't that just for apps?
Hmm, never mind, I do see the "web clips" section way down the page.
It also says: "To learn how to add code to your web content to provide a custom icon, see Safari Web Content Guide.
Yeah, whatever. I tried finding that info there, and gave up. Couldn't find it.
Hmm, never mind, I do see the "web clips" section way down the page.
If you have a web application or a website, you can provide a custom icon that users can display on their Home screens using the web clip feature. Users tap the icon to reach your web content in one easy step. You can create an icon that represents your website as a whole or an icon that represents a single webpage.
It also says: "To learn how to add code to your web content to provide a custom icon, see Safari Web Content Guide.
Yeah, whatever. I tried finding that info there, and gave up. Couldn't find it.
#3
iamlost
-
- Admin - Top Level
-
- 4049 posts
The Wind Master
Posted 17 February 2012 - 03:24 PM
Since iOS 1.1.3 Mobile Safari looks in site root for a file titled
Thus:
apple-touch-icon.png would be resized as necessary for the various screens and resolutions. And certain effects (rounded corners, drop shadow, reflective shine) are added.
Since iOS 2 there is the ability to use an icon that turns off the added effects:
Since iOS 4.2 there is support for multiple icons to minimise or eliminate the need for resizing. So, again in the site root, I recommend adding:
If one does not want the default added effects then:
Note: some webdevs like to cover all the bases and list all varieties such as:
If there is reason to over-ride the above for a particular page or pages then in the page <head> one can add something such as:
*Note: the order of precedence is:
1. an on page <link> as immediately above.
2. the image from the site root.
3. thumbnail of page screenshot.
In both 1 and 2 above the precedence is:
1. 'precomposed' in appropriate size for device viewport, i.e. apple-touch-icon-72x72-precomposed.png
2. default (non-precomposed) in appropriate size for device viewport, i.e. apple-touch-icon-72x72.png
3. default non-sized 'precomposed': apple-touch-icon-precomposed.png
4. default non-sized non-precomposed: apple-touch-icon.png
apple-touch-icon.pngIf it exists it gets used as a Web Clips Bookmark on the user's Home screen, if it does not then a page thumbnail screenshot is generated and used.
Thus:
apple-touch-icon.png would be resized as necessary for the various screens and resolutions. And certain effects (rounded corners, drop shadow, reflective shine) are added.
Since iOS 2 there is the ability to use an icon that turns off the added effects:
apple-touch-icon-precomposed.pngSo much for history.
Since iOS 4.2 there is support for multiple icons to minimise or eliminate the need for resizing. So, again in the site root, I recommend adding:
apple-touch-icon.png apple-touch-icon-57x57.png apple-touch-icon-72x72.png apple-touch-icon-114x114.png apple-touch-icon-144x144.pngNote: the default is still there if one of the specified sizes fails or is inappropriate.
If one does not want the default added effects then:
apple-touch-icon-precomposed.png apple-touch-icon-57x57-precomposed.png apple-touch-icon-72x72-precomposed.png apple-touch-icon-114x114-precomposed.png apple-touch-icon-144x144-precomposed.png
Note: some webdevs like to cover all the bases and list all varieties such as:
apple-touch-icon.png apple-touch-icon-precomposed.png apple-touch-icon-57x57.png apple-touch-icon-57x57-precomposed.png apple-touch-icon-72x72.png apple-touch-icon-72x72-precomposed.png apple-touch-icon-114x114.png apple-touch-icon-114x114-precomposed.png apple-touch-icon-144x144.png apple-touch-icon-144x144-precomposed.pngNote: see note* below.
If there is reason to over-ride the above for a particular page or pages then in the page <head> one can add something such as:
<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" />Note: once again the default resizable is included for failover.
*Note: the order of precedence is:
1. an on page <link> as immediately above.
2. the image from the site root.
3. thumbnail of page screenshot.
In both 1 and 2 above the precedence is:
1. 'precomposed' in appropriate size for device viewport, i.e. apple-touch-icon-72x72-precomposed.png
2. default (non-precomposed) in appropriate size for device viewport, i.e. apple-touch-icon-72x72.png
3. default non-sized 'precomposed': apple-touch-icon-precomposed.png
4. default non-sized non-precomposed: apple-touch-icon.png
#4
DonnaFontenot
-
- Admin - Top Level
-
- 3297 posts
Peacekeeper Administrator
- Twitter:http://twitter.com/DonnaFontenot
- Facebook:http://www.facebook.com/donna.d.fontenot
Posted 17 February 2012 - 04:25 PM
So, then, no code is actually needed at all, unless one wants to use different names for the image files for particular situations. But if you use the standard image names you list above, across the board, with no pages needing anything different, then just dropping the images into the root folder with the appropriate names is sufficient. Right? Am I understanding that correctly?
And...if you recommend this:
apple-touch-icon.png
apple-touch-icon-57x57.png
apple-touch-icon-72x72.png
apple-touch-icon-114x114.png
apple-touch-icon-144x144.png
What size do you recommend for the apple-touch-icon.png file?
And...if you recommend this:
apple-touch-icon.png
apple-touch-icon-57x57.png
apple-touch-icon-72x72.png
apple-touch-icon-114x114.png
apple-touch-icon-144x144.png
What size do you recommend for the apple-touch-icon.png file?
#5
iamlost
-
- Admin - Top Level
-
- 4049 posts
The Wind Master
Posted 17 February 2012 - 05:29 PM
YesSo, then, no code is actually needed at all, unless one wants to use different names for the image files for particular situations. But if you use the standard image names you list above, across the board, with no pages needing anything different, then just dropping the images into the root folder with the appropriate names is sufficient. Right? Am I understanding that correctly?
You simply need a size that looks good scaled to the sizes specified.What size do you recommend for the apple-touch-icon.png file?
Two points to consider:
* Apple themselves (currently) uses 129x129.
* what is most important is correct aspect ratio and a resolution at least as high as the largest final output.
For reference:
* iPhone up to and including 3GS: 57x57
* iPhone 4 and up: 114x114
* iPhone Retina: 144x144
* iPad: 72x72
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
