How to Create an iPhone or Android Home Screen icon

Have you ever noticed that when you save some websites to your phone's Home screen that some websites have cool icons while others either use a mashed up screen shot or just plain placeholder image? Wouldn't it be cool if your viewers could download a direct link to your website and place it on their home screens? Well this tip is going to show you how to do that.

If you follow these steps you can create and link to a cool icon for your website and learn how to download it to your phone's home screen!

You may want to make it easier for regular site visitors to get to your website faster and easier. Following the steps below you can create a home screen phone icon that your site visitors can download to their phones that will create a direct link to your website’s home page from your visitors iphone or android phone.

Modify Your Logo

Before you can create the shortcut you must first modify your icon so that it is properly formatted for the space.

Here is our logo:

Moore Tech Solutions Logo

Here is our phone icon:

STEP 1 – Create Your Phone Icon

Create a 158 x 158 image on your favorite image editor (we use Adobe Illustrator but Adobe Photoshop works great too). If you don’t have a photo editor there are quite a few free online editors available as well, just “Google” free online image editor. Make sure that it’s a simplified version of your logo. It needs to be easy to see and not too crowded.

Step 2 – Save Your Phone Icon

Save your creation as a .png file to a location on your server. Most sites will make use of an /images folder, that is always a good location. Remember to name it something relative like apple-touch-icon.png .

Step 3 – Write it Down

Write down the path to your image and check that your path is correct by typing it into the browser. You should see your new image now. So, for example, if your website is https://www.mywebsite.com and you placed your new phone icon in the images folder then you should be able to type in https://mysite.com/images/apple-touch-icon.png and view your image. Now copy and paste that path to a text document.

Step 4 – Add the Tag

Now you just need to add a simple little line of code to the index.php of your site to let phones know that you want it to use your icon whenever someone bookmarks your site or saves your site to their Home screen. This is the code:

You are going to place this code just above the </head> tag on your website’s main page. IMPORTANT!!! remember to change out the path (highlighted in yellow) to the image path you wrote down in the step above.

Step 5 – Add the Home Screen Phone Icon to Your Phone

Just pull open your website on your phone, and click the share icon . From the share window select the Add to Home Screen icon . Then change the title, if you’d like, and click “Add”.

That’s it! Pretty easy, huh?

← Important! Your Site Needs to be Mobile Friendly! Angie’s List is Now Free – What Should You Do? →