Custom iOS (safari) icon

[thegoldgoat]

What problem does this feature solve?

Lets say my app icon has no background, then Safari would apply a default black background when adding to the home screen - but I’d rather have a white one

What does the proposed changes look like?

A way to use a custom icon for Safari only

_{This feature request is available on Nuxt community (#c236)}

[charlie0077]

In iOS if you install the app that has a transparent background, apple will use black as the background, which is ugly.

[charlie0077]

I am curious how do you work around this black background issue in iphone.

[farnabaz]

You can add apple-touch-icon meta in nuxt.config.js. It will overwrite the transparent icon on iOS

export default {
  head: {
    link: [
      { rel:"apple-touch-icon", sizes:"128x128", href:"apple-icon.png" }
    ]
  }
// ....
}

[thegoldgoat]

You can add apple-touch-icon meta in nuxt.config.js. It will overwrite the transparent icon on iOS

That sounds great! Is this a new feature or something? At least I think that wasn’t mentioned in the docs at the time

[farnabaz]

No this isn't new feature. This can be used on any Nuxt projects (with or without PWA module). PWA module does the same thing under the hood.

Checkout Nuxt documentation

[thegoldgoat]

Oh now I see! What I meant was PWA module's documentation, I think it would be much clearer if a redundant information like this was also mentioned in PWA's documentation

[petrtichy]

Should the overwrite work for iOS splash/launch screens? - #443