Try to prioritise maskable icon

lib/pwa-load.js

@@ -112,44 +112,44 @@ window.addEventListener( 'load', () => {
 	const svgElement = createSvgElement( logo );
 
 	Promise.all( [
-		// The "normal" icon should be round. This is used for Chrome
-		// Desktop PWAs. To do: check which sizes are really needed.
+		// The maskable icon should have its background filled. This is used
+		// for iOS. To do: check which sizes are really needed.
 		...[ 180, 192, 512 ].map( ( size ) =>
 			createIcon( {
 				svgElement,
 				size: 180,
 				color,
 				backgroundColor,
-				circle: true,
 			} ).then( ( base64data ) => {
 				manifest.icons.push( {
 					src: base64data,
 					sizes: size + 'x' + size,
 					type: 'image/png',
-					purpose: 'any',
+					purpose: 'maskable',
 				} );
+
+				// iOS doesn't seem to look at the manifest.
+				if ( size === 180 ) {
+					addAppleTouchIcon( size, base64data );
+				}
 			} )
 		),
-		// The maskable icon should have its background filled. This is used
-		// for iOS. To do: check which sizes are really needed.
+		// The "normal" icon should be round. This is used for Chrome
+		// Desktop PWAs. To do: check which sizes are really needed.
 		...[ 180, 192, 512 ].map( ( size ) =>
 			createIcon( {
 				svgElement,
 				size: 180,
 				color,
 				backgroundColor,
+				circle: true,
 			} ).then( ( base64data ) => {
 				manifest.icons.push( {
 					src: base64data,
 					sizes: size + 'x' + size,
 					type: 'image/png',
-					purpose: 'maskable',
+					purpose: 'any',
 				} );
-
-				// iOS doesn't seem to look at the manifest.
-				if ( size === 180 ) {
-					addAppleTouchIcon( size, base64data );
-				}
 			} )
 		),
 	] ).then( () => {