diff --git a/docusaurus.config.js b/docusaurus.config.js
index 46733f8..e1e3cfc 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -5,6 +5,11 @@ const lightCodeTheme = require("prism-react-renderer/themes/github");
 const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 const path = require("path");
 
+// The pathname the site is served under. Docusaurus prefixes the `favicon`
+// field with this automatically, but not `headTags` hrefs -- those are emitted
+// verbatim, so they have to interpolate it themselves.
+const baseUrl = "/";
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   // Site title is appended to every page's <title> tag as "Page Title | <site title>".
@@ -16,12 +21,32 @@ const config = {
     "Boost your testing team. Elevate your quality & speed up release pace.",
   favicon: "img/favicon.png",
 
+  // Docusaurus `favicon` emits a single PNG link. Add the SVG (sharper at any
+  // size) and the apple-touch-icon alongside it; Safari falls back to the PNG.
+  headTags: [
+    {
+      tagName: "link",
+      attributes: {
+        rel: "icon",
+        type: "image/svg+xml",
+        href: `${baseUrl}img/favicon.svg`,
+      },
+    },
+    {
+      tagName: "link",
+      attributes: {
+        rel: "apple-touch-icon",
+        href: `${baseUrl}img/apple-touch-icon.png`,
+      },
+    },
+  ],
+
   // Set the production url of your site here
   url: "https://website.wopee.io",
   // url: "https://wopee.io",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: "/",
+  baseUrl,
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
diff --git a/static/img/apple-touch-icon.png b/static/img/apple-touch-icon.png
new file mode 100644
index 0000000..15c5272
Binary files /dev/null and b/static/img/apple-touch-icon.png differ
diff --git a/static/img/favicon.png b/static/img/favicon.png
index f3f533d..47d3234 100644
Binary files a/static/img/favicon.png and b/static/img/favicon.png differ
diff --git a/static/img/favicon.svg b/static/img/favicon.svg
new file mode 100644
index 0000000..5d5e655
--- /dev/null
+++ b/static/img/favicon.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Wopee.io">
+  <rect width="512" height="512" rx="112" fill="#7030a0"/>
+  <path transform="translate(96 94) scale(2)" fill="#ffcc00" d="M4 0L46 0L50 3L51 5L51 90L63 66L64 61L70 56L91 56L93 57L97 61L99 68L105 78L105 81L110 89L110 6L111 6L111 3L115 0L155 0L159 3L160 5L160 107L159 107L159 114L158 114L156 125L154 127L153 133L151 135L149 144L147 146L146 152L142 160L140 160L139 162L102 162L102 161L99 161L96 158L94 148L92 145L92 141L90 138L90 134L88 131L88 127L86 124L86 120L83 115L77 115L75 117L74 124L73 124L71 134L69 137L69 141L67 144L67 148L65 151L65 155L61 161L59 162L22 162L16 157L16 154L14 152L12 143L10 141L8 132L6 130L6 127L5 127L5 124L2 118L2 114L1 114L1 109L0 109L0 4Z"/>
+</svg>