Give Your Website a Custom iPhone Bookmark Icon
This tutorial will show you how to get your own custom icon to appear when someone bookmarks your website on their iPhone home screen. Whether or not you own an iPhone, it takes under five minutes to do and makes your site look that much more professional, so let’s get rolling.
Design Considerations
Here is an excerpt from the iPhone Dev Center’s official guidelines for making the icon.
To ensure that your icon can take advantage of the visual enhancements iPhone OS provides, produce an image in PNG format that:
- Measures 57 x 57 pixels, with 90 degree corners (if the image measures other than this size, iPhone OS scales it)
- Does not have any shine or gloss
- Does not use alpha transparency
Here’s what the icon that I made for Build Internet looks like:
Initially I was going to use Build Internet’s Twitter icon for this, but the gloss and rounded made it “less than pretty”, so I added some light rays to the plain black background to help it pop out a little more.
Using the Icon
Now that we have an icon, there are two ways to get it working.
Root Directory
If you have access to the root directory, this is the easiest option. All you have to do is name your file apple-touch-icon.png (or for a non-glossy icon name it apple-touch-icon-precomposed.png) and drop it in the root, the iPhone does the rest.
Link to It
You can link to the icon from the header of your website, which allows you to custom name the icon image, as well as put it in in any directory you like.
The HTML for glossy icon:
<link rel="apple-touch-icon" href="/icons/buildinternet_iphone.png" />
The HTML for non-glossy icon:
<link rel="apple-touch-icon-precomposed" href="/icons/buildinternet_iphone.png" />
Congratulations, your site is now a iPhone bookmark friendly.
