Merge pull request #731 from UTDNebula/standardize-favicon

Standardize favicon and open graph data across Nebula
UTDNebula · Nov 14, 2023 · 3f89f1d · 3f89f1d
2 parents 0a8a8cf + ddab44d
commit 3f89f1d
Show file tree

Hide file tree

Showing 16 changed files with 207 additions and 197 deletions.
diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
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/index.html b/public/index.html
@@ -1,20 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+<head prefix="og: http://ogp.me/ns#">
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Nebula Planner</title>
-  <meta name="description" content="Say goodbye to the stress and hassle of degree planning and hello to a smooth, organized path towards graduation with Nebula Planner.">
-  <meta property="og:title" content="Nebula Planner">
-  <meta property="og:description" content="Say goodbye to the stress and hassle of degree planning and hello to a smooth, organized path towards graduation with Nebula Planner.">
-  <meta property="og:image" content="/img.png">
+
+  <meta
+    name="description"
+    content="Say goodbye to the stress and hassle of degree planning and hello to a smooth, organized path towards graduation with Nebula Planner."
+  />
+  <meta name="theme-color" content="#573DFF" />
+
+  <meta property="og:title" content="Nebula Planner" />
+  <meta
+    property="og:description"
+    content="Say goodbye to the stress and hassle of degree planning and hello to a smooth, organized path towards graduation with Nebula Planner."
+  />
+  <meta property="og:type" content="website" />
+  <meta
+    property="og:image"
+    content="https://planner.utdnebula.com/logoIcon.png"
+  />
+  <meta property="og:image:type" content="image/png" />
+  <meta property="og:image:alt" content="Nebula Labs Icon." />
+  <meta property="og:image:width" content="512" />
+  <meta property="og:image:height" content="512" />
+
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:domain" content="planner.utdnebula.com" />
+
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="/favicon-32x32.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="/favicon-16x16.png"
+  />
+  <link rel="icon" href="/logoIcon.svg" type="image/svg+xml" />
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-  <link rel="manifest" href="/site.webmanifest"/>
-  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#090b2a" />
+  <link rel="manifest" href="/site.webmanifest" />
   <meta name="msapplication-TileColor" content="#4659A7" />
   <meta name="theme-color" content="#4659A7" />
+
   <link rel="stylesheet" href="/index.css">
 </head>
 <body>

diff --git a/public/logoIcon.png b/public/logoIcon.png
diff --git a/public/logoIcon.svg b/public/logoIcon.svg
diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -86,25 +86,21 @@ const NebulaApp: AppType<{ session: Session | null }> = ({
     <SessionProvider session={session}>
       <ReactQueryDevtools initialIsOpen={false} />
       <Head>
+        <title>Nebula Planner</title>
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="icon" href="/logoIcon.svg" type="image/svg+xml" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+
         <meta charSet="utf-8" />
         <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         <meta
           name="viewport"
           content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
         />
-        <meta
-          name="description"
-          content="A tool to help students plan their degree plans and college experience at UTD."
-        />
         <meta name="keywords" content="UTD, UT Dallas, degree planner" />
-        <title>Planner</title>
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-        <link rel="manifest" href="/site.webmanifest" />
-        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#090b2a" />
-        <meta name="msapplication-TileColor" content="#4659A7" />
-        <meta name="theme-color" content="#4659A7" />
+        <meta name="msapplication-TileColor" content="#573DFF" />
 
         {process.env.VERCEL_ENV === 'production' && (
           <script

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -8,8 +8,29 @@ class MyDocument extends Document {
 
   render() {
     return (
-      <Html>
-        <Head>
+      <Html lang="en">
+        <Head prefix="og: http://ogp.me/ns#">
+          <meta
+            name="description"
+            content="Say goodbye to the stress and hassle of degree planning and hello to a smooth, organized path towards graduation with Nebula Planner."
+          />
+          <meta name="theme-color" content="#573DFF" />
+
+          <meta property="og:title" content="Nebula Planner" />
+          <meta
+            property="og:description"
+            content="Say goodbye to the stress and hassle of degree planning and hello to a smooth, organized path towards graduation with Nebula Planner."
+          />
+          <meta property="og:type" content="website" />
+          <meta property="og:image" content="https://planner.utdnebula.com/logoIcon.png" />
+          <meta property="og:image:type" content="image/png" />
+          <meta property="og:image:alt" content="Nebula Labs Icon." />
+          <meta property="og:image:width" content="512" />
+          <meta property="og:image:height" content="512" />
+
+          <meta name="twitter:card" content="summary" />
+          <meta name="twitter:domain" content="planner.utdnebula.com" />
+
           <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
         </Head>
         <body>