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:
Cute, eh? Everything in miniature, even my shrunken voodoo head.
To bookmark this – or any other page – you simply tap on the ~ez_ldquo+ez_rdquo~ symbol along the bottom of the screen, which brings up:
“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:
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:
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 45×45 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!
This quick tip has inspired me to have a go at creating my own icons. Thanks for this. It’s very handy.
Great tip! Thanks for the help.
[…] How to create a custom Apple iPhone icon for your Web site, by Ask Dave Taylor […]
Thanks for this information.. was really helpful. I’m trying the same method for my website iPhone service Επισκευή iphone
Hi, how do I delete all those icons which I created by the Add To Home Screen option? I have iOS6 and tried to delete it in the iTunes on my laptop, but there’s none of those saved links in the list of apps that I can delete. Though it’s fair enough, the saved links are not apps, yet how can I delete them, please?
Hi, is there a way to create a non-glossy icon to the home screen?
Thank you so much for this valuable information
HELLO MY NAME IS ……..
Thank you,
It worked very well, perfect
My website is prestashop based. It’s also hosted on my own unix server. it’s a subfolder in my www.
i’ll explain it better: the main website is voltumna.cjb.net
e-piazza.biz domain is redirected to voltumna.cjb.net/e-piazza
what you see on e-piazza homepage is in voltumna.cjb.net/e-piazza/themes/prestashop/header.tpl
there is also index.tpl but it just as a HOOK Header
i’ve dropped the icon.png (for ipod ipad and iphone4) either in e-piazza folder and in prestashop where header.tpl is. i’ve even used an universal link http://voltumna….png but still no success.
any idea?
Incredible! I didn’t know it until today! Now I can put it on my Diseño Gráfico minimalista website. Love it!
Thanks
Thanks, got my Iphone Icon now avaible for my Website. – Hoesje
Thanks, got my Iphone Icon now avaible for my Website. Handy Information
Try my online iPhone/ipad generator at http://www.quirco.com/iPhoneIcon/
Hi Dave, thanks for sharing such great info. Like professionals we think that this article is really worth reading for everyone who’d like to have a custom app icon.
Hi Dave, can you help me how to create a custom icon for other smarthphones than Apple for my Web site.
Thanks in advance
Job well done!
I put an app of my site on my phone I also put a link to your instructions on my site. I was just wondering how I could put something on my site as a downloadable App like I see on some of the other sites..If you could email me any information that would be great..
Thank You
now the generator do not working and do not make code plz help