Adding an iOS home screen icon boosts your website’s stickyness

Make your website look like an app with an awesome icon Encourage repeat visitors by creating a great icon for their home page Many people bookmark websites to come back to later. They go into that Bookmark void on your computer and may never be seen again. Those bookmarks are so hard to search and […]
Last updated: July 1, 2013
  • Make your website look like an app with an awesome icon
  • Encourage repeat visitors by creating a great icon for their home page

Many people bookmark websites to come back to later. They go into that Bookmark void on your computer and may never be seen again. Those bookmarks are so hard to search and find again later! This is why services like del.ic.ous and Evernote are now so popular as digital dumping grounds that can be searched and items found.

Did you know that on iPhone and iPad a user can bookmark your site and then add it to their home screen? Its a great way to get to a website faster without trying to type in the web address (especially if you have fat fingers like me) This can be done in Safari, and it looks something like this:

Without the icon installed in your website, iOS pulls in a representation of the page and generates the icon – something like this (looks pretty average right?):

generated-ios-home-screenicon

So by creating a single 512x512px icon and installing it on your website with the following code in the header, you get this result:

add to home screen with icon add to home screen customise title

Much better, and when your icon is on the home screen amongst your users other apps, you can see your icon sticking out:

Check out the SixFive logo looking just as awesome as other apps.

Check out the SixFive logo looking just as awesome as other apps.

Now you can also prompt people to add your site to their home screen using a little popup at the bottom of the screen.

The Add To Home screen project does all the work for you by giving you the code and css to make it happen. The result is something like this (you can customise it too):

Prompting your users to add your site to their home screen on Safari / iPhone

Prompting your users to add your site to their home screen on Safari / iPhone

 

Prompting the user to add to their home screen on iPad

Prompting the user to add to their home screen on iPad

How to add an iOS home screen icon for your website

First make the icon. If you need some help in the layout of the icon, check out this great Photoshop file from cocoia.com with all the parts you need to build out a great icon.

Here is the code for the icon to ensure Safari references it. You should install this inside the <head></head> tags of your website:

Now the system will use the default title for the page that you are on, you may not want this as it wont look great on the user home screen, so here is the code to overwrite that. Put this next to the code above for the icon to keep things in the same place:

Now if you are on WordPress there is a plugin called Add to Home Screen WP that takes care of all of this – making life a lot easier for you to get your iOS home screen icon.

To keep up to date with the latest in mobile interface, please subscribe to our newsletter:

SixFive is a mobile app developer – If you’d like some assistance in making your website work well on mobile, or creating and launching a mobile app for your business, drop us a line, we’d be only too happy to assist you.

If you enjoyed this article, don’t be shy, please share the love with your network!

 

Duncan Isaksen-Loxton

Educated as a web developer, with over 20 years of internet based work and experience, Duncan is a Google Workspace Certified Collaboration Engineer and a WordPress expert.
Login
Log in below to access your courses.
Log In With Google
Forgot Password
Enter your email address or username and we’ll send you instructions to reset your password.