Placeholder Image Generator

Generate sized placeholder images — pick width, height, background, foreground, and label. Copy as SVG/PNG or a static URL.

1200×630
SVG markup
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630">
  <rect width="1200" height="630" fill="#1d2671"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-weight="600" font-size="76" fill="#ffffff">1200×630</text>
</svg>
data: URL
data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%20630%22%20width%3D%221200%22%20height%3D%22630%22%3E%0A%20%20%3Crect%20width%3D%221200%22%20height%3D%22630%22%20fill%3D%22%231d2671%22%2F%3E%0A%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20font-family%3D%22system-ui%2C%20-apple-system%2C%20sans-serif%22%20font-weight%3D%22600%22%20font-size%3D%2276%22%20fill%3D%22%23ffffff%22%3E1200%C3%97630%3C%2Ftext%3E%0A%3C%2Fsvg%3E
Width
Height
Background
Foreground (empty = auto)
Label (defaults to "1200×630")

01 — Overview

How it works

A tiny placeholder image generator for mockups, design systems, and demo content. Pick exact dimensions, customize colors and label text, and grab the result as a copy-pasteable SVG, a downloadable PNG, or a copyable data: URL you can drop into any <img> tag.

02 — Use cases

When to use it

  1. 01

    Fill a hero or grid with sized placeholder images during design

  2. 02

    Get a quick 1200×630 placeholder for OG image slots

  3. 03

    Build a design system showcase with consistent placeholder shapes

  4. 04

    Generate a labelled placeholder to call out 'avatar', 'cover', 'thumb'

03 — Examples

Real input, real output

1200×630, dark bg, label 'OG image'

ex 01

Downloadable SVG / PNG at exact dimensions

Common OG placeholder for blog post mockups.

120×120, accent bg, label '120²'

ex 02

Square thumbnail placeholder

Use in a card grid before real assets exist.

04 — FAQ

Frequently asked

CDNs like placeholder.com used to break or get blocked. Local generation is offline, free, and produces SVG (sharp at any size) or PNG with no network dependency.

05 — More

Tools that pair well

Avatar Generator

Generate deterministic avatars from a seed string. Initials, geometric, or identicon styles. SVG output, downloadable.

Identity/avatar

QR Code Generator

Turn text, URLs, WiFi credentials, or vCard info into a QR code. Download as SVG or PNG, customize color and error correction.

Media/qr-code

Favicon Generator

Generate a complete favicon bundle from text or an uploaded image — every size, manifest, and the HTML snippet.

Media/favicon