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!

 

Here is our logo:

logo

 

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="152x152" 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 it to Your Phone's Home Screen

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

 

Thats it! Pretty easy, huh?

I want MTS to do this for me