An iPhone user can add your site to their home screen (and why wouldn’t they, such a nice site! ). This is done by:
When this happens, the iPhone needs to figure out an icon to use for the home screen. It proceeds like this:
<link rel="apple-touch-icon" href="...">tag in the head of your page? If so, the image referenced in the
hrefattribute is used. If not?
/apple-touch-icon.png. If so, it becomes the icon. If not?
In all of the cases, the icon is beautified for free by the use of a gloss and rounded corners. It’s also resized to fit the dimensions of an icon.
So what can you do to better represent your site on the user’s home? Well, just make sure you have a 57×57 pixel icon and then you:
apple-touch-icon.pngand forget it, or
I see some sites do both – name the file
apple-touch-icon.png, put it in the root and also add a link tag referring to the file. But that’s overdoing it a little.
If you don’t like the default rounded gloss the iPhone uses to beautify your icon and you think you can do better, you have the option to do so by using the filename
Some examples in the wild:
[...] If you want to provide close-to-native iPhone experience in your pages, how about using shiny glossy icons, just like those used on the home screen. [...]
When using the link rel=”apple-touch-icon” method, if the file pointed to is named apple-touch-icon-precomposed.png it will still have gloss affect. To fix this you can use – link rel=”apple-touch-icon-precomposed” which will stop the iPhone from adding the gloss effect.
[...] to [PhonyDev] Share and [...]