How to Create an iPhone or Android Home Screen icon

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 visitor’s 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:

Logo 2020 150dpi 480x134 1

Here is our phone icon:

Touch icon ipad retina

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, which 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”.