Merge pull request #577 from amelioro/fix-favicon-pixelated

touchup: add browser- and device-specific favicons

public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Ameliorate",
+  "short_name": "Ameliorate",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/pages/_app.page.tsx

@@ -43,7 +43,13 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
           content="Ameliorate is a tool for analyzing debatable problems effectively, collaboratively, and with an open mind."
         />
 
-        <link rel="icon" href="/favicon.ico" />
+        {/* icons for various browsers - these links (and their images) were generated by uploading a png to https://realfavicongenerator.net/ */}
+        <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <meta name="apple-mobile-web-app-title" content="Ameliorate" />
+        <link rel="manifest" href="/site.webmanifest" />
 
         {/* https://mui.com/material-ui/getting-started/usage/#responsive-meta-tag */}
         <meta name="viewport" content="initial-scale=1, width=device-width" />