If you own an iPhone you may have noticed that you can bookmark websites and add them to your home screen. These are called Webclip Icons and they are either a snapshot of the website or an actual website icon similar to a favicon that shows up in a desktop browsers address field. If you want to add an iPhone icon to your site it’s very easy to do.
First create your icon or grab your website logo. In my case I used the same logo as I used for my favicon which is the I in my name. You can make this any size you wish and it will be scaled up or down by the iPhone. I made mine a 57 x 57 pixel PNG which seems to be the size of icons when measure on screen. Anything smaller than this may appear blurry as the iPhone will upscale the image. Some people have used larger files and even jpgs without issue. Whatever size you choose, make sure the icon is square otherwise the iPhone will crop the image. Don’t worry about the icon glass effect or rounded corners, I will talk about this in a minute. The format that the iPhone does screenshots in is the PNG format and they will generally look better if done correctly, but they will be slightly larger in file size than a JPG.
Update 1: Reader Tice wrote below that that the size Apple is using is 129 x 129 pixels. This is far larger than needed for current iPhone screens but I would imagine future proofs the icon for higher resolution iPhones that may be available in the years to come. The icon may also be used in other ways that I am not aware of. Link to Apple icon: http://www.apple.com/apple-touch-icon.png.
Update 2: Apple did indeed update the iPhone screen. The new Retina display (iPhone 4 and up) is two times the resolution of the old screen. This means if you want crystal clear icons you need to set them up at 114px x 114px or higher. Chances are the iPod’s and iPad’s will also eventually get the Retina treatment, so remember bigger is clearer.
Once you have your icon you can let an iPhone recognize it by one of two ways. Either save it as apple-touch-icon.png and add it in the root of your server, so in my case:
Alternately, if you do not have access to the root or want multiple icons you can link to your icon in the head of your HTML.
<head> <title>My Site</title> <link rel="apple-touch-icon" href="/directory/myicon.png" /> </head>
What about the glass effect and rounded corners? Well you don’t have to worry about those, the iPhone adds those effects for you, and that’s why all icons have a nice uniform look. Just upload the files and everything should be in working order. Here is an example of what my icon looks like before it shows up in an iPhone.
Adding your icon goodness to the iPhones home screen
If you don’t have an iPhone but want to have an icon available for iPhone users and you have followed these steps, your icon should now be working and available for iPhone users, of course you will not know for sure until you test it out for yourself.
Fire up Safari and load up your site. Then touch the little plus icon to add a bookmark, the screen below will pop up. Touch add to home screen and confirm, now you should have a nice glass icon somewhere on your home screen.
Move your icons around
This may be obvious for some, if you would like to move your icon or any other icons on the home screen all you have to do is hold down on any icon. After a few seconds all the icons on the screen will start shaking and any you have added or installed will have little x marks beside them. These x marks are to remove or uninstall the link or app. To move an icon you can now just slide it around with your finger and even move if from screen to screen if you have multiple screens of icons. To set the icon just press the on button.
For more information on resolution and size tips Dan Dickinson’s blog has a few other tips if you run into any issues. Basically most of them come down to trying different resolutions, but I found the 57 x 57 worked out fine for me.
- Enjoy this post? Try the RSS feed.