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>
BIN
apps/web/app/favicon.ico
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 233 KiB After Width: | Height: | Size: 3.6 KiB |
|
|
@ -33,7 +33,7 @@ export const metadata: Metadata = {
|
|||
title: "Multica",
|
||||
},
|
||||
icons: {
|
||||
apple: "/logo-192x192.png",
|
||||
apple: "/apple-touch-icon.png",
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
BIN
apps/web/public/apple-touch-icon.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 3.6 KiB |
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 7.6 KiB |