How to create a custom iPhone and iPod touch icon for your web site

This brief tutorial will explain out how to create a custom icon to display on the iPhone and/or iPod touch springboard for your web site.

custom site icon for simplehelp.net on the iphone springboard

  1. When a user adds a site to their springboard by using the Add to Home Screen feature, by default, the iPhone or iPod touch will use a thumbnail of the visible part of the page being displayed in Safari.
  2. default site icon for the iphone and ipod touch springboard
    click to enlarge

  3. If you’d like your site to have a much nicer icon appear on the springboard when people add it, create a 57px by 57px PNG icon, name it apple-touch-icon.png, and upload it to the root folder of your site. Note: Apple themselves actually use a 129x129px icon, so you may want to experiment to see what size looks best for yours (it will scale to the default iPhone/iPod touch springboard icon size).

    If you don’t have access to the root folder of your site, or you’d like to put the icon elsewhere, add the following line to the <head> of your site:

    <link rel="apple-touch-icon" href="/path/to/file.png" /> (and upload the file.png to that folder).

  4. Now when someone adds your site, it will have a nice icon associated with it.
  5. adding a site to the iphone and ipod touch springboard
    click to enlarge

  6. Done!
  7. custom icon for simplehelp.net for the iphone and ipod touch springboard
    click to enlarge

{ 6 comments… add one }
  • Jeffrey October 8, 2008, 7:20 am

    How to create a custom iPhone and iPod touch icon for your web site

    I am not sure what you are referring to. Where is the ROOT? and WHAT Site. On my local computer? On a website? Is this for developers or just for anyone?
    Thanks

    If you don’t have access to the root folder of your site, or you’d like to put the icon elsewhere, add the following line to the of your site:

    (and upload the file.png to that folder).

  • Nala November 28, 2008, 5:36 pm

    espera no entendi como busco para anadir simplehelp.com y otros folder y como puedo cambier de fondo y poner juegos sin usar itunes por favor explicame gracias por todo

  • cep78 June 26, 2009, 5:40 am

    comment instaler cydia sur mon iphone version 3

  • ONL2 September 29, 2009, 7:17 am

    Awesome! Worked the 1st time using the 129×129 px icon. It does need to be in the root, even if you are redirecting the URL to another folder.

    @jeffrey, you can only do this to a website that you own. You must have FTP access to the file structure.

  • Linkers January 5, 2010, 2:12 pm

    Bonjour, je suis americain et comprend pas tut but votre blog aide moi beaucoup. Merci beaucoup.

Leave a Comment