customisable icon and new design

components/Navbar.tsx

@@ -4,6 +4,7 @@ import { Dialog, Transition } from '@headlessui/react'
 import toast, { Toaster } from 'react-hot-toast'
 
 import Link from 'next/link'
+import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { Fragment, useEffect, useState } from 'react'
 
@@ -46,7 +47,7 @@ const Navbar = () => {
 
         <Link href="/">
           <a className="flex items-center space-x-2 font-bold text-xl p-2 dark:text-white hover:opacity-80">
-            <FontAwesomeIcon icon="cloud" />
+            <Image src={siteConfig.icon} alt="icon" width="32" height="32" />
             <span className="hidden sm:block">{siteConfig.title}</span>
           </a>
         </Link>

config/site.json

@@ -1,4 +1,5 @@
 {
+  "icon": "/icons/128.png",
   "title": "Spencer's OneDrive Index",
   "footer": "Powered by <a class=\"hover:underline\" href=\"https://github.com/spencerwooo/onedrive-vercel-index\" target=\"_blank\" rel=\"noopener noreferrer\">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.",
   "protectedRoutes": [