diff --git a/brand/bugtrail.svg b/brand/bugtrail.svg
new file mode 100644
index 0000000..64e0aaa
--- /dev/null
+++ b/brand/bugtrail.svg
@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!-- BugTrail mark: a bug at the head of the trail of steps it walked -->
+  <defs>
+    <linearGradient id="tile" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#1b1e2e"/>
+      <stop offset="1" stop-color="#14151f"/>
+    </linearGradient>
+    <linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#89b4fa"/>
+      <stop offset="1" stop-color="#7aa2f7"/>
+    </linearGradient>
+  </defs>
+
+  <rect width="512" height="512" rx="104" fill="url(#tile)"/>
+  <rect x="8" y="8" width="496" height="496" rx="96" fill="none" stroke="#2f334d" stroke-width="8" opacity="0.8"/>
+
+  <!-- trail: recent steps first, older ones smaller and fainter -->
+  <circle cx="256" cy="368" r="20" fill="#7aa2f7" opacity="0.85"/>
+  <circle cx="256" cy="424" r="14" fill="#7aa2f7" opacity="0.55"/>
+  <circle cx="256" cy="464" r="9"  fill="#7aa2f7" opacity="0.30"/>
+
+  <!-- legs, three pairs, behind the body -->
+  <g stroke="#c0caf5" stroke-width="15" stroke-linecap="round" fill="none">
+    <path d="M212 190 L152 148 L138 104"/>
+    <path d="M300 190 L360 148 L374 104"/>
+    <path d="M198 246 L128 240"/>
+    <path d="M314 246 L384 240"/>
+    <path d="M212 302 L154 342 L140 386"/>
+    <path d="M300 302 L358 342 L372 386"/>
+  </g>
+
+  <!-- antennae -->
+  <g stroke="#c0caf5" stroke-width="13" stroke-linecap="round" fill="none">
+    <path d="M238 96 C 228 70, 208 56, 188 50"/>
+    <path d="M274 96 C 284 70, 304 56, 324 50"/>
+  </g>
+
+  <!-- head -->
+  <circle cx="256" cy="124" r="33" fill="#c0caf5"/>
+
+  <!-- body with elytra split -->
+  <ellipse cx="256" cy="244" rx="64" ry="100" fill="url(#body)"/>
+  <line x1="256" y1="164" x2="256" y2="338" stroke="#1b1e2e" stroke-width="11" stroke-linecap="round"/>
+  <path d="M256 200 C 226 214, 210 252, 208 300" stroke="#1b1e2e" stroke-width="8" fill="none" opacity="0.25" stroke-linecap="round"/>
+  <path d="M256 200 C 286 214, 302 252, 304 300" stroke="#1b1e2e" stroke-width="8" fill="none" opacity="0.25" stroke-linecap="round"/>
+  <ellipse cx="232" cy="196" rx="18" ry="34" fill="#ffffff" opacity="0.14" transform="rotate(-18 232 196)"/>
+</svg>
\ No newline at end of file
diff --git a/packages/extension/manifest.template.json b/packages/extension/manifest.template.json
index 2a1ee92..31f0b84 100644
--- a/packages/extension/manifest.template.json
+++ b/packages/extension/manifest.template.json
@@ -7,7 +7,19 @@
   "host_permissions": ["<all_urls>"],
   "action": {
     "default_title": "BugTrail",
-    "default_popup": "src/popup/popup.html"
+    "default_popup": "src/popup/popup.html",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
   },
   "web_accessible_resources": [
     {
diff --git a/packages/extension/src/icons/icon-128.png b/packages/extension/src/icons/icon-128.png
new file mode 100644
index 0000000..b96101a
--- /dev/null
+++ b/packages/extension/src/icons/icon-128.png
Binary files differ
diff --git a/packages/extension/src/icons/icon-16.png b/packages/extension/src/icons/icon-16.png
new file mode 100644
index 0000000..a0ea693
--- /dev/null
+++ b/packages/extension/src/icons/icon-16.png
Binary files differ
diff --git a/packages/extension/src/icons/icon-32.png b/packages/extension/src/icons/icon-32.png
new file mode 100644
index 0000000..efe4b40
--- /dev/null
+++ b/packages/extension/src/icons/icon-32.png
Binary files differ
diff --git a/packages/extension/src/icons/icon-48.png b/packages/extension/src/icons/icon-48.png
new file mode 100644
index 0000000..41f19a4
--- /dev/null
+++ b/packages/extension/src/icons/icon-48.png
Binary files differ
diff --git a/packages/extension/src/icons/logo.svg b/packages/extension/src/icons/logo.svg
new file mode 100644
index 0000000..64e0aaa
--- /dev/null
+++ b/packages/extension/src/icons/logo.svg
@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!-- BugTrail mark: a bug at the head of the trail of steps it walked -->
+  <defs>
+    <linearGradient id="tile" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#1b1e2e"/>
+      <stop offset="1" stop-color="#14151f"/>
+    </linearGradient>
+    <linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#89b4fa"/>
+      <stop offset="1" stop-color="#7aa2f7"/>
+    </linearGradient>
+  </defs>
+
+  <rect width="512" height="512" rx="104" fill="url(#tile)"/>
+  <rect x="8" y="8" width="496" height="496" rx="96" fill="none" stroke="#2f334d" stroke-width="8" opacity="0.8"/>
+
+  <!-- trail: recent steps first, older ones smaller and fainter -->
+  <circle cx="256" cy="368" r="20" fill="#7aa2f7" opacity="0.85"/>
+  <circle cx="256" cy="424" r="14" fill="#7aa2f7" opacity="0.55"/>
+  <circle cx="256" cy="464" r="9"  fill="#7aa2f7" opacity="0.30"/>
+
+  <!-- legs, three pairs, behind the body -->
+  <g stroke="#c0caf5" stroke-width="15" stroke-linecap="round" fill="none">
+    <path d="M212 190 L152 148 L138 104"/>
+    <path d="M300 190 L360 148 L374 104"/>
+    <path d="M198 246 L128 240"/>
+    <path d="M314 246 L384 240"/>
+    <path d="M212 302 L154 342 L140 386"/>
+    <path d="M300 302 L358 342 L372 386"/>
+  </g>
+
+  <!-- antennae -->
+  <g stroke="#c0caf5" stroke-width="13" stroke-linecap="round" fill="none">
+    <path d="M238 96 C 228 70, 208 56, 188 50"/>
+    <path d="M274 96 C 284 70, 304 56, 324 50"/>
+  </g>
+
+  <!-- head -->
+  <circle cx="256" cy="124" r="33" fill="#c0caf5"/>
+
+  <!-- body with elytra split -->
+  <ellipse cx="256" cy="244" rx="64" ry="100" fill="url(#body)"/>
+  <line x1="256" y1="164" x2="256" y2="338" stroke="#1b1e2e" stroke-width="11" stroke-linecap="round"/>
+  <path d="M256 200 C 226 214, 210 252, 208 300" stroke="#1b1e2e" stroke-width="8" fill="none" opacity="0.25" stroke-linecap="round"/>
+  <path d="M256 200 C 286 214, 302 252, 304 300" stroke="#1b1e2e" stroke-width="8" fill="none" opacity="0.25" stroke-linecap="round"/>
+  <ellipse cx="232" cy="196" rx="18" ry="34" fill="#ffffff" opacity="0.14" transform="rotate(-18 232 196)"/>
+</svg>
\ No newline at end of file
diff --git a/packages/extension/src/options/Options.vue b/packages/extension/src/options/Options.vue
index b508fa2..3990d14 100644
--- a/packages/extension/src/options/Options.vue
+++ b/packages/extension/src/options/Options.vue
@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from "vue";
 import browser from "webextension-polyfill";
 import { GnAvatar, GnButton, GnCard, GnInput, GnSelect } from "gnexus-ui-kit/vue";
+import logoUrl from "../icons/logo.svg";
 
 interface SettingsView {
   serverUrl: string;
@@ -116,7 +117,7 @@
 <template>
   <div class="options">
     <header class="options-head">
-      <i class="ph ph-bug options-logo" />
+      <img class="options-logo" :src="logoUrl" alt="" />
       <div>
         <h1 class="options-title">BugTrail</h1>
         <p class="options-tagline">Capture element notes and recordings into your projects</p>
@@ -210,8 +211,9 @@
   gap: 14px;
 }
 .options-logo {
-  font-size: 34px;
-  color: var(--ltt-accent, #7aa2f7);
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
 }
 .options-title {
   margin: 0;
diff --git a/packages/extension/src/options/options.html b/packages/extension/src/options/options.html
index 167b3af..90a1bbf 100644
--- a/packages/extension/src/options/options.html
+++ b/packages/extension/src/options/options.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="../../icons/icon-32.png" />
     <title>BugTrail — Settings</title>
   </head>
   <body>
diff --git a/packages/extension/src/popup/Popup.vue b/packages/extension/src/popup/Popup.vue
index cb30fc3..94c8b49 100644
--- a/packages/extension/src/popup/Popup.vue
+++ b/packages/extension/src/popup/Popup.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref } from "vue";
 import browser from "webextension-polyfill";
 import { GnButton } from "gnexus-ui-kit/vue";
+import logoUrl from "../icons/logo.svg";
 
 interface LatestReport {
   title: string;
@@ -137,7 +138,7 @@
 <template>
   <div class="popup">
     <header class="popup-head">
-      <i class="ph ph-bug popup-logo" />
+      <img class="popup-logo" :src="logoUrl" alt="" />
       <span class="popup-title">BugTrail</span>
       <button type="button" class="popup-gear" title="Settings" @click="openOptions">
         <i class="ph ph-gear" />
@@ -236,8 +237,9 @@
   gap: 8px;
 }
 .popup-logo {
-  font-size: 20px;
-  color: var(--ltt-accent, #7aa2f7);
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
 }
 .popup-title {
   font-size: 12px;
diff --git a/packages/extension/src/popup/popup.html b/packages/extension/src/popup/popup.html
index cece3dc..e937b3b 100644
--- a/packages/extension/src/popup/popup.html
+++ b/packages/extension/src/popup/popup.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="../../icons/icon-32.png" />
     <title>BugTrail</title>
   </head>
   <body>
diff --git a/packages/extension/verify-logo.mjs b/packages/extension/verify-logo.mjs
new file mode 100644
index 0000000..d8cb1e8
--- /dev/null
+++ b/packages/extension/verify-logo.mjs
@@ -0,0 +1,25 @@
+import { chromium } from "playwright-core";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { readFile, writeFile, mkdir } from "node:fs/promises";
+import { homedir } from "node:os";
+
+const root = dirname(dirname(dirname(fileURLToPath(import.meta.url)))); // repo root
+const exe = join(homedir(), ".cache/ms-playwright/chromium-1234/chrome-linux64/chrome");
+const browser = await chromium.launch({ executablePath: exe, headless: true });
+const page = await browser.newPage({ viewport: { width: 512, height: 512 } });
+const svg = await readFile(join(root, "brand/bugtrail.svg"), "utf8");
+await page.setContent(`<body style="margin:0;background:transparent">${svg.replace("<svg ", '<svg width="512" height="512" ')}</body>`);
+await page.screenshot({ path: "/tmp/ltt-shots/28-logo-preview.png", omitBackground: true });
+// emit PNG icons for the extension manifest from the same SVG
+const sizes = [16, 32, 48, 128];
+const iconsDir = join(root, "packages/extension/src/icons");
+await mkdir(iconsDir, { recursive: true });
+for (const size of sizes) {
+  await page.setViewportSize({ width: size, height: size });
+  await page.setContent(`<body style="margin:0;background:transparent">${svg.replace("<svg ", `<svg width="${size}" height="${size}" `)}</body>`);
+  const buf = await page.screenshot({ omitBackground: true });
+  await writeFile(join(iconsDir, `icon-${size}.png`), buf);
+}
+await browser.close();
+console.log("icons written to", iconsDir);
\ No newline at end of file
diff --git a/packages/extension/verify-popup-shot.mjs b/packages/extension/verify-popup-shot.mjs
new file mode 100644
index 0000000..7726e4a
--- /dev/null
+++ b/packages/extension/verify-popup-shot.mjs
@@ -0,0 +1,18 @@
+import { chromium } from "playwright-core";
+import { join, dirname } from "node:path";
+import { homedir } from "node:os";
+const root = "/home/gmikcon/Projects/live-testing-tool/packages/extension";
+const exe = join(homedir(), ".cache/ms-playwright/chromium-1234/chrome-linux64/chrome");
+const context = await chromium.launchPersistentContext("", {
+  executablePath: exe, headless: true,
+  args: [`--disable-extensions-except=${root}/dist/chrome`, `--load-extension=${root}/dist/chrome`],
+});
+let [worker] = context.serviceWorkers();
+if (!worker) worker = await context.waitForEvent("serviceworker", { timeout: 10000 });
+const id = new URL(worker.url()).host;
+const popup = await context.newPage();
+await popup.goto(`chrome-extension://${id}/src/popup/popup.html`);
+await popup.waitForSelector(".popup-head", { timeout: 10000 });
+await popup.waitForTimeout(600);
+await popup.screenshot({ path: "/tmp/ltt-shots/29-popup-logo.png" });
+await context.close();
diff --git a/packages/extension/vite.config.ts b/packages/extension/vite.config.ts
index 5dad29e..b621e9f 100644
--- a/packages/extension/vite.config.ts
+++ b/packages/extension/vite.config.ts
@@ -37,6 +37,7 @@
           // kit.css references /assets/fonts/... absolutely; the overlay rewrites
           // those to runtime.getURL('') + '/assets/...' at runtime
           { src: "../../node_modules/gnexus-ui-kit/dist/assets/*", dest: "assets" },
+          { src: "src/icons/*.png", dest: "icons" },
         ],
       }),
     ],
diff --git a/packages/web/index.html b/packages/web/index.html
index 385810c..229e893 100644
--- a/packages/web/index.html
+++ b/packages/web/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/bugtrail.svg" />
     <title>BugTrail</title>
   </head>
   <body>
diff --git a/packages/web/public/bugtrail.svg b/packages/web/public/bugtrail.svg
new file mode 100644
index 0000000..64e0aaa
--- /dev/null
+++ b/packages/web/public/bugtrail.svg
@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!-- BugTrail mark: a bug at the head of the trail of steps it walked -->
+  <defs>
+    <linearGradient id="tile" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#1b1e2e"/>
+      <stop offset="1" stop-color="#14151f"/>
+    </linearGradient>
+    <linearGradient id="body" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#89b4fa"/>
+      <stop offset="1" stop-color="#7aa2f7"/>
+    </linearGradient>
+  </defs>
+
+  <rect width="512" height="512" rx="104" fill="url(#tile)"/>
+  <rect x="8" y="8" width="496" height="496" rx="96" fill="none" stroke="#2f334d" stroke-width="8" opacity="0.8"/>
+
+  <!-- trail: recent steps first, older ones smaller and fainter -->
+  <circle cx="256" cy="368" r="20" fill="#7aa2f7" opacity="0.85"/>
+  <circle cx="256" cy="424" r="14" fill="#7aa2f7" opacity="0.55"/>
+  <circle cx="256" cy="464" r="9"  fill="#7aa2f7" opacity="0.30"/>
+
+  <!-- legs, three pairs, behind the body -->
+  <g stroke="#c0caf5" stroke-width="15" stroke-linecap="round" fill="none">
+    <path d="M212 190 L152 148 L138 104"/>
+    <path d="M300 190 L360 148 L374 104"/>
+    <path d="M198 246 L128 240"/>
+    <path d="M314 246 L384 240"/>
+    <path d="M212 302 L154 342 L140 386"/>
+    <path d="M300 302 L358 342 L372 386"/>
+  </g>
+
+  <!-- antennae -->
+  <g stroke="#c0caf5" stroke-width="13" stroke-linecap="round" fill="none">
+    <path d="M238 96 C 228 70, 208 56, 188 50"/>
+    <path d="M274 96 C 284 70, 304 56, 324 50"/>
+  </g>
+
+  <!-- head -->
+  <circle cx="256" cy="124" r="33" fill="#c0caf5"/>
+
+  <!-- body with elytra split -->
+  <ellipse cx="256" cy="244" rx="64" ry="100" fill="url(#body)"/>
+  <line x1="256" y1="164" x2="256" y2="338" stroke="#1b1e2e" stroke-width="11" stroke-linecap="round"/>
+  <path d="M256 200 C 226 214, 210 252, 208 300" stroke="#1b1e2e" stroke-width="8" fill="none" opacity="0.25" stroke-linecap="round"/>
+  <path d="M256 200 C 286 214, 302 252, 304 300" stroke="#1b1e2e" stroke-width="8" fill="none" opacity="0.25" stroke-linecap="round"/>
+  <ellipse cx="232" cy="196" rx="18" ry="34" fill="#ffffff" opacity="0.14" transform="rotate(-18 232 196)"/>
+</svg>
\ No newline at end of file