How to Create an iPhone or Android Home Screen icon

touch icon ipad retina

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. This is how it’s done…

Here is our logo:

The full color logo for Moore tech Solutions

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, 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:

<link rel=”apple-touch-icon” sizes=”152×152″ href=”https://mysite.com/images/apple-touch-icon.png”/>

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 Share icon . From the share window select the Add to Home Screen icon Add To Home icon . Then change the title, if you’d like, and click “Add”.

That’s it! Pretty easy, huh?

I want MTS to do this for me