Generate Blog Thumbnails from Text When Featured Images Are Missing

Use case

A fallback for missing blog featured images

A missing featured image can make a blog index, CMS preview, social card, or related-post module look unfinished. The thumbnail route gives teams a predictable visual fallback generated from the post title.

Unlike a generic dimensions placeholder, a thumbnail is designed like a blog card: large readable title, short category label, gradient theme, and decorative elements constrained to the right side and corners.

Basic URL

Generate a thumbnail from a title

Start with the thumbnail route and a 1200x630 size for Open Graph-friendly featured images. Add the title with the text parameter.

Use SVG for crisp in-page previews. For social crawlers, append .jpg or .webp to the dimensions segment so platforms receive a raster image.

If you use the same URL repeatedly, the generated decoration remains deterministic, so caching and previews stay consistent.

https://fallback.pics/api/v1/thumbnail/1200x630?text=How+to+Fix+Broken+Images
https://fallback.pics/api/v1/thumbnail/1200x630.jpg?text=How+to+Fix+Broken+Images

Controls

Choose style, theme, and category label

Use style to change the safe-zone background elements. Use theme for the gradient palette. Use label for the small category pill shown above the title.

Supported styles are soft, rings, lines, and pattern. Supported themes are purple, blue, green, orange, and dark.

https://fallback.pics/api/v1/thumbnail/1200x630?text=React+Image+Fallback+Patterns&style=soft&theme=blue&label=Tutorial
https://fallback.pics/api/v1/thumbnail/1200x630?text=Product+Image+Fallbacks+for+Catalogs&style=rings&theme=green&label=Ecommerce
https://fallback.pics/api/v1/thumbnail/1200x630?text=Prevent+Layout+Shift+From+Missing+Images&style=lines&theme=dark&label=Performance

Safe zone

Keep decoration away from the headline

The thumbnail design reserves the left side for label and title text. Random-looking decorative elements are generated in a separate decoration zone on the right side and far corners.

That rule is important for real blog use because titles vary in length. A decorative shape should never reduce headline readability or overlap the content that makes the thumbnail useful.

Custom colors

Use custom gradients and accents

Themes cover common cases, but custom color parameters are useful when the generated thumbnail needs to match a brand or publication section.

Use bg with two hex colors, accent for decoration color, and color for text. Hex values should be passed without the # character.

https://fallback.pics/api/v1/thumbnail/1200x630?text=Fix+Broken+Images+in+HTML&style=soft&label=Guide&bg=7C3AED,3B82F6&accent=F97316&color=FFFFFF

Implementation

Use it in a CMS or blog template

A blog template can use the uploaded featured image when one exists, then fall back to a generated thumbnail URL when the field is empty.

Keep URL text public and generic. Post titles are usually public, but avoid putting drafts with private launch names, customer data, or sensitive identifiers in image URLs.

const params = new URLSearchParams({
  text: post.title,
  label: post.category,
  style: "soft",
  theme: "purple",
});

const image = post.featuredImage ??
  `https://fallback.pics/api/v1/thumbnail/1200x630.jpg?${params}`;