feat: Add PWA assets and metadata for iOS Safari installation

- Generate app icons in multiple sizes (192x192, 512x512, 180x180, 32x32)
- Create favicon and apple-touch-icon SVG files
- Add comprehensive PWA meta tags in app layout
- Configure theme color (#3B82F6) and background color
- Update manifest.json with icon references (PNG and SVG)
- Create icon generation scripts (SVG and PNG conversion)
- Add browser-based PNG icon generator (HTML)
- Create comprehensive PWA testing guide
- Add icon setup documentation

Requirements: 4.1, 4.2
Task: 13. Add PWA assets and metadata

app/layout.tsx

@@ -8,16 +8,32 @@ export const metadata: Metadata = {
   description: 'The ultimate todo list app with advanced task management',
   manifest: '/manifest.json',
   themeColor: '#3B82F6',
-  viewport: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no',
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
+    viewportFit: 'cover',
+  },
   appleWebApp: {
     capable: true,
-    statusBarStyle: 'default',
+    statusBarStyle: 'black-translucent',
     title: 'Ultimate Lists',
   },
   applicationName: 'Ultimate Lists',
   icons: {
-    icon: '/icon-192.svg',
-    apple: '/icon-192.svg',
+    icon: [
+      { url: '/favicon.svg', type: 'image/svg+xml' },
+      { url: '/icon-192.png', sizes: '192x192', type: 'image/png' },
+      { url: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+    ],
+    apple: [
+      { url: '/apple-touch-icon.png', sizes: '180x180', type: 'image/png' },
+    ],
+  },
+  other: {
+    'mobile-web-app-capable': 'yes',
+    'apple-mobile-web-app-capable': 'yes',
   },
 }
 
@@ -29,11 +45,26 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-        <link rel="apple-touch-icon" href="/icon-192.svg" />
+        {/* Favicon */}
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+        
+        {/* Apple Touch Icons */}
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        
+        {/* Apple Web App Meta Tags */}
         <meta name="apple-mobile-web-app-capable" content="yes" />
-        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
         <meta name="apple-mobile-web-app-title" content="Ultimate Lists" />
+        
+        {/* PWA Meta Tags */}
         <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="theme-color" content="#3B82F6" />
+        <meta name="background-color" content="#ffffff" />
+        
+        {/* iOS Splash Screens - Optional but recommended */}
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
       </head>
       <body className="bg-gray-50 min-h-screen">
         <ServiceWorkerRegistration />