title: How can I update home screen icon of my Progressive Web App?
body: <p>I am learning progressive web apps, and I have created on angular application that has all the PWA configuration. Then I hosted that application on firebase and opened it on my android phone and successfully got the prompt saying add the app to home screen.</p>
  
  <p>But now I have changed the app icon in the manifest file and in the index.html file then deployed the app again but the home screen icon on my phone is not updating. I have tried uninstalling the app then reinstalling but still it displays the old icon on my phone. </p>
  
  <p>So my question is, How to update home screen icon on user device ? here are my configuration files.</p>
  
  <p><strong>manifest.json</strong></p>
  
  <pre><code>{
    "short_name": "My Expense",
    "name": "Log My Expense",
    "start_url": "/",
    "theme_color": "#5FD4AF",
    "background_color": "#ffffff",
    "display": "standalone",
    "orientation": "portrait",
    "icons": [
      {
        "src": "/assets/icons/cash-money-wallet_64.png",
        "sizes": "64x64",
        "type": "image/png"
      },
      {
        "src": "/assets/icons/cash-money-wallet_128.png",
        "sizes": "128x128",
        "type": "image/png"
      },
      {
        "src": "/assets/icons/cash-money-wallet_256.png",
        "sizes": "256x256",
        "type": "image/png"
      },
      {
        "src": "/assets/icons/cash-money-wallet_512.png",
        "sizes": "512x512",
        "type": "image/png"
      }
    ]
  }
  </code></pre>
  
  <p><strong>ngsw-config.json</strong></p>
  
  <pre><code>{
    "index": "/index.html",
    "assetGroups": [{
      "name": "app",
      "installMode": "prefetch",
       "resources": {
        "files": [
          "/favicon.ico",
          "/index.html"
        ],
        "versionedFiles": [
          "/*.bundle.css",
          "/*.bundle.js",
          "/*.chunk.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ]
      }
    }]
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;LogMyExpensePwa&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="/assets/icons/cash-money-wallet_512.png"&gt;
    &lt;link rel="manifest" href="/manifest.json"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="msapplication-starturl" content="/"&gt;
    &lt;meta name="theme-color" content="#5FD4AF"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;app-root&gt;&lt;/app-root&gt;
  &lt;noscript&gt;
    JavaScript is required to run this application.
  &lt;/noscript&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is the application link:- <a href="https://logmyexpense.firebaseapp.com/" rel="noreferrer">https://logmyexpense.firebaseapp.com/</a></p>