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:
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:
"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 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:
<link rel="apple-touch-icon" href="/Graphics/iphone-icon.png" />
That's all there is to it. Go forth, create your icon, and enjoy!
More Useful Articles and Reviews Articles:
✔ Review: Verticus for iPad
iOS gamers everywhere are familiar with the genre of infinite forward progress apps - Mega Jump, Canabalt, and a host of other run/jump/fly-until-you-die...✔ Review: Clear Spot Voyager 4G wifi hotspot
Clear Voyager 4g HotspotI'm constantly on the go and with just about every site I visit available via secure SSL connection, I typically...✔ Review: Dropcam HD wifi video camera
Whether you're security paranoid, want to keep an eye on the nanny, have a summer or winter home you'd like to peek in...✔ Audiovox Car Connection Review
I have the smartest house on the block with a wifi-enabled thermostat and garage door opener, along with a complex web of wireless...✔ Review: Slingbox 500
I should start with a candid admission: I'm not a huge television watcher. I catch soccer matches on Fox Soccer Channel, and watch...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
All Our Categories
Apple iPad Help
Articles and Reviews
Auctions and Online Shopping
Blogs and Blogging
Building Web Site Traffic
Business and Management
Computer and Internet Basics
d) None of the Above
Google Gmail Help
Google Plus Help
Industry News and Trade Shows
iPhone and Cell Phone Help
iPod, Sony PSP and MP3 Player Help
Kindle Fire Help
Mac OS X Help
Pay Per Click (PPC) Advertising
Search Engine Optimization (SEO)
Shell Script Programming
Tech Support Video Help
The Writing Business
Twitter, LinkedIn and Social Network Help
Unix and Linux Help
Video Game Tips and Help
Windows PC Help
Find Me on Google+
ADT on G+