IPhone home page bookmark icon creation tutorial
If, like me you’ve got an IPhone, you’ll probably have noticed that when you bookmark a web page in Safari, you get three options:
- Add Bookmark
- Add to Home Screen
- Mail link to this page
The first and last options are pretty simple and self-explanatory but the second is a bit more interesting. “Add to Home Screen” will create an icon on your IPhone home screen alongside the icons for your IPhone apps which when clicked will take you straight to the bookmarked web page. Brilliant eh?
Even better, you can create and specify a custom icon for your web page in much the same way as you would with a traditional favicon – but it’s even simpler! Here’s how:
- Create your icon as a square image. You can create it at any size though the native size is 57×57 pixels and you can use any web-compatible format e.g. JPEG, PNG, GIF (in RGB mode rather than CMYK). The IPhone will take care of rounding the corners and adding the glossy overlay for you.
- Upload your icon to somewhere on the web
- Add the following line in the head tag of your web page (X)HTML:
<link rel="apple-touch-icon" href="/path/to/icon.jpg"/>
That’s it!
Here’s an example (bottom-right icon) from the BBC IPlayer (http://www.bbc.co.uk/mobile/iplayer – visit this on an IPhone to see the code in action):
I found all this info through various experiments involving setting up icons, taking screen grabs from my IPhone and transferring them back to my Mac then analysing in Photoshop.
You may find website stating that you have to use a 57×57 pixel PNG file or other such nonsense but trust me, I tried a lot of combinations and any size (though you should make sure your image is at least 57 x 57 pixels otherwise it’ll get scaled up and therefore will be poor quality) and format (as long as it’s web compatible – that is a jpg, gif or png image in RGB format) will do.
Hope that helps you…