CODEWITHSUNDEEP
androidgoogle-chromesplash-screenprogressive-web-apps
daitienshi
daitienshi

Reputation: 201

Progressive Web App icon on splash screen is extremely small

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?

Upvotes: 12

Views: 16354

Answers (3)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20088

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

Upvotes: 2

nclarx
nclarx

Reputation: 887

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.

Upvotes: 6

ReyAnthonyRenacia
ReyAnthonyRenacia

Reputation: 17613

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.

Upvotes: 0

Related Questions