Adding a website icon to your iPhone Home Screen

Joeychgo

TAZ Administrator
Joined
Feb 28, 2004
Messages
6,986
Joeychgo submitted a new Article:

Adding a website icon to your iPhone Home Screen

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.
View attachment 10635

Step 3. Select "Add toHome Screen"

View attachment 10636


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
View attachment 10637

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

View attachment 10638




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.

Read more about this article here...
 
Last edited by a moderator:

PoetJC

⚧ Jacquii: Kween of Hearts ⚧
Joined
Jul 9, 2006
Messages
21,032
Nice tutorial Joeychgo -- Any idea on how to do the same in Android?

J.
 
Last edited by a moderator:
  • Thread starter
  • Admin
  • #6

Joeychgo

TAZ Administrator
Joined
Feb 28, 2004
Messages
6,986
I started thinking about this when I saw all the errors in my error log because I didn't have those icons.
 
Top