add
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
to your index.html (in your theme directory, if not there extract the zip file) and setup the correct reference to you .ico file ;-)
if you also want that your app is correctly saved as a bookmark you can also add this:
<link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png">
<link rel="manifest" href="img/manifest.json">
<meta name="apple-mobile-web-app-title" content="your-app-name">
<meta name="application-name" content="your-app-name">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
the named manifest.json has specific contents for Android:
{
"name": "your-app-name",
"icons": [
{
"src": "\/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": 0.75
},
{
"src": "\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": 1
},
{
"src": "\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": 1.5
},
{
"src": "\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": 2
}
]
}
Pims answer doesnt work anymore due to native and pwa goodness.
the new way is:
click on navigation and upload it here.
After you change the favicon.ico from the theme folder,
1- compress all files inside the theme folder to ZIP file
2- open modular > Project Explorer > Project > setting > Theme
3- click on refresh button and add theme ZIP file
# please make sure that zip file is on the theme folder and contain all files inside the theme folder.