feat: add favicon

theodorusclarence · Jan 20, 2022 · e67614f · e67614f
1 parent 852651f
commit e67614f
Show file tree

Hide file tree

Showing 37 changed files with 53 additions and 112 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png
diff --git a/public/favicon/android-chrome-256x256.png b/public/favicon/android-chrome-256x256.png
diff --git a/public/favicon/android-icon-144x144.png b/public/favicon/android-icon-144x144.png
diff --git a/public/favicon/android-icon-192x192.png b/public/favicon/android-icon-192x192.png
diff --git a/public/favicon/android-icon-36x36.png b/public/favicon/android-icon-36x36.png
diff --git a/public/favicon/android-icon-48x48.png b/public/favicon/android-icon-48x48.png
diff --git a/public/favicon/android-icon-72x72.png b/public/favicon/android-icon-72x72.png
diff --git a/public/favicon/android-icon-96x96.png b/public/favicon/android-icon-96x96.png
diff --git a/public/favicon/apple-icon-114x114.png b/public/favicon/apple-icon-114x114.png
diff --git a/public/favicon/apple-icon-120x120.png b/public/favicon/apple-icon-120x120.png
diff --git a/public/favicon/apple-icon-144x144.png b/public/favicon/apple-icon-144x144.png
diff --git a/public/favicon/apple-icon-152x152.png b/public/favicon/apple-icon-152x152.png
diff --git a/public/favicon/apple-icon-180x180.png b/public/favicon/apple-icon-180x180.png
diff --git a/public/favicon/apple-icon-57x57.png b/public/favicon/apple-icon-57x57.png
diff --git a/public/favicon/apple-icon-60x60.png b/public/favicon/apple-icon-60x60.png
diff --git a/public/favicon/apple-icon-72x72.png b/public/favicon/apple-icon-72x72.png
diff --git a/public/favicon/apple-icon-76x76.png b/public/favicon/apple-icon-76x76.png
diff --git a/public/favicon/apple-icon-precomposed.png b/public/favicon/apple-icon-precomposed.png
diff --git a/public/favicon/apple-icon.png b/public/favicon/apple-icon.png
diff --git a/public/favicon/apple-touch-icon.png b/public/favicon/apple-touch-icon.png
diff --git a/public/favicon/browserconfig.xml b/public/favicon/browserconfig.xml
@@ -1,2 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
diff --git a/public/favicon/favicon-96x96.png b/public/favicon/favicon-96x96.png
diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico
diff --git a/public/favicon/large-og.jpg b/public/favicon/large-og.jpg
diff --git a/public/favicon/manifest.json b/public/favicon/manifest.json
diff --git a/public/favicon/ms-icon-144x144.png b/public/favicon/ms-icon-144x144.png
diff --git a/public/favicon/ms-icon-150x150.png b/public/favicon/ms-icon-150x150.png
diff --git a/public/favicon/ms-icon-310x310.png b/public/favicon/ms-icon-310x310.png
diff --git a/public/favicon/ms-icon-70x70.png b/public/favicon/ms-icon-70x70.png
diff --git a/public/favicon/mstile-150x150.png b/public/favicon/mstile-150x150.png
diff --git a/public/favicon/og.png b/public/favicon/og.png
diff --git a/public/favicon/safari-pinned-tab.svg b/public/favicon/safari-pinned-tab.svg
diff --git a/public/favicon/site.webmanifest b/public/favicon/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
@@ -1,8 +1,6 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
-import { openGraph } from '@/lib/helper';
-
 const defaultMeta = {
   title: 'Notiolink',
   siteName: 'Notiolink',
@@ -11,8 +9,7 @@ const defaultMeta = {
   url: 'https://notiolink.thcl.dev',
   type: 'website',
   robots: 'follow, index',
-  /** No need to be filled, will be populated with openGraph function */
-  image: '',
+  image: 'https://notiolink.thcl.dev/favicon/og.png',
 };
 
 type SeoProps = {
@@ -30,14 +27,6 @@ export default function Seo(props: SeoProps) {
     ? `${props.templateTitle} | ${meta.siteName}`
     : meta.title;
 
-  // Use siteName if there is templateTitle
-  // but show full title if there is none
-  meta['image'] = openGraph({
-    description: meta.description,
-    siteName: props.templateTitle ? meta.siteName : meta.title,
-    templateTitle: props.templateTitle,
-  });
-
   return (
     <Head>
       <title>{meta.title}</title>
@@ -78,10 +67,6 @@ export default function Seo(props: SeoProps) {
         <link key={linkProps.href} {...linkProps} />
       ))}
       <meta name='msapplication-TileColor' content='#ffffff' />
-      <meta
-        name='msapplication-TileImage'
-        content='/favicon/ms-icon-144x144.png'
-      />
       <meta name='theme-color' content='#ffffff' />
     </Head>
   );
@@ -94,71 +79,18 @@ type Favicons = {
   type?: string;
 };
 
-// !STARTERCONF this is the default favicon, you can generate your own from https://www.favicon-generator.org/ then replace the whole /public/favicon folder
 const favicons: Array<Favicons> = [
-  {
-    rel: 'apple-touch-icon',
-    sizes: '57x57',
-    href: '/favicon/apple-icon-57x57.png',
-  },
-  {
-    rel: 'apple-touch-icon',
-    sizes: '60x60',
-    href: '/favicon/apple-icon-60x60.png',
-  },
-  {
-    rel: 'apple-touch-icon',
-    sizes: '72x72',
-    href: '/favicon/apple-icon-72x72.png',
-  },
-  {
-    rel: 'apple-touch-icon',
-    sizes: '76x76',
-    href: '/favicon/apple-icon-76x76.png',
-  },
-  {
-    rel: 'apple-touch-icon',
-    sizes: '114x114',
-    href: '/favicon/apple-icon-114x114.png',
-  },
-  {
-    rel: 'apple-touch-icon',
-    sizes: '120x120',
-    href: '/favicon/apple-icon-120x120.png',
-  },
-  {
-    rel: 'apple-touch-icon',
-    sizes: '144x144',
-    href: '/favicon/apple-icon-144x144.png',
-  },
-  {
-    rel: 'apple-touch-icon',
-    sizes: '152x152',
-    href: '/favicon/apple-icon-152x152.png',
-  },
   {
     rel: 'apple-touch-icon',
     sizes: '180x180',
     href: '/favicon/apple-icon-180x180.png',
   },
-  {
-    rel: 'icon',
-    type: 'image/png',
-    sizes: '192x192',
-    href: '/favicon/android-icon-192x192.png',
-  },
   {
     rel: 'icon',
     type: 'image/png',
     sizes: '32x32',
     href: '/favicon/favicon-32x32.png',
   },
-  {
-    rel: 'icon',
-    type: 'image/png',
-    sizes: '96x96',
-    href: '/favicon/favicon-96x96.png',
-  },
   {
     rel: 'icon',
     type: 'image/png',
@@ -167,6 +99,10 @@ const favicons: Array<Favicons> = [
   },
   {
     rel: 'manifest',
-    href: '/favicon/manifest.json',
+    href: '/favicon/site.webmanifest',
+  },
+  {
+    rel: 'mask-icon',
+    href: '/favicon/safari-pinned-tab.svg',
   },
 ];