Favicon and branding

AppsByCole · Nov 25, 2021 · 82e0e4d · 82e0e4d
1 parent befd559
commit 82e0e4d
Show file tree

Hide file tree

Showing 13 changed files with 73 additions and 14 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-384x384.png b/public/android-chrome-384x384.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/public/spheal.png b/public/spheal.png
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,10 +2,55 @@ import "tailwindcss/tailwind.css";
 import "../styles/global.css";
 import type { AppProps } from "next/app";
 import PlausibleProvider from "next-plausible";
+import Head from "next/head";
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const description =
+    "We're here to answer the eternal question: What Pokémon is roundest?";
+  const title = "Roundest Pokémon";
+  const imageMetaURL = "https://roundest.t3.gg/spheal.png";
+
   return (
     <PlausibleProvider domain="roundest.t3.gg">
+      <Head>
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <link rel="icon" href={"https://roundest.t3.gg/favicon.ico"} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:image" content={imageMetaURL} />
+        <meta name="twitter:image" content={imageMetaURL} />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="theme-color" content="#000000" />
+
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png?v=2"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png?v=2"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png?v=2"
+        />
+        <link rel="manifest" href="/site.webmanifest?v=2" />
+        <link rel="shortcut icon" href="/favicon.ico?v=2" />
+        <meta
+          name="apple-mobile-web-app-title"
+          content="Round - Video Calls Powered By T3 Tools"
+        />
+        <meta
+          name="application-name"
+          content="Round - Video Calls Powered By T3 Tools"
+        />
+      </Head>
       <Component {...pageProps} />
     </PlausibleProvider>
   );

diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts