Home Resources Blog

One of my first icon projects for Campaign Monitor was to create a set of Apple iOS icons for our mobile web application. These are the icons that show up when you bookmark our mobile site to the ‘home screen’ on your Apple device. Now, with all of the iOS devices floating around out there, you can do things the easy way by creating one large icon which is then scaled down for that particular device, or you can do it properly by creating a pixel-perfect icon for each device. For the iPod Touch/iPhone 2.5/3G/3GS, the icon size is a miserly 57 pixels square. For the iPad, it’s 72 pixels square, and for the newer iPhone4, it’s a whopping 114 pixels square.

The challenge with iOS icons, or for that matter, any icon that will be used at multiple sizes, is that you need to come up with an idea that is memorable and interesting, whilst keeping things clear and concise enough that it is still recognisable at smaller sizes.

From sketch to screen graphic

The value of sketching

As an interface designer, I have found that in this digital day and age, we don’t rough out ideas with pen and paper nearly enough as we should. Sketching allows you easily develop and expand upon simple idea in a few strokes. I find sketching especially useful for roughing out ideas for icons and logos, as well as general layout throw-downs. Even if you think you haven’t got a knack for it, practice makes all the difference. Don’t be scared to try. Even as early as a few months ago, I shied away from sketching out ideas because, to me, they looked mediocre at best, but as I kept pushing myself to practice, designing becomes a much more organic experience.

Push yourself!

One of the easiest traps to fall into is to stop sketching after a few ideas; even if you’re excited about a particular iteration, push on and try and play with at least half a dozen ideas. Even if it doesn’t seem useful at the time, they act as food for thought when refining and polishing ideas.

iOS icon sketch

Refined sketches of my two main ideas

The design process

My general approach to icon design, is to start at the larger sizes with all the detail, then scale down to the smaller sizes, remove any superfluous detail that would get lost in translation, then redraw or tweak all of the vector shapes so that they snap to a pixel grid. This ensures that the icon retains the sharpness and pixel-perfection it needs to really stand out.

One thing I pride myself in with my interface work is the super-crisp and pixel-perfect look and feel. I combat blurry edges by setting a grid in Photoshop’s preferences so that I have a grid line every 16 pixels with 16 subdivisions. That gives me a grid line every pixel, with a solid grid line every 16 pixels for reference. Make sure ‘Snap to grid’ is checked under View > Snap To > Grid, and you’re golden. This great article by Marc Edwards of Bjango, runs you through a few different methods for getting pixel-perfect results when using the rounded rectangle tool. (The same premise applies to the majority of the shape tools).

57 pixel iOS icon in detail

Close-up image of my pixel grid in use and the snapped anchor points of the pie graph

One of the more difficult parts of this project was the fact that the icon couldn’t be branded. Because Campaign Monitor was created for designers to rebrand for their own clients, the final icons couldn’t directly reference Campaign Monitor as a company. All in all, I’m happy that as a white-label icon, it still manages to convey it’s meaning and is still instantly recognisable as a part of Campaign Monitor.

Finished range of iOS icons

The refined and polished end products

Implementing the icons

When it came to implementing the finished icons, I came across quite a conundrum — all devices running iOS 4 return the same user-agent, regardless of the actual device, this means, there’s no way do individually target a device, on the operating system. Sure, I could’ve just used the larger 114 pixel version for all devices and let the OS scale it down, but the obsessive compulsive designer in me wanted to display the individually tweaked icons for it’s intended device. After searching around for ways to individually target the individual devices, and coming up short, I thought back to an article I was reading on A List Apart which discussed the use of media queries to load different stylesheets for different devices with different resolutions.

The code

After a little trial and error, I fell upon the idea of using the same premise of serving different stylesheets according to the pixel density of the device, and instead serving up individual icons instead. I put together three simple snippets of code which target each individual iOS device according to their pixel densities. 163dpi for the iPhone 3G/3GS and iPod Touch, 132dpi for the iPad and a whopping 326dpi for the iPhone4.

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="https://www.campaignmonitor.com/assets/uploads/iOS-57px.png" />

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="https://www.campaignmonitor.com/assets/uploads/iOS-72px.png" />

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="https://www.campaignmonitor.com/assets/uploads/iOS-114px.png" />

If you notice in the above code I have used apple-touch-icon-precomposed. The addition of -precomposed stops iOS from automatically rendering gloss atop my icon and rounding it’s corners. If you do want iOS to auto-apply the gloss and rounded corners automatically (so you can supply a flat, square image), simply use rel="apple-touch-icon".

For more information on media queries, do check out the A List Apart article, and for an excellent example of media queries in use (for stylesheets), take a peek at Jon Hicks’ new journal for truly superb execution.

Uh oh! Why isn’t this working on the iPhone4?

iOS has an annoying bug for web app developers. If you use the apple-mobile-web-app-capable feature to indicate that your site should launch as it’s own app (ie. fullscreen, sans toolbars), rather than in MobileSafari, the OS creates a low-resolution version of your apple-touch-icon on the home screen:

Broken iOS4 icon redering for iPhone4

Left: Icon as rendered on an iPhone4. Right: How it should render.

Easily creating your own iOS icons

If you’re looking to try your hand at creating an iOS icon, then you can’t go wrong with this excellent template by Sebastiaan de With which has base icons in all the relevant sizes for you to build upon. A quick little tip for those that want their site to render an icon on the homescreen when bookmarked, simply save out your icon as “https://www.campaignmonitor.com/assets/uploads/apple-touch-icon.png” and dump it in the root directory of your domain.

I’m looking forward to sharing more tips and tutorials in the future, so keep your eyes peeled. For a sneak peak at some of my upcoming work, check out my Dribbble profile.

  • Alan van Roemburg

    Great work Jesse, thanks for the insight in to your process :)

  • Nate Klaiber

    Wow, those are absolutely stunning

  • Benjamin

    Awesome work Jesse, congrats!

  • Torkil Johnsen

    Beautiful work :) For others playing with icons, John Hicks’ icon reference chart is also a must-read.

  • Daniel

    Wow that really looks fantastic. A lot of people really don’t put enough effort into their Icon design.

  • Andrew Cornett

    Amazing job, love the insight too.

  • Philip Downer

    What a great post. Love the icon!

  • Ian Storm Taylor

    Nicely done! I take it there is no way around that annoying icon bug yet?

  • Mike Smith

    I love it! Told a co-worker the other day how you guys pay attention to the smallest stuff, and gave the ios icon as an example. What about the icons used on your site, are they from a set?

  • Marc Edwards

    Thanks for the very hot -precomposed and resolution targeting tips. It’s always bugged me that the different resolutions couldn’t be targeted, but now they can. Awesome.

    Also, thanks for the article link.

  • Dan Sherratt

    Love the end result! Good Work.

  • Nickolas Simard

    Wow, nice article on icon creative process, in regards to iOS! Keep up the “obsessive compulsive design” work! ^_^

  • Stezz

    Great article Jesse, love the processes and explanation. Great execution!

  • Adam Frieberg

    Great article Jessie! I didn’t expect to learn something about CSS media types too. Well done!

  • Bert

    Is there a way to fix the iPhone 4 ‘apple-mobile-web-app-capable’ low-resolution bug?

  • Jesse Dodds


    Currently it works for normal sites, or any mobile sites that don’t have the apple-mobile-web-app-capable tag active. So your only option at this stage (if you have an app/site that has the above tag active), is to disable that feature, or live with the badly rendered icon. Hopefully Apple with get this fixed up in the next iOS release.

  • Koruja

    great job !!!

  • Phil Coffman

    Great article Jesse. I particularly appreciate you going into the nuts and bolts of how you set up your document with the gridlines.

  • Patrick Offczorz

    Awesome Icon. Great Article

  • Brad Parnell

    Beautiful work and thanks for sharing your process!

  • Damen

    Thank you for doing the heavy lifting for me!

  • Dean Martin

    Thanks for showing us your process. really useful info too :)

  • Taylor Martin

    Good work.

  • Pixel Air Web Design

    Awesome stuff. Great to see the process that went into it.

  • Kevin Ngawhau

    Nice workflow. I love the precision. Well done.

  • James Noble

    We love them. The step through documentation is a great reading.

  • Tigeda Theron

    Looks awesome I like the attention to detail you put into the process and the end result.

  • Don

    simplistically beautiful.

  • Alex Penny

    Nice work Jesse! Love the icons.

  • Chris

    Nice work Jesse but is that an envelope or a baby’s cloth diaper? :P

  • Philipp Bosch

    Hate to say it but unfortunately this technique of using CSS3 media queries for the apple-touch-icon link elements does not seem to work anymore.

    Good news: the icon is super crisp on iPhone4 now, so the mentioned bug seems to be fixed.

    Bad news: the iPhone 3G seems to use a downscaled version of the 114×114 icon and not the 57×57 variant. Look here for a comparison image: http://img.pb.io/bznuco

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free