Curated by Carsonified

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Article 11

Touch icon goodness

By

21 January 2008 | Category: Design

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.

Preview of touch icons

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

  • Sorry - No Related Posts Found

Comments

  • Jim

    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).

  • http://kilianvalkhof.com Kilian Valkhof

    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.

  • http://sam.brown.tc Sam Brown

    Great icons Elliot, but I was under the impression that 158x158px 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.

  • http://sam.brown.tc Sam Brown

    Scratch that, I just read the update on Nathan’s site. Sorry.

  • Matt Munsey

    Very cool Elliot. I also like the one you did for you personal site as well.

  • Gregor Mishem

    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?

  • http://www.ocvision.com wez

    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!

  • http://www.rampok.org rama

    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.

  • http://www.sharpenr.net/2008/01/29/webclip/ Webclip – Sharpenr

    [...] 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/” }); [...]

  • http://www.sharpenr.net/dev/posts/webclip Webclip

    [...] 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. [...]

  • Lukethomasrichardson

    Where did you get the icons you use on carsonified.com? I’ve been looking for a telephone icon like that for months and came across it by accident :-)

Learn Web Design!

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.