Create Apple Touch Icons and Startup Images

iPhone 4 Screenshot

02 Feb 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
  • roomba
    Posted at 06:13h, 31 May Reply

    Regards for helping out, superb info.

  • Bianca Gubalke
    Posted at 19:13h, 03 February Reply

    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?!

  • Yorgo Nestoridis
    Posted at 18:31h, 03 February Reply

    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

  • Bianca Gubalke
    Posted at 16:04h, 03 February Reply

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

    Thank you.

  • Bianca Gubalke
    Posted at 15:09h, 03 February Reply

    Good morning with an Internet connection again!

    I hope it shows now :)

    • Yorgo Nestoridis
      Posted at 15:15h, 03 February Reply

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

  • Bianca Gubalke
    Posted at 03:53h, 03 February Reply

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

    • Yorgo Nestoridis
      Posted at 11:52h, 03 February Reply

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

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

  • Ute Schaedler
    Posted at 01:22h, 03 February Reply

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

  • Ute Schaedler
    Posted at 00:14h, 03 February Reply

    Danke! Habe den link eingefügt.

  • Z Nicholas
    Posted at 00:05h, 03 February Reply

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

  • Yorgo Nestoridis
    Posted at 23:55h, 02 February Reply

    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.

  • Ute Schaedler
    Posted at 23:35h, 02 February Reply

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

  • Z Nicholas
    Posted at 06:23h, 02 February Reply

    Loaded, but not sure if it the required quality.

    • Yorgo Nestoridis
      Posted at 15:32h, 02 February Reply

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

Post A Comment