diff --git a/README.md b/README.md
index 28fb2c1..8fcc9d7 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/Schero94/Magicmark/main/docs/site/img/icon.svg" alt="Magic Mark icon" width="96" height="96" />
+</p>
+
 # Magic Mark
 
 **Saved views for the Strapi 5 Content Manager.** Filter a list once, save it as a bookmark and
diff --git a/docs/site/img/icon-128.png b/docs/site/img/icon-128.png
new file mode 100644
index 0000000..41f51da
Binary files /dev/null and b/docs/site/img/icon-128.png differ
diff --git a/docs/site/img/icon-512.png b/docs/site/img/icon-512.png
new file mode 100644
index 0000000..e10c205
Binary files /dev/null and b/docs/site/img/icon-512.png differ
diff --git a/docs/site/img/icon.svg b/docs/site/img/icon.svg
new file mode 100644
index 0000000..8f3a81f
--- /dev/null
+++ b/docs/site/img/icon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Magic Mark">
+<defs><linearGradient id="g" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse"><stop stop-color="#B4237A"/><stop offset="1" stop-color="#F0619E"/></linearGradient></defs>
+<rect width="512" height="512" rx="112" fill="url(#g)"/>
+<rect x="3" y="3" width="506" height="506" rx="109" fill="none" stroke="#fff" stroke-opacity=".18" stroke-width="6"/>
+<g fill="none" stroke="#fff" stroke-width="36" stroke-linecap="round" stroke-linejoin="round">
+<path d="M160 108h192v300l-96-64-96 64Z" fill="#fff" stroke-width="24"/>
+<g stroke="url(#g)" stroke-width="26"><path d="M204 182h104M222 228h68M240 274h32"/></g>
+</g>
+<path d="M388 64Q400.0 112.0 448 124Q400.0 136.0 388 184Q376.0 136.0 328 124Q376.0 112.0 388 64Z" fill="#fff" stroke="url(#g)" stroke-width="28" stroke-linejoin="round" paint-order="stroke"/>
+</svg>
diff --git a/docs/site/index.html b/docs/site/index.html
index e9eec4d..e88de2d 100644
--- a/docs/site/index.html
+++ b/docs/site/index.html
@@ -57,6 +57,9 @@
         "codeRepository": "https://github.com/Schero94/Magicmark"
       }
     </script>
+    <link rel="icon" href="./img/icon.svg" type="image/svg+xml" />
+    <link rel="icon" href="./img/icon-128.png" type="image/png" sizes="128x128" />
+    <link rel="apple-touch-icon" href="./img/icon-512.png" />
     <link rel="stylesheet" href="./site.css" />
     <link rel="stylesheet" href="./site-extra.css" />
   </head>
@@ -66,7 +69,7 @@
     <header class="topbar">
       <div class="topbar-inner">
         <a class="brand" href="#main-content" aria-label="Magic Mark documentation home">
-          <span class="brand-mark" aria-hidden="true">MM</span>
+          <img class="brand-logo" src="./img/icon.svg" alt="" width="32" height="32" />
           <span>Magic Mark</span>
         </a>
         <nav class="top-links" aria-label="Primary navigation">
diff --git a/docs/site/site-extra.css b/docs/site/site-extra.css
index 0ec334a..f8aa75a 100644
--- a/docs/site/site-extra.css
+++ b/docs/site/site-extra.css
@@ -209,3 +209,10 @@ details p {
   clip: rect(0 0 0 0);
   white-space: nowrap;
 }
+
+.brand-logo {
+  display: block;
+  flex: 0 0 auto;
+  width: 2rem;
+  height: 2rem;
+}