How can I update home screen icon of my Progressive Web App?

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.

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.

So my question is, How to update home screen icon on user device ? here are my configuration files.

manifest.json

{
"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"
}
]
}


ngsw-config.json

{
"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/**"
]
}
}]
}


index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LogMyExpensePwa</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/assets/icons/cash-money-wallet_512.png">
<link rel="manifest" href="/manifest.json">

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="msapplication-starturl" content="/">
<meta name="theme-color" content="#5FD4AF">
</head>
<body>
<app-root></app-root>
<noscript>
JavaScript is required to run this application.
</noscript>
</body>
</html>


and here is the application link:- https://logmyexpense.firebaseapp.com/

Continue reading...