PWA Icon fix (#948)

* Added icons for various browsers. Namely apple requires non black icons.

* Corrected Naming

* Ran Linter

* These icons should have been white.

apps/frontend/app/root.tsx

@@ -111,6 +111,7 @@ const DefaultHeadTags = () => {
 				content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
 			/>
 			<link rel="manifest" href="/manifest.json" />
+			<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 		</>
 	);
 };

apps/frontend/public/manifest.json

@@ -8,6 +8,36 @@
 	"short_name": "Ryot",
 	"description": "Track all facets of your life!",
 	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		},
+		{
+			"src": "/apple-touch-icon.png",
+			"sizes": "180x180",
+			"type": "image/png"
+		},
+		{
+			"src": "/apple-touch-icon-120x120.png",
+			"sizes": "120x120",
+			"type": "image/png"
+		},
+		{
+			"src": "/apple-touch-icon-precomposed.png",
+			"sizes": "180x180",
+			"type": "image/png"
+		},
+		{
+			"src": "/apple-touch-icon-120x120-precomposed.png",
+			"sizes": "120x120",
+			"type": "image/png"
+		},
 		{
 			"src": "/icon-192x192.png",
 			"sizes": "192x192",