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: description:
'A minimalist web application to share expenses with friends and family. No ads, no account, no problem.', 'A minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
start_url: '/groups', start_url: '/groups',
id: '/groups',
display: 'standalone', display: 'standalone',
background_color: '#fff', background_color: '#fff',
theme_color: '#047857', theme_color: '#047857',
icons: [ 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', sizes: '192x192',
type: 'image/png', type: 'image/png',
}, },
{ {
src: '/android-chrome-512x512.png', src: '/logo/256x256.png',
sizes: '256x256',
type: 'image/png',
},
{
src: '/logo/512x512.png',
sizes: '512x512', sizes: '512x512',
type: 'image/png', type: 'image/png',
}, },
{ {
src: '/logo-512x512-maskable.png', src: '/logo/512x512-maskable.png',
sizes: '512x512', sizes: '512x512',
type: 'image/png', type: 'image/png',
purpose: 'maskable', purpose: 'maskable',