Convert Website to WebApp and Change Custom home screen Icon for mobile, In Android Mobile we can do this kind of function. Here i'm going to explain you simple way to make your website as webapp in android mobile phones. Just follow the instruction as the below. and here i have attached video tutorial also.
FOR LIVE DEMO DO LIKE THE BELOW IN YOUR MOBILE BROWSER
CODE
<meta content='yes' name='mobile-web-app-capable'/> <link href='../master/manifest.json' rel='manifest'/>
Add the above code <head> tag starting.
VIDEO TUTORIAL
MANIFEST.JSON CODE
{
"name": "2my4edge Programming Blog",
"icons": [
{
"src": "launcher-icon-0-75x.png",
"sizes": "36x36",
"type": "image/png",
"density": 0.75
},
{
"src": "launcher-icon-1x.png",
"sizes": "48x48",
"type": "image/png",
"density": 1.0
},
{
"src": "launcher-icon-1-5x.png",
"sizes": "72x72",
"type": "image/png",
"density": 1.5
},
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png",
"density": 2.0
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png",
"density": 3.0
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png",
"density": 4.0
}
],
"background_color": "#6fa8dc",
"start_url": "index.html"
}
UPLOAD FAVICON IMAGE IN SOME STANDARD DIFFERENT SIZES
1. 36 X 36 .png image
2. 48 X 48 .png image
3. 72 X 72 .png image
4. 96 X 96 .png image
5. 144 X 144 .png image
6. 192 X 192 .png image
I hope this code is really helpful to you. this will help to make short icon in mobile home screen to easy access of your website. Use it. Thanks for visiting. Keep in touch with us for more interesting tutorials.
Good post
ReplyDeletegreat post brother thank you.
ReplyDelete