Give your website an iOS icon

Ever wanted to get an App for your website but don’t want to pay the high prices demanded by developers?

The chances are your site is already mobile optimised, so you’re half way there. But what about getting it that little icon you see on your home screen? Normally, when you bookmark a site to the home screen, it provides a screen shot of the website as the icon.

You can actually get your own icon (just like an App), for free! Also, it’s just one line of code that needs to be put anywhere in your header.php, so it couldn’t be simpler!

Here’s how to do it:

  1. Create the icon. It must be 150×150 pixels. Don’t worry about the bevel effect that the iOS icons get; Apple will take care of that.
  2. Upload the image to your site. Make sure you know the URL to the image.
  3. Add the following anywhere in your header:
    <link rel=”apple-touch-icon” href=”INSERT ICON URL HERE”/>
  4. Save the header.php stylesheet.
  5. Go to your iOS device and add the site to your Home Screen, as seen below:
  6. You will then see your icon! If you want to see a working example, add www.familialramblings.com to your home screen and check out what it looks like – I created the icon for the owner!

If you’d like an icon made, please click here.

 

8 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.