diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..83dc1de
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index 0374db6..abe9f83 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ notebooks/__pycache__/
 notebooks/state_of_the_union.txt
 notebooks/chroma_logs.log
 notebooks/.chroma/
+.DS_Store
 
 # app
 .next
diff --git a/public/144-favicon-dark.svg b/public/144-favicon-dark.svg
new file mode 100644
index 0000000..29ae559
--- /dev/null
+++ b/public/144-favicon-dark.svg
@@ -0,0 +1,5 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="27.9612" cy="23.4146" rx="27.9612" ry="23.4146" fill="white"/>
+<ellipse cx="27.9612" cy="120.585" rx="27.9612" ry="23.4146" fill="white"/>
+<ellipse cx="116.039" cy="70.2439" rx="27.9612" ry="23.4146" fill="white"/>
+</svg>
diff --git a/public/144-favicon.svg b/public/144-favicon.svg
new file mode 100644
index 0000000..6ada691
--- /dev/null
+++ b/public/144-favicon.svg
@@ -0,0 +1,5 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="27.9612" cy="23.4146" rx="27.9612" ry="23.4146" fill="currentColor"/>
+<ellipse cx="27.9612" cy="120.585" rx="27.9612" ry="23.4146" fill="currentColor"/>
+<ellipse cx="116.039" cy="70.2439" rx="27.9612" ry="23.4146" fill="currentColor"/>
+</svg>
diff --git a/theme.config.tsx b/theme.config.tsx
index a936f5d..3d7dbbf 100644
--- a/theme.config.tsx
+++ b/theme.config.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { DocsThemeConfig } from 'nextra-theme-docs'
+import { useConfig } from 'nextra-theme-docs'
 
 const config: DocsThemeConfig = {
   logo: (
@@ -14,6 +15,28 @@ const config: DocsThemeConfig = {
       </span>
     </>
   ),
+  head: function UseHead() {
+    const { title } = useConfig()
+    return (
+    <>
+      <title>{title ? title + ' | Prompt Engineering Guide': 'Prompt Engineering Guide'} </title>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta property="og:title" content="Prompt Engineering Guide" />
+      <meta property="og:description" content="A Comprehensive Overview of Prompt Engineering" />
+      <meta
+          name="og:title"
+          content={title ? title + ' | Prompt Engineering Guide' : 'Prompt Engineering Guide'}
+        />
+      <link rel="icon" href="/144-favicon.svg" type="image/svg+xml" />
+
+        <link
+          rel="icon"
+          href="/144-favicon-dark.svg"
+          type="image/svg+xml"
+          media="(prefers-color-scheme: dark)"
+        />
+    </>
+  )},
   project: {
     link: 'https://github.com/dair-ai/Prompt-Engineering-Guide',
   },