Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Most Missed Site Mobile Optimisation


  • Please log in to reply
4 replies to this topic

#1 iamlost

iamlost

    The Wind Master

  • Site Administrators
  • 4610 posts

Posted 17 February 2012 - 12:12 PM

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.

#2 DonnaFontenot

DonnaFontenot

    Peacekeeper Administrator

  • Site Administrators
  • 3804 posts

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.

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

iamlost

    The Wind Master

  • Site Administrators
  • 4610 posts

Posted 17 February 2012 - 03:24 PM

Since iOS 1.1.3 Mobile Safari looks in site root for a file titled
apple-touch-icon.png
If 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.png
So 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.png
Note: 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.png
Note: 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

DonnaFontenot

    Peacekeeper Administrator

  • Site Administrators
  • 3804 posts

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?

#5 iamlost

iamlost

    The Wind Master

  • Site Administrators
  • 4610 posts

Posted 17 February 2012 - 05:29 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?

Yes :)

What size do you recommend for the apple-touch-icon.png file?

You simply need a size that looks good scaled to the sizes specified.
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



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users