fix(web): replace PWA icons with full-bleed versions to fix iOS white border

The original icon PNGs had pre-baked rounded corners and transparent
backgrounds. When iOS applies its own superellipse mask on Add to Home
Screen, the transparent corners were filled with white, creating a
visible white border around the icon.

Changes:
- Regenerate all icon PNGs as full-bleed (no rounded corners, opaque
  background filling entire canvas) from the existing logo SVG
- Add dedicated apple-touch-icon.png at 180x180 (iOS standard size)
- Add favicon.ico for universal browser fallback
- Replace oversized app/icon.png (540x540) with 192x192 full-bleed
- Update layout.tsx to reference apple-touch-icon.png
- Add explicit purpose: "any" to 192x192 manifest entry

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Naiyuan Qing 2026-02-05 14:46:30 +08:00
parent e8012a5580
commit f5c6f05295
7 changed files with 2 additions and 1 deletions

BIN
apps/web/app/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 233 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Before After
Before After

View file

@ -33,7 +33,7 @@ export const metadata: Metadata = {
title: "Multica",
},
icons: {
apple: "/logo-192x192.png",
apple: "/apple-touch-icon.png",
},
};

View file

@ -17,6 +17,7 @@ export default function manifest(): MetadataRoute.Manifest {
src: "/logo-192x192.png",
sizes: "192x192",
type: "image/png",
purpose: "any",
},
{
src: "/logo-512x512.png",

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

Before After
Before After