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

Question

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

Answer 1

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