21 January 2008
Touch icon goodness
This week the interwebs have been alive with the sound of the so-called ‘touch icons’… a low hum possibly produced by them gently jiggling away on your homescreen.
Like many a designer looking for the frequent digital distraction, I’ve been creating some icons for the Carsonified sites. Earlier in the week, almost right after the iPhone / iPod Touch software update was announced, Dan was on the case and his walkthrough was a more extensive guide than the one on the Apple Developer Connection. Shortly after, Nathan experimented with larger image dimensions than the 57×57 recommended by Apple, and – after a few experiements from and on behalf of readers – found that 60×60 was the ideal size. Huzzah! Cue a lot of happy web designers, all making shiny new icons for their sites.
However, this was only the first stage. Drew came up with a bookmarlet to address the fact that we wouldn’t normally be able to edit icons for sites we don’t manage, only to have it improved upon by Rob to override websites’ existing icons (and then re-tweaked by Drew). Then, just when we thought we’d achieved the highest possible state of ecstatic icon-induced nirvana, Cameron modified the bookmarklet even further and made the whole process a doddle for the average user. (His article is also a rather nice summary of the work done by others.) Finally, we’re now seeing all kinds of sites pop up (such as Andy’s iclypso.com) that offer a number of icons ready for the end-user to install.
Phew! Now that I’ve worn myself out with a blow-by-blow account of that week – which will no doubt be out of date by tomorrow – I thought I’d show you the Carsonified icons (styled here so as to mimic their final rendering on the iPhone / iPod Touch) that I’m in the process of rolling out. They should be on all of the relevant sites by the end of the week.
Enjoy this article?
If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)
We love .net Magazine
We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.
Jim
# January 21, 2008 - 6:18 pm
To be completely honest, for someone of your talent Elliot, I think you could do ALOT better. They serve the purpose but lack in creativity. (Don’t get me wrong though I am a fan of your work).
Kilian Valkhof
# January 21, 2008 - 6:28 pm
Being the large favicons/website identifiers that they are I don’t think they should be very “creative”, but more so make it immediately clear which website is behind the icon. So, excellent job! (Though I’d have a hard time matching the colours to their respective ‘future of…’)
The iPhone launch here in the Netherlands is long overdue.
Sam Brown
# January 21, 2008 - 7:14 pm
Great icons Elliot, but I was under the impression that 158×158px icons presented a clearer crisper icon on the iPhone home screen!? Not that I can confirm this with my US model, the perils of wanting to be an early adopter.
Sam Brown
# January 21, 2008 - 7:16 pm
Scratch that, I just read the update on Nathan’s site. Sorry.
Matt Munsey
# January 22, 2008 - 5:28 am
Very cool Elliot. I also like the one you did for you personal site as well.
Gregor Mishem
# January 22, 2008 - 3:35 pm
At the bottom of this site we can find “Valid XHTML & CSS”.
Does anyone take a look how this looks like when viewing with IE6, it’s not just important is it valid?
wez
# January 24, 2008 - 1:29 pm
Sorry Jim,
“To be completely honest, for someone of your talent Elliot, I think you could do ALOT better.”
Better? How would you better the designs Jim, i notice you have no web link. Again anonymity strikes in comment fields.
What you have here are nice strong graphic identity led sites. So why not use these strong graphics in the buttons? . . . Because people like Jim say they’re too simple. Surely simplicity and clarity are what your aiming for with projects of this nature. UI design is all about engaging simply and effectively.
Great stuff Elliott, interesting stuff on the thought process as well dude. looking forward to FOWD!
rama
# January 28, 2008 - 12:25 pm
yeah.. 2.0 styles is in motion.
i made one for one of my online apps the decision maker.
Seems like MacOs is leading yet another trend in digital graphics.
Webclip - Sharpenr
# January 29, 2008 - 11:43 pm
[...] I couldn’t help it, I went ahead and created a custom iPhone webclip for Sharpenr. It’s the 57×57 size, but I might follow the lead of Nathan Borror and give the 60×60 version a try. The Carsonified webclips by Elliot Jay Stocks turned out very nice and usable. SHARETHIS.addEntry({ title: “Webclip”, url: “http://www.sharpenr.net/2008/01/29/webclip/” }); [...]
Webclip
# March 5, 2009 - 5:00 pm
[...] Webclip Posted by admin on January 29th, 2008 I couldn’t help it, I went ahead and created a custom iPhone webclip for Sharpenr. It’s the 57×57 size, but I might follow the lead of Nathan Borror and give the 60×60 158×158 version a try. The Carsonified webclips by Elliot Jay Stocks turned out very nice and usable. [...]