Until recently, favicons were an easy way to uniquely identify a site or application in the browser’s address bar or within the bookmarks menu.
But as more users browse the web on their mobile devices, they are likely to bookmark some of their favorites on the desktop of said device.
As such, it’s not a bad idea to make sure your project translates easily to the mobile desktop. Creating an iPhone, iPod, and iPad-compatible icon is easy…
Simply create an 57×57 pixel PNG, ICO, or alpha-transparent GIF file. According to Apple, they recommend that the icon have 90-degree edges as the operating system will automatically round the edges.
To ready the icon for download, include this in the header of your page:
That’s it!
Michael Novotny says
I would also like to note that there is a “shortcut” to getting this applied as well…
The above method is necessary if you have the icon in a folder somewhere, but you can also simply add the image to the root directory of your website and name it “apple-touch-icon.png” (rounded corners and gloss will be added automatically). iDevices will automatically look for it.
Also, if you want to add your own gloss or simply don’t want Apple to add it for you, you’d want to use this code instead of the code above (the key being the “precomposed” part).
Just some extra tips / tricks I thought I’d toss in…
Tom says
Nice!
sokkz says
Nice, nice, nice! I was actually just wondering how this worked and figured you’d have to have an iPhone dev license with Apple or some nonsense. Thanks for posting this!
I wonder if it can handle animated gifs? I don’t think anyone would actually do it, but it’d be pretty hilarious to have an animated gif icon on the iPhone/iPad menu.
Michael Novotny says
I’m fairly certain that you can only use a .png. Sorry to spoil the fun… =(