The Hickensian

16.01.08 Custom webclip icon on the iPhone/iPod Touch

17 comments
Tagged with: icons, iphone, osx

hicksdesign icon on the iphone

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

Comments | RSS

No.1

∞ David Stone said 755 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.

No.2

∞ Max Wheeler said 755 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.

No.3

∞ Dean Clatworthy said 755 days ago:

I have no doubt that the google team will add some special icons very soon :)!

No.4

∞ kL said 755 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!

No.5

∞ Scott said 755 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.

No.6

∞ Fubiz?™ said 755 days ago:

Beautiful icon on iPhone !

No.7

∞ swissmiss said 755 days ago:

excellent, thanks for the tip!

No.8

∞ shoo said 755 days ago:

Awesome! Thanks for the tip.

No.9

∞ Aslak Raanes said 755 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.

No.10

∞ Luke Dorny said 754 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

No.11

∞ Matthew said 754 days ago:

Also done here, cheers for the larger size info.

No.12

∞ Drew McLellan said 754 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

No.13

∞ Rob McM said 754 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

No.14

∞ Alex said 753 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>

No.15

∞ Chuck Peterson said 753 days ago:

How to get a rounded border and the right size!!

No.16

∞ vectr said 751 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

No.17

∞ Ben Kerney said 750 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).