Convert Website to WebApp and Change Custom home screen Icon for mobile | 2my4edge

05 November 2016

Convert Website to WebApp and Change Custom home screen Icon for mobile

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.

Convert Website to WebApp

FOR LIVE DEMO DO LIKE THE BELOW IN YOUR MOBILE BROWSER

Change custom Home screen icon fo rmobile

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.

1 comment:

^