Adding a website icon to your iPhone Home Screen

By Joeychgo · Jun 20, 2014 ·
  1. Joeychgo
    You can use this as a template for a "How To" on your own website.

    This is for the iPhone 5 - but these instructions should be similar for other I devices

    Step 1. Load up the webpage you wish to bookmark in Safari.
    Step 2. Tap the “Add Bookmark” icon. The “Bookmark” submenu options will appear.
    iPhone Icon 001.PNG

    Step 3. Select "Add toHome Screen"

    iPhone Icon 002.PNG

    Step 4. Review the properties to make sure they are correct. These properties are:
    “Bookmark Name” – Tap this field if you wish to edit your bookmark’s default name. Once you are happy with the name, click ADD
    iPhone Icon 003.PNG

    Your all done! The iphone will add an icon with a screenshot of the site to your home screen.

    iPhone Icon 004.PNG

    You can also create specific icons for your site instead of using a screenshot. I recommend this. If you check your php error logs you'll see many references to "apple-touch-icon". This is where those icons cannot be located on your server.

    At the time of writing the list of icons file sizes for each device type is as follows:

    • apple-touch-icon.png (57x57 iPhone and iPod touch)
    • apple-touch-icon-72x72.png (72x72 iPad 1st and 2nd gen)
    • apple-touch-icon-114x114.png (114x114 retina iPhone and iPod touch)
    • apple-touch-icon-144x144.png (144x144 retina iPad)
    Have these images created for your site. Its always good to brand your site.

    Share This Article

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.