Create a custom iPhone icon for your website
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:
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.
justin September 1, 2008 at 8:58 pm
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.
Ian Hoar September 1, 2008 at 10:20 pm
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.
Tice September 2, 2008 at 12:50 am
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
Deeda September 2, 2008 at 11:37 pm
Thanks for the tip, nice read.
Ian Hoar September 4, 2008 at 6:05 pm
Thanks Tice, this is probably future proofing the icons. Newer iPhones will no doubt run at a higher resolutions.
Will Stewart September 14, 2008 at 4:39 am
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!
Will Stewart September 14, 2008 at 4:42 am
link rel=”apple-touch-icon” href=”Home_files/apple-touch-icon.png”
(without html brackets or it does not appear!)
Ian September 14, 2008 at 10:19 am
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.
Will Stewart September 14, 2008 at 12:27 pm
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.
HAGVIST September 20, 2008 at 12:11 am
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
Ian Hoar September 20, 2008 at 11:01 am
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.
JDawson January 18, 2009 at 6:19 pm
Hey i got it up and running on my site but i use dot.tk and when your on my site http://www.codeone.tk it does not work but it does on the sub domain http://www.code1.4umer.com now i added the icon using the HTML code but for some reason my URL forwarding from http://www.dot.tk does not even have it in its HTML source. If anyone could help that would be great. O and also i cant upload pic to the root on forumotion.
Ian Hoar January 20, 2009 at 6:39 pm
Hi JDawson, I think it has something to do with frames in your main domain. The icon will come from your top level frame and if it’s not there it won’t show up.
Stijn Jasper June 14, 2009 at 12:24 pm
Thank you for this great tutorial. I’ve used it for my own website.You should add my website on your iPhone: Moviecrew.nl
Here is the image i’ve made: http://www.moviecrew.nl/apple-touch-icon.png
Loriot July 14, 2009 at 7:30 pm
Hey, thanks a million for this informative tutorial. It helped me improving my skills badly. It’s ever awesome to get some motivating inspiration and I hope to find more of such posts here soon because no one will ever stop learning new stuff. Regards
Deb Phillips August 17, 2009 at 6:55 am
I just today realized this was an issue that needed to be addressed. (I don’t own an iPhone or iTouch, but my site logs have occasionally indicated the necessary icons were being searched for but not found.) Thanks a lot for this informative post, including the helpful screenshots.
Jamie November 15, 2010 at 9:12 am
Is it possible to have a different icon for each sub-domain? Can anyone tell me how to set that up?
Ian Hoar November 15, 2010 at 10:06 am
You have to link it.
<link rel="apple-touch-icon" href="/your_directory/myicon.png" />
Khurram February 1, 2012 at 4:12 pm
Can you please guide me … if user browse our website on iphone and he will receive auto alert to add iphone icon ????