Apple Touch Icon Tutorial

How to create an Apple Touch Icon – Tutorial

Subsequent to yesterday’s call and post, this article shows how to design an Apple Touch Icon following Apple Developers Guidelines.

For the purpose of this tutorial we are focusing on Icons for iPhone, iPod and iPad; also we limit the exercise to icons for websites and neglect applications; Apple refers to these icons as Web Clip Icons (recommended for websites and web applications).

Web Clip Icons

1. Apple Touch Icon Guidelines

The icons must meet specific criteria for display in iOS (that’s the apple Operating System for mobile devices). Here are the rules:

Size

  • iPhone and iPod:  57 x57 pixels and 114 x 114 pixels for high resolution
  • iPad: 72 x 72 pixels

Style

iOS adds automatically some style elements to your icon, namely:

  • Rounded Corners
  • Drop Shadow
  • Reflective shine

You can prevent iOS from adding styles by naming your icon

apple-touch-icon-precomposed.png
You then have to respect some additional criteria to ensure that your icon is eligible to the visual enhancements iOS will provide:

  • Produce an image in PNG
  • Rounded Corners at 90 Degrees
  • No shine or gloss

Example:

Our 57 x 57 pixels design:

Apple Touch Icon

Apple’s iOS output:

apple touch icon

Format

  • Apple recommends for all icons PNG .
  • Standard bit depth: 24 bits (8 bits each for red, green, and blue), plus an 8-bit alpha channel
  • Do not use alpha transparencies in Web Clip Icons and Application Icons

2. Icon Design Recommendations

Background

Make it a discernible background to look good on the home screen namely because iOS ads the rounded corners to give all icons a uniform look. Users recognize the icons shape and know that the icon is tappable.

Area

Make sure your image fills entirely the required area. If your image is smaller, and has transparencies, it seems to float within a black field with rounded corners. This does not look very inviting, namely when the user displays a background image on his screen. The see through effect will create interference between the screen background and your image.

2. Create an Apple Touch Icon or Web Clip Icon with Photoshop

Basic

To start with, create a new document, I like to use 512 x 512 pixels:

Now you see a white square; fill it with the color of your choice (background color).

In my case: red.

Add a new layer and bring in your logo; in my case the letter Y, in white.

Save as PNG.

Game over.

Custom Design a Web Clip Icon with Rounded Corners

  • Start as before just with a transparent background.
  • Add a custom shape: Use the rounded rectangle tool, set the corners to 90 degrees and select the background color.
  • Draw the shape. Tip: snap to document bounds.
  • Add some style to the background or leave it plain.

Add some text and or images:

Photoshop for Web Clip Icons

Web Clip Icon for Gene Line

or:

Web Clip Icon for Gene Line 2

The icons will show as follows (they are crisp on the iPhone):

Looking forward to tonight’s workshop :-).

  7 comments for “Apple Touch Icon Tutorial

  1. May 22, 2011 at 12:15 am

    I’ve been absent for a while, but now I remember why I used to love this blog. Thank you, I will try and check back more frequently. How frequently you update your site?

  2. February 4, 2011 at 1:00 pm

    Ypress – pls check

  3. February 3, 2011 at 7:49 pm

    Habe neue Icons hochgeladen.

  4. February 3, 2011 at 4:05 am

    Please hae a look – not sure I missed something as lost the room, but loaded these:

    http://biancagubalke.com/web-clip-icon-114.png

    Same plus shadow:

    http://biancagubalke.com/web-clip-icon-114s.png

    And same with the smaller version, although I doubt the shadow makes a difference:

    http://biancagubalke.com/web-clip-icon-57.png

    http://biancagubalke.com/web-clip-icon-57s.png

    Curious to see how this looks, it’s for our friends :)

    • February 3, 2011 at 11:50 am

      Hi Bianca,

      to see the effect you need to embed the icons as per comment:
      HERE

Leave a Reply

Your email address will not be published. Required fields are marked *