It might not be necessary to make a mobile app for your website especially since you can add a direct shortcut to that website to your mobile device’s home screen. This essentially makes the website blend in with all the other apps on your home screen. However, the shortcut icon may stand out in the wrong way depending on your mobile device and its operating system. Android devices may use your site’s favicon and appear very small or pixelated while iPhone and iPad devices show a thumbnail preview of the site. Fortunately, you only have to perform a couple of extra steps to truly make your website disguised as a mobile app by assigning a custom shortcut icon.
First, you have to create the icon or edit any existing graphic you wish to set as the home screen icon. Set the graphic size to 152×152 pixels so the icon looks good on an iPad with a Retina display running iOS 7. Save the image as a PNG file and name it “apple-touch-icon.png”. Upload the image to your site’s root directory and that should do it for iOS users. Next time you add the site to your home screen using Safari, you should see the PNG icon you just made. It might even look better due to some extra effects added by iOS including rounded corners.
Android users may not notice the changes though. If you cannot see the icon on an Android home screen, place the following line on your site’s home page or header template:
<link rel="apple-touch-icon-precomposed" href="http://www.yoursitehere.com/apple-touch-icon.png">
Do not alter the “apple-touch-icon-precomposed” portion. You should also specify the absolute location of the image file (full URL) just to make sure it works on all Android versions.
If the icon, for some reason, looks bad on smartphones, smaller tablets, or non-Retina displays you can create smaller versions of your icon and add additional lines of text. Use the lines below as a guide:
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
Be sure check out the iOS Developer Library to see the most updated information in case the preferred dimensions changes in iOS 8.