Add to Home Screen Icon HTML5

Question

How can we add an Icon for Home Screen in HTML5 when we browse a webpage in chrome app and in option we choose Add To Home Screen. then theres an Icon Shortcut placed on your Home Screen.

I used:

<link rel="apple-touch-icon-precomposed" href="...\icon.png">

<link rel="apple-touch-icon" href="...\icon.png">

nothing happens it display again a default icon.! Just Like the AmStalker Home Screen Icon

What is the best way to do it?

Answer 1

First of all I want to show project structure in image below . I have made a public folder and all the file is inside the folder . And the manifest file is out of public folder .this is image

After That we will create Manifest file code of file is given below.

Manifest.json

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
      {  
   "src": "assets/layouts/layout2/img/icon/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image/png",
   "density": "0.75"
  },
    {
      "src": "assets/layouts/layout2/img/icon/android-icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
       "src": "assets/layouts/layout2/img/icon/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image/png",
   "density": "1.5"
  },

    {
    "src": "assets/layouts/layout2/img/icon/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image/png",
   "density": "2.0"
  },
  {
   "src": "assets/layouts/layout2/img/icon/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png",
   "density": "3.0"
  },
  {
   "src": "assets/layouts/layout2/img/icon/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png",
   "density": "4.0"
  }
  ],
  "start_url": "/index.html"
}

// After that we will add service worker
service-worker.js

self.addEventListener("fetch", function(event){

});

// Now go to index.html and put the following code in head section

<link rel="manifest" href="/manifest.json">     
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> 

// After that you need to put following code before body closing

 <script type="text/javascript">
 if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn't. This happened:", err)
    });
 }
</script>

Now Run your project and wait for few minute and reload your page and ENJOY !

Answer 2

In your href you have an extra dot i think, and it should be a forward slash not a backslash. try "../icon.png"

Also Android using apple icon references have been depreciated so these would not work - FOR ANDROID. Please look at https://developer.chrome.com/multidevice/android/installtohomescreen for more information.

The cited source recommends you do this:

<link rel="icon" sizes="192x192" href="../icon.png">

Of course with this method I advise that your image is 192x192 in size.

Answer 3

The modern way is to make it a Progressive Web App and the browser will offer this on its behalf.

Here - https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/ - you can see the criteria and check for yourself if you've met them.