metadata-gen

metadata-gen is a command-line tool that generates OG images and a complete favicon set from what your project already has: colors, logo, title, and tagline.

No API keys, no external services. Everything renders locally, then a preview opens where you refine each option and download the result straight into your repo.

Built by Micka. Open source, MIT licensed.

Quick start

$ npx metadata-gen init $ npx metadata-gen

Two commands, under 90 seconds. Requires Node 18 or newer.

GitHub npm

What you get

OG image, layout A: title left-aligned with tagline below on a dark background

OG image, layout B: title and tagline centered

OG image, layout C: tagline promoted to a large headline, title as a small label

ICO, SVG, PNG, webmanifest

Three 1200×630 options and a full favicon set, generated by metadata-gen for itself. Pick one, refine, download.

How it works

01InitScans your project and writes metadata.config.json. You confirm what it found.
02GenerateRenders three image layouts and the favicon set, then opens a local preview.
03RefineAdjust colors, text, and logo per option. Downloads land in public/metadata/.
04ExtendDrop a layout-d.js into metadata-templates/ and it appears as a fourth option. An AGENTS.md contract ships with it, so an AI agent can write one too.

What it scans

Titlepackage.json name, README heading, folder name
Taglinepackage.json description
ColorsCSS custom properties, Tailwind v3 and v4 themes, design token JSON
Logologo.svg in root, public/, assets/, or src/assets/

Scanning is static and read-only. None of your project code is executed.

Files

public/metadata/
├── og.png                    # 1200×630
├── favicon.ico               # 16 + 32 + 48
├── favicon.svg               # light and dark mode
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon-96x96.png
├── apple-touch-icon.png      # 180×180
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest