Create Apple Touch Icons and Startup Images

Get touchy on Apple

Tonight’s call will focus on two simple identifiers which are useful on mobile devices, namely on Apple devices such as the iPhone, iPod and iPad.

iPhone 4 Screen Image

Apple Touch Icons

Apple Touch Icons are identifiers for your web page or application which can be placed on the home screen of devices, such as the iPhone as seen here above. When Bookmarking a site and adding an icon to the home screen, default icons would be a screenshot of an uncontrollable part of your web page.

Similar to favicons, we can add touch icons to our site, which will replace the default and become visible as a custom icon.

Apple Startup Images

They are similar to Icons in as much as they load while the user is waiting for the actual application is loading or if the app is offline.

When surfing a site for which you like to create a link (icon) on the home screen, just select as per here below:

iPhone 4 Screenshot

You will end up with the icon on your home screen asseen on the image on top of this post.

Icon Sizes

Create your icons in 57 x 57 pixels, 114 x 114 pixels and 512 x 512 pixels and load them to the root folder of your site.

Yorgo Nestoridis Touch Icon

Yorgo Nestoridis Touch Icon

For the touch icon: call the image:

apple-touch-icon.png

or

apple-touch-icon-114×114.png
apple-touch-icon-57×57.png

and so on.

Apple will add the rounded corners and the gloss automatically.

Startup Image

The start up image has a standard size of 320 x 460 pixels and should be in png portrait format.

Yorgo Nestoridis Startup Image

Name the image startup.png.

Embedding

If your icon is not in the root folder, just place the following codesnippet in your header:

<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />

The above code would be for different image sizes.

That’s it.

More details and a step by step workshop at tonight’s call.

  19 comments for “Create Apple Touch Icons and Startup Images

  1. May 31, 2011 at 6:13 am

    Regards for helping out, superb info.

  2. February 3, 2011 at 7:13 pm

    Thank you, yes I followed both avenues as per 2 workshops. I wasn’t sure whether or not I should take out one version or leave both.

    I now left just the first version – for Apple to style – and would also like to see how it looks?!

  3. February 3, 2011 at 6:31 pm

    Na also, geht doch :-)
    Du denkst wohl, vier mal genaeht haelt besser?

    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114.png" />
    <link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-precomposed-114.png" />
    

    According to my tutorials you use the prefix ‘apple-touch-icon-precomposed’ if you don’t want Apple to add style; this is the case when you do the rounded corners yourself.
    Bianca WebClip Icon

  4. February 3, 2011 at 4:04 pm

    Format is png, but I had added the 57 one as well. Perhaps wrong – pls check now.

    Thank you.

  5. February 3, 2011 at 3:09 pm

    Good morning with an Internet connection again!

    I hope it shows now :)

    • February 3, 2011 at 3:15 pm

      Hmmm, they don’t; either the embedded code is wrong or the format of the image…. or both.

  6. February 3, 2011 at 3:53 am

    Loaded into rootfolder:

    http://biancagubalke.com/apple-touch-icon-114.png

    http://biancagubalke.com/apple-touch-icon-57.png

    Sorry, I lost the room again and now I can’t get back in :)

    • February 3, 2011 at 11:52 am

      Please embed the appropriate code as per comment left for Ute:
      HERE

      For the time being the icons do not display on the iPhone.

  7. February 3, 2011 at 1:22 am

    Habe andere Icons hochgeladen. Wüßte gern wie es aussieht.

  8. February 3, 2011 at 12:14 am

    Danke! Habe den link eingefügt.

  9. February 3, 2011 at 12:05 am

    Have loaded a new version of the icon, interesting to see the result.

  10. February 2, 2011 at 11:55 pm

    Bussi Ute,

    link wird ins header.php des Blog Themas geladen; z.B. nach den andern links in linie 24.

    Beispiel:

    <link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-precomposed-114.png" />

    Bittte lade 57 und 114 pixel version.

  11. February 2, 2011 at 11:35 pm

    Apple Touch Icons hochgeladen.
    Weiß aber nicht, wo ich folgenden link einfügen soll.

  12. February 2, 2011 at 6:23 am

    Loaded, but not sure if it the required quality.

    • February 2, 2011 at 3:32 pm

      The icon does not display .. see below my icon:

      I have added the following line to your header.php on line 24:

      Here it works:

      Now you can judge whether your icon is an efficient identifier :-)

Leave a Reply

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