git:20260420.bfb354c to git:20260922.ece18df

23 added, 67 removed. Audit A to A.

---

name: brand-asset-pipeline

- description: Turn a single mark.svg into a full brand asset pack — favicons (16/32/48/64/180), Apple/Android app icons, social covers (OG/Twitter/LinkedIn), and Steam store capsules. Reads deploy target from brand-memory to pick the right preset. Use when bootstrapping a new site, rebranding, or generating store assets.

+ description: Turn one mark.svg into a full brand asset pack (favicons 16/32/48/64/180, Apple/Android app icons, OG/Twitter/LinkedIn social covers, Steam store capsules). Reads deploy target from brand-memory to pick the preset. Use when bootstrapping a new site, rebranding, shipping to Steam, generating store assets, or updating social preview images.

---

- ## When to use

- - Bootstrapping a new site and needing every favicon, app icon, and social cover in one pass.

- - Rebranding — swap `mark.svg` and regenerate everything in seconds.

- - Shipping to Steam — the `steam` target produces all required capsule sizes.

- - Adding or updating social preview images (OG, Twitter, LinkedIn).

## Targets

- | Target | Files generated | Dimensions |

- |-------------|-----------------|------------|

- | `favicons` | `favicon-16.png`, `favicon-32.png`, `favicon-48.png`, `favicon-64.png`, `favicon-180.png` | Square icons at each size |

- | `app-icons` | `apple-touch-icon.png` (180), `android-chrome-192.png` (192), `android-chrome-512.png` (512) | Square icons |

- | `social` | `og-cover.png` (1200×630), `twitter-cover.png` (1500×500), `linkedin-cover.png` (1584×396) | Banner, mark centred at 50% of short edge |

- | `steam` | `steam-header.png` (460×215), `steam-capsule-main.png` (616×353), `steam-capsule-small.png` (231×87) | Banner |

+ - `favicons`: `favicon-16.png`, `-32`, `-48`, `-64`, `-180`

+ - `app-icons`: `apple-touch-icon.png` (180), `android-chrome-192.png`, `android-chrome-512.png`

+ - `social`: `og-cover.png` 1200x630, `twitter-cover.png` 1500x500, `linkedin-cover.png` 1584x396

+ - `steam`: `steam-header.png` 460x215, `steam-capsule-main.png` 616x353, `steam-capsule-small.png` 231x87

- All square icons use `fit: contain` with a transparent background.

- All banners composite the mark centred on `backgroundColor` (default `#110f1b`).

+ Square icons: `fit: contain`, transparent background. Banners: mark centred at 50% of short edge on `backgroundColor` (default `#110f1b`).

- ## How to run

+ ## Run

- ### API

+ No CLI entry; call the API (from a shell, via `node -e` dynamic `import()`).

```js

import { generateAssets } from './plugins/atelier/skills/brand-asset-pipeline/index.mjs';

const { files } = await generateAssets({

- markSvg: 'brand/mark.svg',

- outDir: 'public/brand',

- targets: ['favicons', 'app-icons', 'social'], // default

- backgroundColor: '#110f1b', // optional

+ markSvg: 'brand/mark.svg',

+ outDir: 'public/brand',

+ targets: ['favicons', 'app-icons', 'social'], // default

+ backgroundColor: '#110f1b', // optional

});

- console.log(`Generated ${files.length} assets`);

```

- ### CLI (one-liner)

- ```bash

- node -e "

- import('./plugins/atelier/skills/brand-asset-pipeline/index.mjs')

- .then(m => m.generateAssets({ markSvg: 'brand/mark.svg', outDir: 'public/brand' }))

- .then(r => console.log(r.files));

- "

- ```

- ## HTML wiring snippet

- Paste inside `<head>` after generating favicons and app-icons:

+ ## HTML wiring (`<head>`)

```html

-

- <link rel="icon" type="image/png" sizes="32x32" href="/brand/favicon-32.png">

- <link rel="icon" type="image/png" sizes="16x16" href="/brand/favicon-16.png">

- <link rel="apple-touch-icon" sizes="180x180" href="/brand/apple-touch-icon.png">

-

-

+ <link rel="icon" type="image/png" sizes="32x32" href="/brand/favicon-32.png">

+ <link rel="icon" type="image/png" sizes="16x16" href="/brand/favicon-16.png">

+ <link rel="apple-touch-icon" sizes="180x180" href="/brand/apple-touch-icon.png">

+

-

- <meta property="og:image" content="https://yourdomain.com/brand/og-cover.png">

- <meta property="og:image:width" content="1200">

+ <meta property="og:image" content="https://yourdomain.com/brand/og-cover.png">

+ <meta property="og:image:width" content="1200">

- <meta name="twitter:card" content="summary_large_image">

- <meta name="twitter:image" content="https://yourdomain.com/brand/twitter-cover.png">

+ <meta name="twitter:card" content="summary_large_image">

+ <meta name="twitter:image" content="https://yourdomain.com/brand/twitter-cover.png">

```

## Why no `.ico`

- This skill intentionally emits **PNG favicons only** — no `favicon.ico`. Every

- evergreen browser since 2017 handles `<link rel="icon" type="image/png">`

- natively, and PNG gives sharper rendering on HiDPI displays.

- The common Node generators for `.ico` (most notably `to-ico`) produce 24-bit

- BMP-encoded `.ico` files. Chromium, Firefox, and Safari misinterpret the

- pixel layout on some of those BMPs and render the favicon as vertical RGB

- stripes instead of the mark. It looks fine locally in the OS preview but

- broken in the browser tab — a pattern repeatedly observed in 2026 goneidle

- builds before the `.ico` was removed entirely.

- If you must support IE / early Edge (which you do not, in 2026): build the

- `.ico` manually from 16/32/48 PNGs using `png2icojs` or ImageMagick

- `convert png:… ico:…`, and verify the result in a real browser tab — not the

- OS file preview.

+ PNG favicons only, never `favicon.ico`. Node `.ico` generators (notably `to-ico`) emit 24-bit BMP-encoded `.ico` files that Chromium, Firefox, and Safari can render as vertical RGB stripes in the tab while the OS preview looks fine (seen repeatedly in 2026 goneidle builds until `.ico` was removed). Every evergreen browser since 2017 supports PNG icons, sharper on HiDPI.

- Safe default: ship only PNGs; drop `<link rel="icon" href="/favicon.ico">`

- from the `<head>`.

+ Only if IE/early Edge support is truly required (it isn't in 2026): build `.ico` by hand from 16/32/48 PNGs with `png2icojs` or ImageMagick `convert png:… ico:…`, and verify in a real browser tab, not the OS file preview.