Industry guru Dave Taylor offers free tech support on a wide variety of technical and business topics, including HTML, Apple iPhone, online advertising, Cascading Style Sheets, Web design, management, Unix, Linux, search engine optimization, online dating, Mac OS X, shell script programming and Microsoft Windows.

How to create a custom Apple iPhone icon for your Web site

One of the features added to the latest revision of the Apple iPhone operating system that's garnered quite a bit of attention is the ability to save Web page bookmark icons directly on the main screen of the phone. Experimentation reveals that some sites have cool icons while most are just miniature representations of the Web site. What's the difference? Read on and find out, including step-by-step directions on how you can easily ensure your own site (or blog!) has a custom iPhone icon too.

I've had a variety of different cellphones in the last few years as the technology underlying the cellular network has evolved from being about phone calls to offering up a wide variety of services, many of which have a small but growing price tag associated. A year ago I had just bought a Blackberry Pearl and was finding it a wonderful evolutionary step from the Motorola RAZR which, upon reflection, was all about the form factor and definitely not about the phone capabilities (especially with the crippled Verizon RAZR operating system).

The Apple iPhone represents a significant step in the evolution of these phone systems, however, because, like the iPod itself, Apple continually tweaks and tunes the operating system with updates. I can recall at least five updates since the phone was released, updates that generally improved stability and functionality, but also added new features and even entirely new applications (in this case I'm thinking of access to the iTunes Store, which just *poof* appeared one day).

The latest update to the phone, 1.1.3, added a very important new feature to the phone system, one that finally gives you the ability to truly customize and tweak the phone's base screen for your personal tastes and requirements: Home Screen Bookmarks.

Let me show you how it works, then I'll explain how to make a custom icon for those bookmarks too.

Here's AskDaveTaylor as shown in the iPhone Safari browser:

Apple iPhone: Safari: Viewing Ask Dave Taylor Tech Support

Cute, eh? Everything in miniature, even my shrunken voodoo head.

To bookmark this - or any other page - you simply tap on the "+" symbol along the bottom of the screen, which brings up:

Apple iPhone: Safari: Creating a Bookmark for Ask Dave Taylor Tech Support

"Add Bookmark" adds it to your bookmark menu, but the interesting feature here is Add to Home Screen. Tap it and you'll now have a chance to fine-tune the name of the bookmark:

Apple iPhone: Safari: Naming Bookmark for Ask Dave Taylor Tech Support

In this instance, shorter is definitely better. Even here, by adding the " 2" to the default "Tech Support" it kinda messes up the display on the iPhone screen, showing "Tech...port 2" to fit. Instead, I'll actually skip the "2" so you can see the default home screen bookmark:

Apple iPhone: Safari: Home Page bookmark - default - for Ask Dave Taylor Tech Support

It's kind of hard to see, but the icon itself is a tiny representation of the home page of the site, with the "Ask Dave" button supplying the red dot on the right side. Above and to the right you can see custom home page bookmark icons for Meebo.com and Twitter.com.

How'd they do it and how can I have my own custom icon too?

It's surprisingly easy. You need to create a PNG format graphic file that's 45x45 pixels in size, name it apple-touch-icon.png and drop it in the root directory of your Web site. Here's what I had my graphics guy create:

You'll notice that it's just a regular rectangular graphic image with no rounded corners or other fancy stuff. I've added the gray edge so you can see how big it is too, that's not part of the graphic. Later you'll see that the iPhone itself automatically rounds off the corners and adds a slight glassy reflection on the top half of the icon to make it more three-dimensional.

Anyway, adding that graphic is enough that when I again try to bookmark the AskDaveTaylor site with a home page bookmark on the iPhone, it's a much improved icon:

Cool, eh? I'm now busy creating similar little icons for all of my sites so that iPhone users can enjoy shortcuts to all of my sites.

If you can't add the icon graphic to the root directory of your Web site, or just want to keep things organized in subfolders, you can add a link command to specify a different filename or different location for the apple-touch-icon.png file:

That's all there is to it. Go forth, create your icon, and enjoy!

Thanks to Dan Dickinson, Anil Dash and, of course, Apple for detailing exactly how to accomplish this nifty trick.

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Stumble Upon

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

The size for the icons is 57 x 57, not 45 x 45. Says on the Apple article.

Posted by: forhire at January 24, 2008 7:58 AM

Sweet man,

This was a 5 minute fix and will really impress the users for our site! Thanks for the info.

Posted by: ryguy61 at January 25, 2008 3:08 PM

Found another site that said 158 pixels squared and it worked brilliantly! HUGE difference and clean, clean edges on the PNG icon. Never would have known about it or played with it if it weren't for you, Dave. Thanks!

Posted by: Bryan A. at January 27, 2008 1:39 PM

I found this website that has a decent collection of icons for popular websites. The site uses the same steps as described above, but it assigns the icons provided on the site instead of the actual icon. This is good for the sites that don't have and icon. Some of the icons look better than the real icons.

Posted by: Tim Hunter at February 8, 2008 10:11 AM

i got my iphone xmas of 2007, a few mths ago but i dont seen to see where i can "add" a icon just a book mark?

Posted by: Andrew at February 19, 2008 4:24 PM

Andrew, sounds like you need to update your iPhone to the latest firmware. That's where this feature shows up!

Posted by: Dave Taylor at February 20, 2008 11:30 PM

is there a way for the end user to create a new icon and assign it on the iphone to a home screen link that doesn't have an iphone icon??

Posted by: magnetogurl at March 1, 2008 3:49 PM

Thanks for the help, I added an icon for my OWA mail. Seems to be working great. If I wanted to remove it at any point how would I go about doing that?

Posted by: Erica at March 14, 2008 1:28 PM

i can't insntall my mp4 aplication cd in my computer i have window xp it says is no a valid win 32 aplication,thanks - can you helpme.

Posted by: Humberto at April 20, 2008 1:50 PM

Thanks, Dave! That's just the ticket!

Posted by: John Scrip at May 10, 2008 12:39 AM

How can I do this on a blog? I have a blogspot site, and i'd love to have this icon on my iPod touch!!

Thanks

Posted by: Francisco at May 11, 2008 8:19 PM

hi all, you can use 'IconEdit2' to create your own icon. it is easy to use and supports various file formats.

more info:
http://sharewarecheap.com/IconEdit2_software_2101.html

Posted by: xizizon at June 30, 2008 12:36 AM

Dave:

You're absolutely a life-saver w/ this post! Great instructions!

I wasn't able to get this to work w/o using the "link" method from the header. I've been meaning to place my favicon.png the same way as well so it was a welcome modification.

Also, Bryan A was right that the size of 158 pixels makes for a MUCH crisper image when sized down on the iPhone. I experimented w/ the 45 pixels at first and can see them side-by-side now on my iPhone - much cleaner at 158.

Posted by: Nick Owens at July 20, 2008 3:26 PM

Any hack to be able to do this if you don't have access to your root, like if your using Blogger? thanks!

Posted by: dot at August 7, 2008 9:43 AM

nevermind, apparently i don't read too well :)

Posted by: dot at August 7, 2008 10:10 AM

Does this work on the Firmware 2.0 and up?

Posted by: Chris Lim at August 14, 2008 12:53 PM

I saw that article on making the images 158x158. I tried this and did not see a noticeable difference.
As for the icon size, 57x57 is indeed the size needed, but the iPhone tends to clip the image. Even though you want to use 57x57, your working size is about 45x45. The rest can be blank.

Posted by: Charles Scott at August 19, 2008 4:29 PM

Dave,

It looks like you've been taking digital photos of your iPhone screen. Try this out:

- Hold the Home button
- Within 6 seconds (which is when the iphone will force-close whichever app is open) press the power button on the top of the phone
- Click! Go look in your Camera roll in your photos

Posted by: Gareth at September 9, 2008 7:20 AM

Ayup. The new iPhone 2.x OS supports screen shots, which is a great blessing for my work. This article was written before that feature was added...

Posted by: Dave Taylor at September 9, 2008 8:02 AM

Just a bit to add: You can make your PNG with a transparent background, then make the home screen icon, and then drag it down to the mesh strip on the bottom... the mesh will show thru the transparent background.

Posted by: Peter at September 25, 2008 8:27 PM

i was just wondering is there a place or site where we can submit ideas for the aplications of the ihone, for instance a shopping list with all the goods from a storehas to offer with pictures as icons to check on and off, another to keep track of your vehicle,miles, & service, ossibly advise you about 1 week of due dates for maintance...know what i mean? thanks

Posted by: rob g at October 24, 2008 4:14 PM

Awesome! Thanks for the info! cute!

Posted by: Josh Hall at December 6, 2008 10:12 PM

Why you don't make screenshot's on the iPhone. It looks a lot better.. Just hold down the power butten and then the homescreen button. FLASH on the screen and the screenshot is saved in your photo's

Posted by: Nick at September 23, 2009 6:43 AM

Ok I'm not web savvy but I understand root folder... However I'm using iWeb and can't access my root file... But I don't understand how to
"add a link command to specify a different filename or different location for the apple-touch-icon.png file:"

can you offer a little more detail about doing this??

Posted by: Matthew S. Hicks at September 24, 2009 2:20 PM

Wow

This is brilliant.
Can't actually believe that it's this simple and the iPhone even does the work of smoothing the corners for you.

Will come in very handy for my sites.

Thanks

Posted by: P Mitchell at October 28, 2009 6:41 PM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!