Motionity/scripts/make-favicon.cjs

#!/usr/bin/env node
// Renders src/favicon.ico (32x32) from the same geometry as
// src/assets/logo.svg: three coloured rounded bars on the app's dark background.
//
// Hand-rolled so packaging needs no image toolchain (no ImageMagick, no sharp).

const { writeFileSync } = require('node:fs');
const { resolve } = require('node:path');

const SIZE = 32;
const SS = 8; // supersampling factor, for antialiased edges at small size
const BG = [0x14, 0x16, 0x29];
const BG_RADIUS = 6; // squircle-ish corner on the icon plate

// viewBox="0 0 157 183" in src/assets/logo.svg
const VIEW = { w: 157, h: 183 };
const BARS = [
  { x: 79, y: 0, w: 79, h: 47, r: 23.5, fg: [0x75, 0x4b, 0xff] },
  { x: 0, y: 68, w: 157, h: 47, r: 23.5, fg: [0x60, 0x2f, 0xff] },
  { x: 0, y: 136, w: 79, h: 47, r: 23.5, fg: [0x06, 0x93, 0xc0] },
];

function insideRoundedRect(px, py, { x, y, w, h, r }) {
  const dx = Math.max(x + r - px, 0, px - (x + w - r));
  const dy = Math.max(y + r - py, 0, py - (y + h - r));
  return dx * dx + dy * dy <= r * r;
}

// The logo occupies 62% of the plate, centred.
const scale = (SIZE * 0.62) / VIEW.h;
const offsetX = (SIZE - VIEW.w * scale) / 2;
const offsetY = (SIZE - VIEW.h * scale) / 2;

const plate = { x: 0, y: 0, w: SIZE, h: SIZE, r: BG_RADIUS };

// BGRA pixels, row-major, top-to-bottom.
const pixels = Buffer.alloc(SIZE * SIZE * 4);
for (let py = 0; py < SIZE; py++) {
  for (let px = 0; px < SIZE; px++) {
    let plateHits = 0;
    const colorSum = [0, 0, 0];
    for (let sy = 0; sy < SS; sy++) {
      for (let sx = 0; sx < SS; sx++) {
        const fx = px + (sx + 0.5) / SS;
        const fy = py + (sy + 0.5) / SS;
        if (!insideRoundedRect(fx, fy, plate)) continue;
        plateHits++;
        const lx = (fx - offsetX) / scale;
        const ly = (fy - offsetY) / scale;
        const bar = BARS.find((b) => insideRoundedRect(lx, ly, b));
        const pixel = bar ? bar.fg : BG;
        for (let c = 0; c < 3; c++) colorSum[c] += pixel[c];
      }
    }
    const total = SS * SS;
    const alpha = Math.round((plateHits / total) * 255);
    const o = (py * SIZE + px) * 4;
    const r = plateHits ? Math.round(colorSum[0] / plateHits) : 0;
    const g = plateHits ? Math.round(colorSum[1] / plateHits) : 0;
    const b = plateHits ? Math.round(colorSum[2] / plateHits) : 0;
    pixels[o] = b;
    pixels[o + 1] = g;
    pixels[o + 2] = r;
    pixels[o + 3] = alpha;
  }
}

// Pack into a single-image .ico: ICONDIR + ICONDIRENTRY + BITMAPINFOHEADER
// + 32bpp XOR data (bottom-up) + 1bpp AND mask (bottom-up, all-zero since
// the XOR data already carries a full alpha channel).
const xor = Buffer.alloc(SIZE * SIZE * 4);
for (let py = 0; py < SIZE; py++) {
  const srcRow = py * SIZE * 4;
  const dstRow = (SIZE - 1 - py) * SIZE * 4; // bottom-up
  pixels.copy(xor, dstRow, srcRow, srcRow + SIZE * 4);
}
const andMaskRowBytes = Math.ceil(SIZE / 32) * 4; // 1bpp, padded to 4 bytes
const and = Buffer.alloc(andMaskRowBytes * SIZE, 0);

const dib = Buffer.alloc(40);
dib.writeUInt32LE(40, 0); // biSize
dib.writeInt32LE(SIZE, 4); // biWidth
dib.writeInt32LE(SIZE * 2, 8); // biHeight (XOR + AND)
dib.writeUInt16LE(1, 12); // biPlanes
dib.writeUInt16LE(32, 14); // biBitCount
dib.writeUInt32LE(0, 16); // biCompression: BI_RGB

const imageData = Buffer.concat([dib, xor, and]);

const iconDir = Buffer.alloc(6);
iconDir.writeUInt16LE(0, 0); // reserved
iconDir.writeUInt16LE(1, 2); // type: icon
iconDir.writeUInt16LE(1, 4); // image count

const entry = Buffer.alloc(16);
entry[0] = SIZE; // width
entry[1] = SIZE; // height
entry[2] = 0; // color count
entry[3] = 0; // reserved
entry.writeUInt16LE(1, 4); // planes
entry.writeUInt16LE(32, 6); // bit count
entry.writeUInt32LE(imageData.length, 8); // bytes in resource
entry.writeUInt32LE(6 + 16, 12); // image offset

const ico = Buffer.concat([iconDir, entry, imageData]);

const dest = resolve(__dirname, '..', 'src', 'favicon.ico');
writeFileSync(dest, ico);
console.log(`Wrote ${dest} (${SIZE}x${SIZE}, ${Math.round(ico.length / 1024)} KB)`);