feat(brand): adopt the new M↓ brand kit; fix CI tool downloads

Branding: - All app icons regenerated from the new vector brand kit (M↓ mark): icon.png/icon@2x (app + packaging), favicon.png, tray-icon.png, and the full assets/icons/ size set — generate-icons.js now rasterizes app-icon.svg directly (docico1.png removed) - index.html gets proper favicon/apple-touch links from the kit - Welcome tab hero shows the new mark; README gets the horizontal wordmark - assets/logo.png (ConcreteInfo) intentionally untouched CI release fixes (win/mac jobs were failing): - FiraCode download moved from moving raw/master URLs (hash drifted upstream, tripping the pin) to the immutable 6.2 release asset; repo fonts updated to the pinned 6.2 bits - macOS pandoc extractor locates the binary in the archive instead of assuming a bin/ layout that the macOS zip doesn't have Stray upload archive (markdown-converter-assets (1).zip) excluded.
2026-10-01 09:19:34 +05:30 · 2026-09-05 23:10:15 +05:30
parent 0be46d4bac
commit 77f8ba3d9d
47 changed files with 327 additions and 75 deletions
@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="assets/markdown-converter-assets/logo-horizontal.svg" alt="Markdown Converter" width="420">
+</p>
+
 # MarkdownConverter

 A powerful cross-platform Markdown editor and document converter powered by Pandoc, built with Electron. 100% open-source with no proprietary dependencies.
@@ -220,4 +224,4 @@ Amit Haridas (amit.wh@gmail.com)

 ## Version

-v4.7.0
+v4.7.1
@@ -0,0 +1,95 @@
+# Markdown Converter — Brand Assets
+
+Visual identity for [markdown-converter](https://github.com/amitwh/markdown-converter): a cross-platform Markdown editor & document converter powered by Pandoc.
+
+## Concept
+
+The mark is a stylized **M** whose right descender becomes a downward chevron — a literal "**M↓**" for **Markdown**, suggesting the source document flowing downward into rendered output (PDF, DOCX, PPTX, …).
+
+The palette is a vibrant orange-to-deep-orange gradient (`#FB923C → #C2410C`) on a white mark — warm, energetic, distinctive. The mark itself is **white** on light surfaces, and a luminous peach-to-orange gradient (`#FFEDD5 → #FB923C`) on dark surfaces.
+
+## Files
+
+### App icon (vector, primary)
+
+These are **true SVG app icons** — clean vector paths, no rasters. Drop them straight into a macOS/Windows/Linux app bundle, a PWA manifest, an iOS asset catalog, an Electron build, or any HTML page.
+
+| File | Use it for |
+| --- | --- |
+| `app-icon.svg` | **Primary app icon.** Emerald→teal vertical gradient, subtle white highlight upper-left, white M↓ mark. |
+| `app-icon-dark.svg` | **Dark-mode app icon.** Charcoal gradient background, soft teal radial glow upper-left, mint-to-emerald gradient on the M↓ mark. |
+| `app-icon-flat.svg` | **Flat solid variant.** Single emerald background, white M↓ mark. Use when you can't render gradients (print, stickers, single-color contexts). |
+
+### Logo (wordmark)
+
+| File | Use it for |
+| --- | --- |
+| `logo-horizontal.jpg` (2752×1536) | High-res raster master. README hero, press kit. |
+| `logo-horizontal-1600w.jpg` (1600×893) | Web-ready compressed version. |
+| `logo-horizontal.svg` | Vector wordmark. Use in HTML, CSS, anywhere that needs to scale. |
+
+### Vector mark (for code & inline use)
+
+| File | Use it for |
+| --- | --- |
+| `mark.svg` | Gradient SVG mark. Drop into HTML, use as a UI element, or rasterize at any size. |
+| `mark-mono.svg` | Monochrome SVG. Uses `currentColor` — style it from CSS (`color: white;`) for any single-color context. |
+| `mark-standalone.jpg` (2048×2048) | Raster M↓ on white, for places that need a PNG (GitHub avatar, doc thumbnails). |
+
+### Favicons (rasterized from `app-icon.svg`)
+
+In the `favicons/` directory:
+
+| File | Use it for |
+| --- | --- |
+| `favicon.ico` | Legacy `.ico` (16/32/48/64 embedded). Drop at the site root. |
+| `favicon-16x16.png`, `favicon-32x32.png`, `favicon-48x48.png` | Standard browser favicons. |
+| `apple-touch-icon.png` (180×180) | iOS home screen & "Add to Home Screen". |
+| `icon-192.png`, `icon-512.png` | Android home screen, PWA manifest, web app. |
+
+### Social preview
+
+| File | Use it for |
+| --- | --- |
+| `og-social-preview-1200x630.jpg` | **GitHub social preview** — set as the repository's social card image (Settings → Social preview). Also works as Open Graph / Twitter Card. |
+
+## Usage in the repo
+
+Drop the vector icons + favicon set into the repo root or a `/brand` folder, then in `README.md`:
+
+```markdown
+<p align="left">
+  <img src="./brand/app-icon.svg" width="80" alt="Markdown Converter">
+</p>
+```
+
+For the favicon, in `index.html` (or any HTML site):
+
+```html
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+```
+
+For an Electron app, point `build.icon` at the SVG (or a 512×512 PNG export):
+
+```json
+{
+  "build": {
+    "icon": "brand/icon-512.png"
+  }
+}
+```
+
+## Color tokens
+
+```
+--mc-orange-400: #FB923C   /* gradient start (light) */
+--mc-orange-700: #C2410C   /* gradient end   (light) */
+--mc-orange-500: #F97316   /* flat / accent        */
+--mc-peach-100:  #FFEDD5   /* dark-mode mark start */
+--mc-orange-300: #FDBA74   /* dark-mode mark mid   */
+--mc-ink-900:    #0F172A   /* primary text         */
+--mc-ink-500:    #475569   /* secondary text       */
+--mc-ink-400:    #94A3B8   /* tagline / muted      */
+```
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="Markdown Converter app icon (dark)">
+  <title>Markdown Converter (dark)</title>
+  <defs>
+    <linearGradient id="darkBg" x1="0" y1="0" x2="0" y2="1024" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#1C1917"/>
+      <stop offset="100%" stop-color="#0C0A09"/>
+    </linearGradient>
+    <radialGradient id="darkGlow" cx="280" cy="180" r="780" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#EA580C" stop-opacity="0.65"/>
+      <stop offset="60%" stop-color="#9A3412" stop-opacity="0.15"/>
+      <stop offset="100%" stop-color="#9A3412" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="darkMark" x1="0" y1="180" x2="0" y2="844" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#FFEDD5"/>
+      <stop offset="100%" stop-color="#FB923C"/>
+    </linearGradient>
+  </defs>
+  <rect width="1024" height="1024" rx="224" ry="224" fill="url(#darkBg)"/>
+  <rect width="1024" height="1024" rx="224" ry="224" fill="url(#darkGlow)"/>
+  <g transform="translate(154, 176) scale(7.16)" fill="none" stroke="url(#darkMark)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="26" y1="22" x2="26" y2="72"/>
+    <line x1="63" y1="22" x2="63" y2="75"/>
+    <polyline points="22,18 44.5,56 67,18"/>
+    <polyline points="48,60 63,76 78,60"/>
+  </g>
+</svg>
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="Markdown Converter app icon (flat)">
+  <title>Markdown Converter (flat)</title>
+  <rect width="1024" height="1024" rx="224" ry="224" fill="#F97316"/>
+  <g transform="translate(154, 176) scale(7.16)" fill="none" stroke="#FFFFFF" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="26" y1="22" x2="26" y2="72"/>
+    <line x1="63" y1="22" x2="63" y2="75"/>
+    <polyline points="22,18 44.5,56 67,18"/>
+    <polyline points="48,60 63,76 78,60"/>
+  </g>
+</svg>
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-label="Markdown Converter app icon">
+  <title>Markdown Converter</title>
+  <defs>
+    <linearGradient id="iconBg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#FB923C"/>
+      <stop offset="100%" stop-color="#C2410C"/>
+    </linearGradient>
+    <radialGradient id="iconHighlight" cx="0.28" cy="0.18" r="0.55">
+      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.28"/>
+      <stop offset="60%" stop-color="#FFFFFF" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="1024" height="1024" rx="224" ry="224" fill="url(#iconBg)"/>
+  <rect width="1024" height="1024" rx="224" ry="224" fill="url(#iconHighlight)"/>
+  <g transform="translate(154, 176) scale(7.16)" fill="none" stroke="#FFFFFF" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="26" y1="22" x2="26" y2="72"/>
+    <line x1="63" y1="22" x2="63" y2="75"/>
+    <polyline points="22,18 44.5,56 67,18"/>
+    <polyline points="48,60 63,76 78,60"/>
+  </g>
+</svg>
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 180" role="img" aria-label="Markdown Converter">
+  <title>Markdown Converter</title>
+  <defs>
+    <linearGradient id="lg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#FB923C"/>
+      <stop offset="100%" stop-color="#C2410C"/>
+    </linearGradient>
+  </defs>
+  <!-- Mark, scaled and translated to fit left side -->
+  <g transform="translate(20, 20) scale(1.4)">
+    <g fill="none" stroke="url(#lg)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+      <line x1="26" y1="22" x2="26" y2="72"/>
+      <line x1="63" y1="22" x2="63" y2="75"/>
+      <polyline points="22,18 44.5,56 67,18"/>
+      <polyline points="48,60 63,76 78,60"/>
+    </g>
+  </g>
+  <!-- Wordmark -->
+  <g font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif">
+    <text x="180" y="100" font-size="58" font-weight="700" fill="#0F172A" letter-spacing="-1.5">Markdown</text>
+    <text x="424" y="100" font-size="58" font-weight="400" fill="#475569" letter-spacing="-1.2">Converter</text>
+    <text x="182" y="138" font-family="'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace" font-size="16" font-weight="500" fill="#94A3B8" letter-spacing="4.5">PANDOC &#215; ELECTRON</text>
+  </g>
+</svg>
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Markdown Converter mark (monochrome)">
+  <title>Markdown Converter (monochrome)</title>
+  <g fill="none" stroke="currentColor" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="26" y1="22" x2="26" y2="72"/>
+    <line x1="63" y1="22" x2="63" y2="75"/>
+    <polyline points="22,18 44.5,56 67,18"/>
+    <polyline points="48,60 63,76 78,60"/>
+  </g>
+</svg>
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Markdown Converter mark">
+  <title>Markdown Converter</title>
+  <defs>
+    <linearGradient id="mcg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#FB923C"/>
+      <stop offset="100%" stop-color="#C2410C"/>
+    </linearGradient>
+  </defs>
+  <g fill="none" stroke="url(#mcg)" stroke-width="9" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="26" y1="22" x2="26" y2="72"/>
+    <line x1="63" y1="22" x2="63" y2="75"/>
+    <polyline points="22,18 44.5,56 67,18"/>
+    <polyline points="48,60 63,76 78,60"/>
+  </g>
+</svg>
@@ -1,12 +1,12 @@
 {
  "name": "markdown-converter",
-  "version": "4.7.0",
+  "version": "4.7.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "markdown-converter",
-      "version": "4.7.0",
+      "version": "4.7.1",
      "license": "MIT",
      "dependencies": {
        "@cantoo/pdf-lib": "^2.9.1",
@@ -1,6 +1,6 @@
 {
  "name": "markdown-converter",
-  "version": "4.7.0",
+  "version": "4.7.1",
  "description": "Professional Markdown editor and universal file converter with PDF editing, batch processing, and syntax highlighting",
  "main": "src/main.js",
  "scripts": {
@@ -19,6 +19,7 @@ const crypto = require('crypto');
 const { execSync } = require('child_process');

 const PANDOC_VERSION = '3.9.0.2';
+const FIRACODE_VERSION = '6.2';

 /**
 * SHA-256 of each downloaded artifact, keyed "<platform>:<file>" or
@@ -31,8 +32,9 @@ const KNOWN_SHA256 = {
  // Fill these from a trusted machine after the first download of each
  // platform (the script prints the computed hash):
  // 'darwin:pandoc': '…',
-  'fonts:FiraCode-Regular.ttf': '3c79d234a9161c790410ebb2a80de7efb7c15f581062c130e0fa78503ccdd0da',
-  'fonts:FiraCode-Bold.ttf': '975f26779fac1029c2cbdac1e9fac7e9ddeec05e064675e4aac63bffa121742f',
+  // Fira Code 6.2 (immutable GitHub release asset)
+  'fonts:FiraCode-Regular.ttf': '5992ab9640e2df491b2f609467b1de60e8bc39b2c28db184342a0592d98f6117',
+  'fonts:FiraCode-Bold.ttf': '41f6554e845e2f5b70adad3950122334b866aac436793b7742ade600067701be',
  'fonts:FiraCode-LICENSE.txt': '1d41e10031ab125302780a05ec4c91d218e47db0c7e37cf315cce5e608cdc25c',
 };

@@ -41,6 +43,20 @@ function sha256File(filePath) {
  return crypto.createHash('sha256').update(fs.readFileSync(filePath)).digest('hex');
 }

+/** Recursively find an executable file by name inside a directory. */
+function findBinary(dir, name) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      const hit = findBinary(full, name);
+      if (hit) return hit;
+    } else if (entry.name === name || entry.name === name + '.exe') {
+      return full;
+    }
+  }
+  return null;
+}
+
 /**
 * Verify a file against KNOWN_SHA256. Throws on mismatch; prints the computed
 * hash with a pin-me hint when no hash is recorded yet (soft-fail so new
@@ -104,8 +120,11 @@ const PANDOC_CONFIG = {
      const tmpDir = path.join(os.tmpdir(), `pandoc-${Date.now()}`);
      fs.mkdirSync(tmpDir, { recursive: true });
      execSync(`unzip -o "${archivePath}" -d "${tmpDir}"`);
-      const src = path.join(tmpDir, `pandoc-${PANDOC_VERSION}`, 'bin', 'pandoc');
-      fs.copyFileSync(src, path.join(destDir, 'pandoc'));
+      // macOS zips don't carry a stable layout (bin/ subdir vs. flat) —
+      // locate the binary in the extracted tree instead of guessing a path
+      const found = findBinary(tmpDir, 'pandoc');
+      if (!found) throw new Error('pandoc binary not found inside the macOS archive');
+      fs.copyFileSync(found, path.join(destDir, 'pandoc'));
      fs.chmodSync(path.join(destDir, 'pandoc'), 0o755);
      fs.rmSync(tmpDir, { recursive: true, force: true });
    },
@@ -161,25 +180,34 @@ function download(url, destPath) {
 async function downloadFiraCode() {
  const destDir = path.join(__dirname, '..', 'assets', 'fonts');
  fs.mkdirSync(destDir, { recursive: true });
+  const wanted = ['FiraCode-Regular.ttf', 'FiraCode-Bold.ttf', 'FiraCode-LICENSE.txt'];

-  const targets = [
-    { url: 'https://github.com/tonsky/FiraCode/raw/master/distr/ttf/FiraCode-Regular.ttf', out: 'FiraCode-Regular.ttf' },
-    { url: 'https://github.com/tonsky/FiraCode/raw/master/distr/ttf/FiraCode-Bold.ttf',    out: 'FiraCode-Bold.ttf' },
-    { url: 'https://raw.githubusercontent.com/tonsky/FiraCode/master/LICENSE',            out: 'FiraCode-LICENSE.txt' },
-  ];
-
-  for (const t of targets) {
-    const destFile = path.join(destDir, t.out);
-    if (fs.existsSync(destFile)) {
-      // Re-verify cached artifacts so a tampered cache never ships
-      verifyArtifact(`fonts:${t.out}`, destFile);
-      console.log(`[download-tools] ${t.out} already present — skipping.`);
-      continue;
-    }
-    console.log(`[download-tools] Downloading ${t.out}...`);
-    await download(t.url, destFile);
-    verifyArtifact(`fonts:${t.out}`, destFile);
+  // All three present (and hash-verified) → nothing to do
+  const missing = wanted.filter((f) => !fs.existsSync(path.join(destDir, f)));
+  if (missing.length === 0) {
+    for (const f of wanted) verifyArtifact(`fonts:${f}`, path.join(destDir, f));
+    console.log('[download-tools] Fira Code already present — skipping.');
+    return;
  }
+
+  // Immutable release asset (raw/master URLs move and break hash pinning)
+  const zipUrl = `https://github.com/tonsky/FiraCode/releases/download/${FIRACODE_VERSION}/Fira_Code_v${FIRACODE_VERSION}.zip`;
+  const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), `firacode-${Date.now()}`));
+  const tmpZip = path.join(tmpDir, 'firacode.zip');
+  console.log(`[download-tools] Downloading Fira Code ${FIRACODE_VERSION}...`);
+  await download(zipUrl, tmpZip);
+  execSync(`unzip -o -j "${tmpZip}" "ttf/FiraCode-Regular.ttf" "ttf/FiraCode-Bold.ttf" -d "${tmpDir}"`);
+
+  fs.copyFileSync(path.join(tmpDir, 'FiraCode-Regular.ttf'), path.join(destDir, 'FiraCode-Regular.ttf'));
+  fs.copyFileSync(path.join(tmpDir, 'FiraCode-Bold.ttf'), path.join(destDir, 'FiraCode-Bold.ttf'));
+  // License text from the immutable tag
+  await download(
+    `https://raw.githubusercontent.com/tonsky/FiraCode/${FIRACODE_VERSION}/LICENSE`,
+    path.join(destDir, 'FiraCode-LICENSE.txt')
+  );
+  fs.rmSync(tmpDir, { recursive: true, force: true });
+
+  for (const f of wanted) verifyArtifact(`fonts:${f}`, path.join(destDir, f));
 }

 async function downloadPandoc() {
@@ -1,78 +1,72 @@
 /**
 * Icon Generator for MarkdownConverter
- * Generates all required icon sizes from NewIcon.jpg
+ *
+ * Rasterizes the brand kit's vector app icon (the "M↓" mark,
+ * assets/markdown-converter-assets/app-icon.svg) into every size the app and
+ * its packaging need:
+ *
+ *   assets/icon.png      512×512   — app icon (electron-builder converts to
+ *                                    .ico/.icns for Windows/macOS from this)
+ *   assets/icon@2x.png  1024×1024  — hi-dpi variant
+ *   assets/favicon.png    32×32    — in-app/browser favicon
+ *   assets/tray-icon.png  24×24    — system tray
+ *   assets/icons/*      16…1024    — multi-size set (ico/icns input)
+ *
+ * assets/logo.png is NOT touched — that is the ConcreteInfo logo used in the
+ * app header and About dialog.
 */

 const sharp = require('sharp');
 const fs = require('fs');
 const path = require('path');

-// Source image
-const sourceImage = path.join(__dirname, '..', 'assets', 'docico1.png');
+// Brand kit sources (vector, primary)
+const brandDir = path.join(__dirname, '..', 'assets', 'markdown-converter-assets');
+const sourceSvg = path.join(brandDir, 'app-icon.svg');
 const assetsDir = path.join(__dirname, '..', 'assets');

 // Icon sizes needed for different platforms
 const iconSizes = [16, 24, 32, 48, 64, 128, 256, 512, 1024];

-async function generateIcons() {
-  console.log('Generating icons from docico1.png...');
+/**
+ * Rasterize the SVG source at a given size. `density` scales the vector so
+ * small renders stay crisp; the explicit resize guarantees exact dimensions.
+ */
+async function renderIcon(size, outPath) {
+  await sharp(sourceSvg, { density: Math.max(72, Math.round((size / 512) * 384)) })
+    .resize(size, size, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
+    .png()
+    .toFile(outPath);
+  console.log(`Generated ${path.relative(process.cwd(), outPath)} (${size}x${size})`);
+}

-  // Check if source exists
-  if (!fs.existsSync(sourceImage)) {
-    console.error('Source image not found:', sourceImage);
+async function generateIcons() {
+  console.log('Generating icons from the brand kit (app-icon.svg)...');
+
+  if (!fs.existsSync(sourceSvg)) {
+    console.error('Brand source not found:', sourceSvg);
    process.exit(1);
  }

  try {
-    // Generate main icon.png (512x512)
-    await sharp(sourceImage)
-      .resize(512, 512, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
-      .png()
-      .toFile(path.join(assetsDir, 'icon.png'));
-    console.log('Generated icon.png (512x512)');
+    // Main app icons consumed by main.js windows and electron-builder
+    await renderIcon(512, path.join(assetsDir, 'icon.png'));
+    await renderIcon(1024, path.join(assetsDir, 'icon@2x.png'));

-    // Generate icon@2x.png (1024x1024)
-    await sharp(sourceImage)
-      .resize(1024, 1024, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
-      .png()
-      .toFile(path.join(assetsDir, 'icon@2x.png'));
-    console.log('Generated icon@2x.png (1024x1024)');
+    // Favicon + tray
+    await renderIcon(32, path.join(assetsDir, 'favicon.png'));
+    await renderIcon(24, path.join(assetsDir, 'tray-icon.png'));

-    // Create icons directory for multi-size icons
+    // Multi-size set for packaging converters (ico/icns)
    const iconsDir = path.join(assetsDir, 'icons');
-    if (!fs.existsSync(iconsDir)) {
-      fs.mkdirSync(iconsDir, { recursive: true });
-    }
-
-    // Generate all sizes
+    fs.mkdirSync(iconsDir, { recursive: true });
    for (const size of iconSizes) {
-      await sharp(sourceImage)
-        .resize(size, size, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
-        .png()
-        .toFile(path.join(iconsDir, `${size}x${size}.png`));
-      console.log(`Generated icons/${size}x${size}.png`);
+      await renderIcon(size, path.join(iconsDir, `${size}x${size}.png`));
    }

-    // Generate favicon
-    await sharp(sourceImage)
-      .resize(32, 32, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
-      .png()
-      .toFile(path.join(assetsDir, 'favicon.png'));
-    console.log('Generated favicon.png (32x32)');
-
-    // Generate tray icon (smaller, for system tray)
-    await sharp(sourceImage)
-      .resize(24, 24, { fit: 'contain', background: { r: 255, g: 255, b: 255, alpha: 0 } })
-      .png()
-      .toFile(path.join(assetsDir, 'tray-icon.png'));
-    console.log('Generated tray-icon.png (24x24)');
-
    console.log('\nIcon generation complete!');
-    console.log('\nFor Windows .ico file, use an online converter or:');
-    console.log('  magick convert assets/icons/*.png assets/icon.ico');
-    console.log('\nFor macOS .icns file, use:');
-    console.log('  iconutil -c icns assets/icon.iconset -o assets/icon.icns');
-
+    console.log('Windows .ico and macOS .icns are generated automatically by');
+    console.log('electron-builder from assets/icon.png during packaging.');
  } catch (error) {
    console.error('Error generating icons:', error);
    process.exit(1);
@@ -10,6 +10,19 @@
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MarkdownConverter</title>
+    <!-- Brand favicons (M↓ mark) -->
+    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon.png" />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="../assets/markdown-converter-assets/favicons/favicon-16x16.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="../assets/markdown-converter-assets/favicons/apple-touch-icon.png"
+    />
    <!-- Design tokens - loaded first for CSS variable availability -->
    <link rel="stylesheet" href="styles/tokens.css" />
    <link rel="stylesheet" href="styles/modal.css" />
@@ -119,3 +119,9 @@
  color: var(--gray-500);
  cursor: pointer;
 }
+
+/* Brand mark in the welcome hero (M↓ mark from the brand kit) */
+.welcome-mark {
+  display: block;
+  margin: 0 auto 10px;
+}
@@ -11,6 +11,7 @@ function createWelcomeContent(recentFiles = [], appVersion = '') {
  return `
    <div class="welcome-container">
        <div class="welcome-hero">
+            <img src="../assets/markdown-converter-assets/mark.svg" alt="" width="56" height="56" class="welcome-mark" />
            <h1 class="welcome-title">MarkdownConverter</h1>
            <p class="welcome-version">${appVersion ? `Version ${appVersion}` : ''}</p>
            <p class="welcome-subtitle">Professional Markdown Editor & Universal Document Converter</p>