diff --git a/index.html b/index.html
index ab55a27..38f272c 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,19 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>~raf | frzn.dev</title>
+    <link
+      rel="icon"
+      href="static/favicon.ico"
+      type="image/x-icon"
+      sizes="32x32"
+    />
+    <link
+      rel="icon"
+      href="static/favicon.ico"
+      type="image/x-icon"
+      sizes="16x16"
+    />
+    <title>~raf @ frzn.dev</title>
     <link rel="stylesheet" href="styles.css" />
     <link
       rel="stylesheet"
@@ -14,7 +26,11 @@
     <div class="container">
       <div class="card">
         <div style="display: flex; justify-content: center">
-          <img src="pfp-angel.png" alt="NotAShelf" class="profile-picture" />
+          <img
+            src="static/pfp-angel.png"
+            alt="NotAShelf"
+            class="profile-picture"
+          />
         </div>
         <h2>About Me</h2>
         <p>
@@ -54,30 +70,6 @@
       </span>
     </footer>
     <div class="tooltip"></div>
-    <script>
-      const currentYear = new Date().getFullYear();
-      const footerText =
-        currentYear === 2024
-          ? "© 2024 NotAShelf"
-          : `© 2024-${currentYear} NotAShelf`;
-      document.getElementById("footer-text").textContent = footerText;
-    </script>
-    <script>
-      const tooltip = document.querySelector(".tooltip");
-      const hoverItems = document.querySelectorAll(".hover-item");
-
-      hoverItems.forEach((item) => {
-        item.addEventListener("mouseenter", (e) => {
-          tooltip.innerText = e.target.dataset.content;
-          tooltip.style.display = "block";
-          tooltip.style.left = e.pageX + "px";
-          tooltip.style.top = e.pageY - tooltip.offsetHeight - 10 + "px";
-        });
-
-        item.addEventListener("mouseleave", () => {
-          tooltip.style.display = "none";
-        });
-      });
-    </script>
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..3c44d15
--- /dev/null
+++ b/script.js
@@ -0,0 +1,22 @@
+const currentYear = new Date().getFullYear();
+const footerText =
+  currentYear === 2024
+    ? "© 2024 NotAShelf"
+    : `© 2024-${currentYear} NotAShelf`;
+document.getElementById("footer-text").textContent = footerText;
+
+const tooltip = document.querySelector(".tooltip");
+const hoverItems = document.querySelectorAll(".hover-item");
+
+hoverItems.forEach((item) => {
+  item.addEventListener("mouseenter", (e) => {
+    tooltip.innerText = e.target.dataset.content;
+    tooltip.style.display = "block";
+    tooltip.style.left = e.pageX + "px";
+    tooltip.style.top = e.pageY - tooltip.offsetHeight - 35 + "px";
+  });
+
+  item.addEventListener("mouseleave", () => {
+    tooltip.style.display = "none";
+  });
+});
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..3bf5144
Binary files /dev/null and b/static/favicon.ico differ
diff --git a/pfp-angel.png b/static/pfp-angel.png
similarity index 100%
rename from pfp-angel.png
rename to static/pfp-angel.png
