New PWA app icon how-to page

[captainbrosset]

Description

This PR contains a new How-To page on the topic of application icons for PWAs. It goes over aspects such as how to reference icons in the web app manifest, how to design the icon, create the right file sizes and types, and support masks.

Motivation

This is part of a current project to revamp PWA documentation on MDN. See mdn/mdn#280

Additional details

Once this gets merged, a change will also be needed in Yari to add this page to the new PWA sidebar script.

[github-actions]

Preview URLs

• /en-US/docs/Web/Progressive_web_apps/How_to/Define_app_icons

External URLs (7)

URL: /en-US/docs/Web/Progressive_web_apps/How_to/Define_app_icons
Title: Define your app icons

• https://developer.android.com/distribute/google-play/resources/icon-design-specifications (1 time) (Note! This may be a new URL 👀)
• https://developer.apple.com/design/human-interface-guidelines/app-icons (1 time) (Note! This may be a new URL 👀)
• https://learn.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/icon-theme-color (2 times) (Note! This may be a new URL 👀)
• https://maskable.app/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/learn/pwa/app-design/ (1 time) (Note! This may be a new URL 👀)
• https://web.dev/maskable-icon/ (1 time) (Note! This may be a new URL 👀)
• https://www.pwabuilder.com/imageGenerator (2 times) (Note! This may be a new URL 👀)

(comment last updated: 2023-05-05 12:29:47)

[estelle]

Excellent article. A few comments, but they're all minor; suggestions you can take or ignore ;)