How to Add a Mobile Home Screen Icon For Your Website

If you own a business, personal brand or website, it is important to keep branding consistent. In order to have your brand be recognized by your customers or followers, you need to expose it as much as possible. In this tutorial you will learn how to add a homescreen icon for your website on mobile devices. That way when one of your followers adds your website to their device homescreen page, it will show your website logo as the icon.

Vectorize Your Logo

A vector image is an image made up of mathematically controlled points called nodes in order to render curves and lines that essentially make up the image. Put simply, it's an image that you can scale up or down in size and never loses its quality. Every line and curve remains sharp without pixelation. The most widely used vector image format is SVG which stands for (Scalable Vector Graphics). Another example of vector file formats is PDF, if you zoom into a PDF file you will notice that the text remains sharp and does not pixelate at all. There are plenty of online tools that vectorize images, but my preferred way is to use Adobe Flash CS6. The reason why I use Adobe Flash is because I have control of the size of the vector image. For example, if I want a 1000x1000 pixel image of my logo, I simply scale it up to that particular size and then export as a PNG image. The exported image is fully sharp. Another benefit of using Flash is that I have control over various properties such as the color, shape and text of my logo. Check out my tutorial on how to vectorize an image on Flash Here

4 Different Sizes

Once you have your vectorized logo, you will need to create 4 different images of your logo at different resolutions. Please note that Apple and Android devices will round the borders of the image significantly, so make sure that the actual area of your logo is at least 20-25 pixels smaller than the overall image. For example, for the 57x57 pixel image, the area of your logo must not exceed 37x37 pixels otherwise the corners will be "cut off". Also, make sure to center the logo inside the overall image for best results. Create the following:

1. A 57x57 PNG type image of your logo. With logo area of 37x37 pixels.
2. A 72x72 PNG type image of your logo. With logo area of 47x47 pixels.
3. A 114x114 PNG type image of your logo. With logo area of 87x87 pixels.
4. Lastly, a 144x144 PNG type image of your logo for Retina Dislay iPhones and other high pixel density devices. Logo area of 118x118 pixels.

You must save the image under "apple-touch-icon-" followed by the image resolution. For example, the icon image with resolution 144x144 must be saved as "apple-touch-icon-144x144.png"

Adding The Source Code

Once you have all four images, upload them to your website servers or any other image hosting site. Please remember to retrieve the source link for each image. Inside the head html tag of your website, add the following code: (Replace the part in red with the source link for each image respectively).

<link href='apple-touch-icon-57x57.png' rel='apple-touch-icon' sizes='57x57'/>
<link href='apple-touch-icon-72x72.png' rel='apple-touch-icon' sizes='72x72'/>
<link href='apple-touch-icon-114x114.png' rel='apple-touch-icon' sizes='114x114'/>
<link href='apple-touch-icon-144x144.png' rel='apple-touch-icon' sizes='144x144'/>

Save all changes and refresh the page. Next time you're on your iPhone or android device. All you need to do is add your website to your homescreen page. If all went according to plan, your website logo should come up as the icon for the site. Leave any questions below