feat: add PWA manifest, apple-touch-icon, and proper favicon sizes

- Generate 192x192, 512x512, 180x180, 32x32, and 16x16 icons from logo
- Add manifest.json for PWA install support (standalone display)
- Add apple-touch-icon for iOS home screen
- Use sized favicons instead of full 1024x1024 logo.png
This commit is contained in:
Nicolas Varrot
2026-02-12 09:02:07 +00:00
parent 8301cba339
commit b8cbc75cf2
7 changed files with 31 additions and 1 deletions

View File

@@ -15,7 +15,10 @@
<meta name="twitter:description" content="A sleek, dark-themed webchat UI for OpenClaw" />
<meta name="twitter:image" content="https://raw.githubusercontent.com/MarlBurroW/pinchchat/main/public/og-card.png" />
<title>PinchChat</title>
<link rel="icon" type="image/png" href="/logo.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
</head>
<body>
<div id="root"></div>

BIN
public/apple-touch-icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/favicon-16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
public/favicon-32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
public/logo-192.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/logo-512.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

27
public/manifest.json Normal file
View File

@@ -0,0 +1,27 @@
{
"name": "PinchChat",
"short_name": "PinchChat",
"description": "A sleek, dark-themed webchat UI for OpenClaw",
"start_url": "/",
"display": "standalone",
"background_color": "#1e1e24",
"theme_color": "#1e1e24",
"icons": [
{
"src": "/logo-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/logo-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/logo-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}