1

I'm getting the error

Site cannot be installed: icon downloaded from the manifest was empty or corrupted

I'm not able to find what is the problem. Below is my manifest.json. I'm using Angular 4 Progressive web app with material design.

Manifest.json

{
  "dir": "ltr",
  "lang": "en",
  "name": "Hello",
  "scope": "/",
  "display": "standalone",
  "start_url": "./?utm_source=web_app_manifest",
  "short_name": "Hello",
  "theme_color": "#f27b00",
  "description": "",
  "orientation": "any",
  "background_color": "#3a1c8d",
  "related_applications": [],
  "prefer_related_applications": false,
  "icons": [{
      "src": "/assets/icons/android/android-launchericon-512-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/assets/icons/android/android-launchericon-192-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
        "src": "/assets/icons/android/android-launchericon-144-144.png",
         "sizes": "144x144",
         "type": "image/png"
       },
       {
         "src": "/assets/icons/android/android-launchericon-96-96.png",
         "sizes": "96x96",
         "type": "image/png"
       },
       {
         "src": "/assets/icons/android/android-launchericon-72-72.png",
         "sizes": "72x72",
         "type": "image/png"
       },
       {
         "src": "/assets/icons/android/android-launchericon-48-48.png",
         "sizes": "48x48",
         "type": "image/png"
       },
       {
         "src": "/assets/icons/chrome/chrome-extensionmanagementpage-48-48.png",
         "sizes": "48x48",
         "type": "image/png"
       },
       {
         "src": "/assets/icons/chrome/chrome-favicon-16-16.png",
         "sizes": "16x16",
         "type": "image/png"
       },
       {
         "src": "/assets/icons/chrome/chrome-installprocess-128-128.png",
         "sizes": "128x128",
         "type": "image/png"
       }
     ],
    "gcm_sender_id": "XXXXXXXX"
}
bennygenel
  • 23,896
  • 6
  • 65
  • 78
Gaurav Sharma
  • 411
  • 7
  • 22
  • 1
    Check this solution provided in this related [SO post](https://stackoverflow.com/a/43307709/5995040), your icon paths reference to root directory. Try removing `/` at the beginning and compile it again. This is also done in the document [Customize the icons](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/#customize_the_icons). Hope this helps. – Mr.Rebot Sep 23 '17 at 23:07
  • 1
    Thanks @bennygenel, it works!! – Gaurav Sharma Sep 24 '17 at 16:32
  • 1
    Gaurav Sharma you should thank to @Mr.Rebot I just fixed formatting of your post. – bennygenel Sep 24 '17 at 17:11

1 Answers1

2

As stated in this document - Customize the icons, when placing the src path of the icon, it must refer to the root directory. You should change the path by removing / at the beginning and compile it again.

"icons": [{
    "src": "images/touch/icon-128x128.png",
    "type": "image/png",
    "sizes": "128x128"
  }, {
    "src": "images/touch/apple-touch-icon.png",
    "type": "image/png",
    "sizes": "152x152"
  }, {
    "src": "images/touch/ms-touch-icon-144x144-precomposed.png",
    "type": "image/png",
    "sizes": "144x144"
  }, {
    "src": "images/touch/chrome-touch-icon-192x192.png",
    "type": "image/png",
    "sizes": "192x192"
  }],

You can also check this related SO post for reference.

Mr.Rebot
  • 6,703
  • 2
  • 16
  • 91