Create a custom iPhone icon for your website
August 30th, 2008
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: 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.
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:
http://www.ianhoar.com/apple-touch-icon.png
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.
Responses
16 Comments to “ Create a custom iPhone icon for your website ”
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.Really great stuff. I do have one request though.
I am an illustrator and would love to add a custom button, but I am using iWeb. I’ve tried your suggestions, and still can’t get the button to link up. Any suggestions?
Thanks.
You should be able to make an icon in Illustrator or any graphic application that can save a PNG or JPG, but I suggest a PNG. Illustrator has a save for web the same as Photoshop, find it under File / Save for Web & Devices. You can even resize it in this dialog.
iWeb which I have not used should not really play a roll. As long as you name your icon apple-touch-icon.png and put it in the root or use the snippet of HTML in the head to tell mobile safari where it is, it should work. Hope this helps.
Actually Apple is using 129×129 pixels:
http://www.apple.com/apple-touch-icon.png
I made mine 57×57 because it’s the native iPhone icon size:
http://blog.tice.de/beitrag.php?file=2008_01_18_0204
Thanks for the tip, nice read.
Thanks Tice, this is probably future proofing the icons. Newer iPhones will no doubt run at a higher resolutions.
Justin - I have done this with an iWeb-generated site but I do not think you can do it within iWeb. You MIGHT make it work by inserting an html snippet on the page with iWeb, but the png graphic would still need to be inserted manually as iWeb will not know about it and will keep deleting it! (just possibly you could also include the png on as a graphic on the page to stop this, but this sounds very contrived!). I instead edited the html after publishing from iWeb with TextWrangler and inserted the snippet by hand. The html you want to edit is that for the page you want to link (home perhaps).
More seriously the html given by Ian did not work for me. I used:-
which assumes the png is placed in the Home_files folder that will already exist. But the important change is the omission of the slash at the start of the quoted href, which seems vital. I tried other possibilities but this is the one that worked!
link rel=”apple-touch-icon” href=”Home_files/apple-touch-icon.png”
(without html brackets or it does not appear!)
Hi Will, thanks for the feedback. In my example I’m using an absolute path, which will grab the png from the root of your server. A relative path will also work fine.
Yes - I understand but the root-of-server is often hard to identify for sure! iWeb tends to create an ‘outer’ minimal index.html file then a folder with the site inside containing an ‘inner’ index file. Trying to use either of these seems ineffective for me (I have different websites uploaded to a remote server and synced to an old Mac on site), whereas inserting in the entry page html (home, say) works fine.
Thank you for your tutorial. It was very helpful. I am wondering if there is a known way to make this process more user friendly for website viewers.
What I mean is:
Is there a script to attach to a button, on the website that will automatically either bring the iphone user to the “add to home screen page” or even better auto add the icon.
Thanks,
HAGVIST
Hi HAGVIST, as far as I know there is no way to do this, but I could be wrong. If there is, it is highly unlikely you can have it auto add. Most iPhone user actions like bookmarking or saving have a confirmation dialogue.