Which icon sizes are required for progressive web apps (PWA) as of Q1 2018?

问题

Which application icons and sizes are required for a progressive web app (PWA)? For example, should I include Apple icons if Safari doesn't support PWAs?

It seems like a common need among developers, but at this time, I am not certain if there is an official spec or guidance for it.

回答1:

If you want to include a complete set of icons for Android:

icon-72x72
icon-96x96
icon-128x128
icon-144x144
icon-152x152
icon-192x192
icon-384x384
icon-512x512

There is some helpful tools like https://app-manifest.firebaseapp.com/, to create icons.

For iOS, you will need:

icon-120x120
icon-180x180

With square background (can't be transparent background). A good repository for references at https://github.com/gokulkrishh/awesome-meta-and-manifest

回答2:

As per Google Developers

icons must include a 192px and a 512px sized icons

Here is our blog on the same.

回答3:

According to the World Wide Web Consortium's (W3C) App Manifest specification for Progressive Web Apps (8.7 icons member):

You may declare multiple icons of various formats and size
The W3C spec does not identify required or recommended sizes, but allows you to specify attributes (size, format, path) for the icons you provide to allow the user agent to choose the most appropriate within these rules:
- The user agent must use the LAST icon declared that is appropriate for its use.
- It must fallback on the next most appropriate if the first one tried fails for any reason.

MDN Web Docs does not list required sizes or formats either, but adds:

The sizes value is a "space separated list of dimensions" for an icon
- Example: "72x72 96x96"
The type value is optional, but aids the user agent in selecting the most appropriate icon for its use.

Using the rules above, the application can provide conditions on the use of certain icons, such as forcing the PNG for a specific resolution and falling back to SVG for any unspecified sizes and allow the user agent to select the best choice. The benefit of this system is forward compatibility with user agents that have not yet been announced.

Manifest Icons Example: (based on W3C spec cited above)

{
  "icons": [
    {
      "src": "assets/brand_small.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon/brand.ico",
      "sizes": "96x96 128x128 256x256"
    },
    {
      "src": "icon/brand_large.svg",
      "sizes": "257x257"
    }]
}

来源：https://stackoverflow.com/questions/48839338/which-icon-sizes-are-required-for-progressive-web-apps-pwa-as-of-q1-2018

标签

progressive-web-apps