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 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!
Thankyou soo much for the great info. 🙂
Can someone help. I can add a webclip to my homescreen but when I delete it it comes back automatically. How do I get rid of them for good? Plea email me at dcpavey@msn.com
Thank you for the tip. Do you happen to know if these little icons are spidered/looked for by Apple related search engines. Of perhaps is there someplace to submit these things to?
Question: I’m having some difficulty. We built our website using CMS called Joomla!
I tried placing the .png file which was called apple-touch-icon.png into the root folder and there was no bookmark / icon for me.
Do I need to reboot the iPhone before I can see it?
I was unable to see any HTML when I opened the “index.html” file inside the root folder, so maybe Joomla!’s PHP files won’t let me see HTML?
I’m no expert BTW …
Any clue or suggestions?
Thanks.
Hi Dave
I love your style – it’s very easy to read.
But, what have I done wrong please?
I’ve added an icon with the right name into the root directory but all I see is a replica of the last page of the website I visited, not the logo.
So just to be clear.
I open Filezilla, drag the apple-touch-icon.png file to the root directory and save.
Anything else?
BTW it’s a WordPress.org blog. Does that make a difference?
Thanks.
Thanks! Handy tip, and useful too. Took 2 mins to do. If that!
I use Contribute to create my web pages and do not have the ability to add the png file to the root directory. I also do not know what you mean by adding a link command to specify a different filename or different location for the apple-touch-icon.png file. I notice sometimes you call the icon apple-touch-icon.png and sometimes iphone-icon.png. Does that matter?
I used a 129×129 image of my blog logo, based on something I read elsewhere, and it works perfectly. Very crisp and clear.
for iPhone 4 (high resolution), Apple guidelines advise to use a 114×114 image.
Hi Dave,
Quick Question: Is there a ay to specify the default text- rather than the title of the page. I want to help my users out by not making them create a shorter title. Better control for me as well.
Thanks
Hi Dave
Great article. many thanks
My interest is also in getting my site Dooster the task productivity manager – which is an online app – into the app store.
I am seeing this as a major marketing advantage
Any ideas on what the most basic change – if any – you have to make to qualify it as an “iphone app” and get it in the store?
anyone?
many thanks ed
Thanks.
I was able to use this for a family journal and now my mom who has a brand new iPad, thanks to her wonderful daughter, moi, has the family journals all available with a click of a button.
<link rel=”apple-touch-icon” href=”/customIcon.png”/>
Must be placed just before the </head> tag. If you place it at the beginning of the head it WON’T work!
I am trying to do this with iweb. I have the PNG file created but I can’t figure out what to do next. Can you help?
On sites with no esignated iPhone icon file, it is possible to zoom and position a segment of the screen to be used as an icon.
Ie, I have bookmark icons on my phone for all the people I pay bills to, like AT&T. The icons look like perfect litte app buttons, but all I do is center on a portion of the page instead of the whole homepage as in your example.
However, for sites that DO have a designated iPhone icon file, I can’t get my screenshot icon to override theirs-like googledocs – I would love to bookmark my various google docs with different icons so I can go directly to the right one without having long text labels. But google’s default icon takes over.
Any ideas for getting around *that*?
maybe set my icon on a page that redirects to my Google doc page?
I’m strictly a web-user, not a content-host-er… Kinda like being “home”less… Or at least “root”less ;-p
Thank you Dave! This was clear, accurate, and useful: within fifteen minutes I much improved my site, making it easier for others to use. The world would be a wonderful place if we all shared what we know and what we love.
Wow, cool! Thanks so much!
YOu know you can take snapshots of the screen in Iphone by pressing both buttons HOME and On top.
I have a Google Premier Site. I would like to add a png file for iphone icons. I uploaded a png button but am having trouble getting my site to allow me to add information to the html? Any ideas?
Can someone provide more detail on how to do this with blogger (step by step). I dont really understand the techno vocab that is being used.
thanks
Ok, i cant figure this out, im not very computer inclined, i know how to use for everything i need to, but have no clue what a root directory is! i made a picture that i want as the icon in paint but dont know what to do with it, where do i put it? also, am i doing this on the computer or on my ipod?
wow! Thank you! thats awesome!
Thank you for the info, Dave. Very useful. Do you know if a way to add a Web Page bookmark to your Home Screen without using the “Add to Home Screen” feature on the iPhone? … I would like my customers to be able to click on a link on my web site to do the same thing (i.e. “Add this web site to Home Screen”)? Many Thanks.
Just did this for my site – looks soo much more professional! Many Thanks!
Thanks, this was actually very easy to do! I just renamed this 50×50 PNG file I already had to “iphone-icon.png” as instructed, and uploaded it onto the root of website. Without having to do anything else, it just worked great. Thanks again!
TIP: it seems like the icon size is pretty flexible and doesn’t have to be strictly 45×45, 57×57 or whatever 😉
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
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??
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
Awesome! Thanks for the info! cute!
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
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.
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…
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
I saw that article on making the images 158×158. I tried this and did not see a noticeable difference.
As for the icon size, 57×57 is indeed the size needed, but the iPhone tends to clip the image. Even though you want to use 57×57, your working size is about 45×45. The rest can be blank.
Does this work on the Firmware 2.0 and up?
nevermind, apparently i don’t read too well 🙂
Any hack to be able to do this if you don’t have access to your root, like if your using Blogger? thanks!
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.
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
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
Thanks, Dave! That’s just the ticket!
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.
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?
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??
Andrew, sounds like you need to update your iPhone to the latest firmware. That’s where this feature shows up!
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?
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.
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!
Sweet man,
This was a 5 minute fix and will really impress the users for our site! Thanks for the info.
The size for the icons is 57 x 57, not 45 x 45. Says on the Apple article.