Fix: Resolve some issues with PWA icons #1

closed

opened by

vielle.dev 1 month ago targeting main

This PR halfs the size of the PWA icons so they match the size that they should be (based on file name and manifest) and makes the icons maskable. Making the icons maskable removes the akward orange border which can appear around the icons, by trimming the icon to up to a 40% radius centered circle ((more info on maskable icons here)[https://web.dev/articles/maskable-icon])

I've checked that the icon fits within the maskable region so this should all be fine ^^

options

unified split

Changed files

src

webapp

app

manifest.ts

public

semble-icon-192x192.png

semble-icon-512x512.png

src/webapp/app/manifest.ts

···

       15
       15
        
               src: '/semble-icon-192x192.png',

     

       16
       16
        
               sizes: '192x192',

     

       17
       17
        
               type: 'image/png',

     

       18
       18
       +
               purpose: 'maskable',

     

       18
       19
        
             },

     

       19
       20
        
             {

     

       20
       21
        
               src: '/semble-icon-512x512.png',

     

       21
       22
        
               sizes: '512x512',

     

       22
       23
        
               type: 'image/png',

     

       24
       24
       +
               purpose: 'maskable',

     

       23
       25
        
             },

     

       24
       26
        
           ],

     

       25
       27
        
         };

src/webapp/public/semble-icon-192x192.png

This is a binary file and will not be displayed.

src/webapp/public/semble-icon-512x512.png

This is a binary file and will not be displayed.