search

nuxt-community / pwa-module

Zero config PWA solution for Nuxt.js
https://pwa.nuxtjs.org
MIT License
1.24k stars 171 forks source link

Custom iOS (safari) icon #316

Open thegoldgoat opened 4 years ago

thegoldgoat commented 4 years ago

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 commented 3 years ago

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

charlie0077 commented 3 years ago

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

farnabaz commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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