10

I've successfully created a PWA for my site, but after I've added it to my home screen and I open up the app, the icon on the splash screen remains extremely small.

My manifest has both a 192x192 and 512x512 icon, but as I've read from here (https://developers.google.com/web/updates/2015/10/splashscreen), it picks the closes to 128dp to display. Since a the A2HS banner requires a 192x192 in the manifest, does that mean that the splash screen icon will always be super small? Is there no way to make the icon larger for the splash screen?

Art
  • 2,836
  • 4
  • 17
  • 34
daitienshi
  • 181
  • 1
  • 3
  • 11
  • Possible duplicate of [Can't get splash screen icon on Android Chrome PWA](https://stackoverflow.com/questions/53800285/cant-get-splash-screen-icon-on-android-chrome-pwa) – BruceM Dec 18 '18 at 04:27

3 Answers3

6

TL;DR: remove your 192x192 icon and your splash screen should default to the 512x512 icon.

Check out this issue about auditing icon size on the Google Chrome Lighthouse issues which provides the following:

...There are 2 layouts for splash screens. You get the "small icon layout" if the icon you provide is <= 80dp. You get the "large icon layout" if it's over >80 dp. Ideal size for splash screen is 128dp. (There is also a way that a non-provided icon is used, though it's unclear what that is.)

It seems that if there is an icon at 192x192 in the manifest.json that an icon at 512x512 will not be used. Check the comments in the link above for some discussion on this - it remains an open issue.

I had the same problem with my PWA and tested removing the 192x192 image leaving the 512x512 and the splash screen icon was larger. I think I will try having a 1024x1024 and removing the 512x512 next build.

EDIT: I tried the 1024x1024 and confirmed there are only 2 layouts depending on the dp. The 1024x1024 didn't display and the splash screen defaulted to a smaller one I had at 384x384.

nclarx
  • 847
  • 1
  • 8
  • 18
2

When we create react app by default 512x512 192x192 this property not have in manifast.json icon size, so that Web app icon get change on splash screen of Mobile/Desktop/Tablet etc. In manifest.json need to configure following way, if you are developing react project then you can find manifest.json file in public/manifest.json directory. 

{
  "short_name": "thefarmerson",
  "name": "This is official page of Karthikeyan Anbazhagan Indian Computer Science Engineer",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": " 512x512 192x192 64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
KARTHIKEYAN.A
  • 18,210
  • 6
  • 124
  • 133
  • Good Question , When we create react app by default 512x512 192x192 this property not have in manifast.json icon size, i have added this two in icon resolution.@Authony Winzlet. – KARTHIKEYAN.A Oct 08 '18 at 07:05
  • Web app icon get change on splash screen of Mobile/Desktop/Tablet etc. – KARTHIKEYAN.A Oct 08 '18 at 07:11
  • In my case i have a slightly different issue.I have only one icon type, of size 512x512 and type "image/png". However when i load the app, the icon is displayed very small. After changing the icon type to "image/x-icon", the icon was appearing larger in the splash screen. However this created new issues. When the user was installing the app, an extra pop up was appearing that required the user to touch and hold, in order to complete the process. Also the mobile app icon, had now a small chrome icon at the bottom right. So in my case the size didn't really matter, but the icon type did. – Sotiris Zegiannis Apr 24 '20 at 12:18
0

Customs screens are automatically shown if you've met this following requirements:

Recommendations

Chrome for Android automatically shows your custom splash screen so long as you meet the following requirements in your web app manifest:

  • The name property is set to the name of your PWA.
  • The background_color property is set to a valid CSS color value.
  • The icons array specifies an icon that is at least 512px by 512px.
  • The icon exists and is a PNG.

So do that and check if your 512 png image is used this time.

ReyAnthonyRenacia
  • 17,219
  • 5
  • 37
  • 56
  • 1
    Thanks. All of the above items are met in my manifest. However, in order for the A2HS banner to pop in mobile Chrome, there needs to be a 192px x 192px icon in the array. As mentioned, I have both a 192px x 192px and a 512px x 512px icon in my manifest, but the splash screen continues to display the 192x192 one. I even made those icons different so I knew which one it was picking to display. – daitienshi Mar 23 '18 at 16:27
  • I'm having the same issue. I have set my manifest.json up exactly as the docs describe. I thought it might be the fact that I didn't have my icons array in order from smallest to largest, but that didn't have any effect when I put it in order. – nclarx Jun 11 '18 at 09:49