16/01/08
Custom webclip icon on the iPhone/iPod Touch
The new 1.1.3 firmware for the iPhone and iPodTouch brings with it the ability to add a ‘webclip’ from Safari to your home screen.
Thanks to this tip you can easily create a custom icon for people visiting your site, that works just like your favicon. Its just a shame you can’t add your own for other sites – I would love a custom Google Reader icon.
EXTRA : Having tried Nathans suggestion of 158×158px I can confirm that this size does indeed produce a crisper icon. Also, Drew has come come up with a way of using custom icons. I’ve put one up for Google Reader here
Tags: 
Previous
Download our vCard
David Stone said 122 days ago:
Hey Jon, I bet there’s a overly-geeky way to do it. My iPhone is cracked/jailbroken so I’m not on the latest firmware, otherwise I’d give it a stab.
Max Wheeler said 122 days ago:
Nathan over at Playground Blues reckons that 158 × 158px gives you a crisper image (due to the iPhone’s high DPI screen). Haven’t tried it as I am in Australia and sadly lacking iPhone access, but it’s probably worth testing out.
Dean Clatworthy said 122 days ago:
I have no doubt that the google team will add some special icons very soon :)!
kL said 122 days ago:
I’ve tested icon with 1-pixel checkerboard. With 57×57 it results in moire pattern, so the icon isn’t used 1:1.
59×59 and 60×60 give best results. You can’t get it exactly right, because iPhone requires a square icon, but scales it to 59×60!
Scott said 122 days ago:
I assume that these icons should not contain pre-rounded corners and that the iPhone takes care of that since I know it does automatically add the gloss highlight.
Now I just need to wait until I can safely upgrade to 1.1.3 to actually test my own icon (unless you happen to want to do it for me Jon). Only added for the “notebook” for now.
Fubiz?™ said 122 days ago:
Beautiful icon on iPhone !
swissmiss said 122 days ago:
excellent, thanks for the tip!
shoo said 122 days ago:
Awesome! Thanks for the tip.
Aslak Raanes said 122 days ago:
I guess vector graphics (SVG or maybe PDF) don’t work? I don’t have a iPod Touch/iPhone, so I can’t test it myself.
Luke Dorny said 121 days ago:
Done, and done
Great tips, timely, too! Now i just wish all the big named sites had it, but they don’t. …not yet. And like you say, wish i could make my own for those sites…
And, yes. All you have to do is make a square image, no special wonky effects work needed.
Cheers!
/tip-o-the-hat
Matthew said 121 days ago:
Also done here, cheers for the larger size info.
Drew McLellan said 121 days ago:
Jon – you inspired me to figure out how to set a custom icon (for Google Reader or anything you like). Turns out all you need is a bit of JavaScript and some lateral thinking!
How to set a custom touch icon for any site
Rob McM said 121 days ago:
Drew – you inspired me to allow you to override a site’s touch icon :) All I had to do is remove existing link elements!
How to override a custom touch icon for any site
Alex said 120 days ago:
Jon, Drew, Rob – you all inspired me to spend a good chunk of my afternoon making WebClip icons.
Get ’em here if you’re interested.
</shameless_self_promotion>
Chuck Peterson said 120 days ago:
How to get a rounded border and the right size!!
vectr said 118 days ago:
Nice! I’ve got a bookmark now where I’ve zoomed in on the “Journey Planner” section of the Transport for London homepage.
Icon is at http://vectr.net/tfl.png
Ben Kerney said 117 days ago:
Hi Jon
Sorry to be slightly off-topic/self-promotional, but I know you’re a GReader fan so you might be interested in this.
I was frustrated that I couldn’t subscribe to new sites I found while on my iPhone and, while pretty, the reader.mac.com page is pretty much useless. I’ll be shocked if I’m the first one to do this but I wrote a bookmarklet that, from the reader.mac.com page for a given feed, will subscribe you to it in GReader.
It’s fairly brittle and basic, but hopefully it will see some improvement from the community (or myself).