1

I have read that there are many apple touch icon size.

just like that : 

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

In the theme i have bought, my code look like that : 

<link rel="apple-touch-icon" href="logo.png" /><style type="text/css" media="all">

So the question is : what size should the icon be, if no size specified, and how the thevice will handle it ?

My guess, i will make the icon 144x144 and all the above will be scale down appropriately !

*reference : What size should apple-touch-icon.png be for iPad and iPhone 4?

Community
  • 1
  • 1
menardmam
  • 9,860
  • 28
  • 85
  • 113

1 Answers1

2

According to this Apple Developer page, if no size is specified, it defaults to 57x57... but I believe the device will scale it appropriately if you have a larger icon in there, so 144x144 would work.

If you have access to the code though, why don't you change what's in there and specify the different sizes? That way each device will only download the appropriately-sized image for its screen and save some bandwidth (which is important on mobile devices that may be on slow 3G or even pre-3G connections).

One caveat is that really old devices do not understand the "sizes" attribute and will end up loading the last specified element... so you should keep the 57x57 icon at the bottom of the list.

Lastly, note that the filenames in your first sample code can be changed; if "apple-touch-icon-114x114.png" makes more sense to you than "apple-touch-icon-iphone4.png", feel free to use that (or whatever you prefer) instead. Just make sure the URL in the href attribute matches the file name you're using! The only concern with this is to make sure you have a file that matches one of the four default images so that any page that doesn't have the apple-touch-icon links specified will still have a default. The four images are (in the order they're checked):

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png
Doktor J
  • 1,058
  • 1
  • 14
  • 33