Home Services Tutorials Articles Resources Contact Us

Add a Custom Springboard Icon

The iPhone is capable of showing a custom icon of web pages the user has added to their home screen, however by default the image is a simple snap shot of the screen. Here’s how to make a custom icon that will show up in the iPhone’s springboard when a user adds your website.

  • Create a 57×57 PNG and name the file “apple-touch-icon.png”
  • Place in the same folder as your index.html file

    • Your icon will receive the a glossed look as well as rounded corners.

    In fact with a little coding, we can use a specific image as an icon for any individual page. Just use the following syntax:

    <link rel="apple-touch-icon" href="icon.png">

    where icon.png is the name of your icon. This code should be placed in between head tags in your html document. The file name will be taken from the HTML document title.

    Thats all there is to it. Find out how to design the icon here.

    -Shaun Mackey

    1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

    2 Comments so far »

    1. Comment by Ben: August 28, 2008 @ 5:28 pm

      So would I add this code between the head tags of the HTML code?

    2. Comment by admin: August 29, 2008 @ 10:00 pm

      Hi Ben,

      That is correct, this code should be placed in between head tags in your html document. Thanks for pointing that out, we’ve updated the article.

      -Admin

    Comment RSS · TrackBack URI

    44