PWA: add multiple custom size transparent PNGs (#271)

* add id property to manifest for identity of PWA

* add multiple sizes high quality pngs with transparent background to support multiple sizes

* delete unused png
This commit is contained in:
Yuvaraj Sai
2025-04-20 00:49:00 +05:30
committed by GitHub
parent 233b338bc5
commit 2bced00f82
10 changed files with 29 additions and 3 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
public/logo/128x128.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
public/logo/144x144.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
public/logo/192x192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
public/logo/256x256.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
public/logo/48x48.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/logo/512x512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/logo/64x64.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -7,22 +7,48 @@ export default function manifest(): MetadataRoute.Manifest {
description:
'A minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
start_url: '/groups',
id: '/groups',
display: 'standalone',
background_color: '#fff',
theme_color: '#047857',
icons: [
{
src: '/android-chrome-192x192.png',
src: '/logo/48x48.png',
sizes: '48x48',
type: 'image/png',
},
{
src: '/logo/64x64.png',
sizes: '64x64',
type: 'image/png',
},
{
src: '/logo/128x128.png',
sizes: '128x128',
type: 'image/png',
},
{
src: '/logo/144x144.png',
sizes: '144x144',
type: 'image/png',
},
{
src: '/logo/192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/android-chrome-512x512.png',
src: '/logo/256x256.png',
sizes: '256x256',
type: 'image/png',
},
{
src: '/logo/512x512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: '/logo-512x512-maskable.png',
src: '/logo/512x512-maskable.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable',