Jump to content

Cre8asiteforums

Web Site Design, Usability, SEO & Marketing Discussion and Support

  • Announcements

    • cre8pc

      20 Years! Cre8asiteforums 1998 - 2018   01/18/2018

      Cre8asiteforums In Its 20th Year In case you didn't know, Internet Marketing Ninjas released many of the online forums they had acquired, such as WebmasterWorld, SEOChat, several DevShed properties and these forums back to their founders. You will notice a new user interface for Cre8asiteforums, the software was upgraded, and it was moved to a new server.  Founder, Kim Krause Berg, who was retained as forums Admin when the forums were sold, is the hotel manager here, with the help of long-time member, "iamlost" as backup. Kim is shouldering the expenses of keeping the place going, so if you have any inclination towards making a donation or putting up a banner, she is most appreciative of your financial support. 
Sign in to follow this  
iamlost

Most Missed Site Mobile Optimisation

Recommended Posts

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.

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.pngapple-touch-icon-57x57.pngapple-touch-icon-72x72.pngapple-touch-icon-114x114.pngapple-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.pngapple-touch-icon-57x57-precomposed.pngapple-touch-icon-72x72-precomposed.pngapple-touch-icon-114x114-precomposed.pngapple-touch-icon-144x144-precomposed.png

 

 

Note: some webdevs like to cover all the bases and list all varieties such as:

 

apple-touch-icon.pngapple-touch-icon-precomposed.pngapple-touch-icon-57x57.pngapple-touch-icon-57x57-precomposed.pngapple-touch-icon-72x72.pngapple-touch-icon-72x72-precomposed.pngapple-touch-icon-114x114.pngapple-touch-icon-114x114-precomposed.pngapple-touch-icon-144x144.pngapple-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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×