Generate a podcast thumbnail for every episode (automatically)

A podcast that ships weekly needs a fresh cover every week. Most shows ship the same cover for forty episodes because re-doing it in Figma is enough friction to skip. Per-episode covers — with the title, the number, the guest — measurably improve play-through on Spotify and Apple. The fix is templating.

Here is the version where the cover is HTML and the episode metadata is a CSV row.

What a podcast cover needs

Apple Podcasts requires 3000×3000 minimum, RGB, JPG or PNG. The visual hierarchy that works for thumbnails and lock-screen art:

1. Episode number — the largest element. Reads from 100px away on a phone.
2. Episode title — the second-largest. Two lines max.
3. Guest name — small, on the bottom.
4. Show name — top, identifiable but quiet.

The trap most podcasts fall into is making the show name biggest. The listener already knows the show name; they tapped on the show to get here. The episode-specific information is what they need next.

The template

A single HTML document with the four variable knobs:

Per-episode rendering

The CSV that drives it:

num,title,guest,date
042,The Art of Determinism,Kira Tanaka,2026-05-12
043,Why HTML Won,Marcus Okafor,2026-05-19
044,Render Once Run Forever,Ren Park,2026-05-26

The render loop, in pseudo-code:

for (const row of episodes) {
  const html = template
    .replace(/\{\{\$NUM\}\}/g, row.num)
    .replace(/\{\{\$TITLE\}\}/g, row.title)
    .replace(/\{\{\$GUEST\}\}/g, row.guest)
    .replace(/\{\{\$DATE\}\}/g, row.date);
  await renderHtmlToImage(html, { width: 3000, height: 3000, format: 'jpg' });
}

Same shape as the CSV personalized video pattern, just rendering to an image instead of an MP4. The HyperFrames render API supports both.

Multi-platform variants

Most podcast platforms accept the 3000×3000 master. A few want different aspects:

• Spotify Canvas — 1080×1920 vertical animated cover (yes, podcasts can have animated covers now). Render the same template at 9:16 with the animation on.
• YouTube — 1280×720 thumbnail for the video version. Same template at 16:9.
• Twitter share card — 1200×628.

If you build the template with @container queries (the same trick from social cards in every ratio), all four come from one source.

Things that look obvious in hindsight

After shipping per-episode covers for two seasons of one of our shows, things we wish we had done earlier:

1. Lock the type scale. Episode titles vary wildly in length. Auto-fit the title to a fixed bounding box with font-size: clamp(). Otherwise the layout breaks on long titles.
2. Reserve space for the guest. Some episodes have no guest. Leave the slot in the layout; render empty. Otherwise the title creeps down on no-guest episodes and the visual rhythm breaks.
3. Version the template. Episode 42's cover should render correctly forever. If you change the template, version it; old episodes keep rendering from the old template hash.

The last one is the determinism lesson generalized to assets. See the deterministic rendering manifesto for why this matters in CI.

Wiring it into the publishing flow

If you publish via Buzzsprout, Transistor, Castos, or any podcast host: most have an API. The flow is:

1. Episode metadata gets written to a CSV (or a Notion DB, or your CMS).
2. CI renders the cover from the template + metadata.
3. Cover uploads to the host alongside the audio.
4. Done.

For shows that ship every week, this is fifteen minutes of setup that pays back forever. The cover stops being a craft step; it becomes a build step.

Why episode-specific covers matter

The play-through data, from the shows we have measured: episodes with a per-episode cover get 12-18% more plays than episodes with the show-default cover. The hypothesis is intuitive: a listener scrolling their library sees the episode rather than the show; the cover acts as a thumbnail.

The cost of per-episode covers used to be a designer's afternoon. With a template, the cost is zero per episode after the first. The math is unambiguous.

The marketing use cases page has the longer story. The HyperFrames render API is the underlying tool. If you ship a podcast, this is one of the highest-leverage things you can template.