使用添加到主屏幕时 PWA 图标不可见

Question

I have added icons of different sizes (144x144 and 194x194) and created pwa-manifest.json -

{
    "short_name": "app",
    "name": "Application",
    "icons": [
        {
            "src": "assets/images/favicons/favicon-194x194.png",
            "sizes": "194x194 512x512",
            "type": "image/png"
        },
        {
            "src": "assets/images/favicons/apple-touch-icon-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        }
    ],
    "start_url": "/index.html",
    "background_color": "#fbfcfd",
    "theme_color": "#00aeef",
    "display": "standalone"
}

I also have added this manifest file into index.html and angular-cli.json.

When I tried to add the application in Android 7.0 (using Chrome 61.0.3163.98) it's not showing the icon. I have used different android devices only Motorola Nexus gives desired results.

Answer 1

Please try resetting your devices' cache and reloading the page multiple times. This happened to me one time and it was very aggravating!

Answer 2

add these lines of code to the head of your index.html

<link rel="apple-touch-icon" href="path/to/file.png"></link>
<link rel="shortcut icon" type="image/jpg" href="path/to/file.png"/>

Answer 3

This may isn't the best answer, but it works for me: add the app to home screen twice . The icon will visible after that. (It's may an issue in some models related to the icons folder refreshing).