404 Page Image Placeholders That Match Your Brand
Replace generic broken-image icons on 404 pages with branded 404 page image placeholders sized for your layout and colored to match your design system.
A 404 page is a failure state, but it does not have to look like one. How your 404 page handles any images it displays—header illustrations, example content, product callouts—determines whether users feel like they landed in a professional product or a broken one. Branded 404 page image placeholders prevent the secondary failure of broken images on an already-failed page.
The fallback.pics API lets you generate dimensioned, brand-colored image placeholders from a URL with no upload required. For 404 pages specifically, this means your illustration slot, your example product slot, and any decorative image can render with your brand palette even if no real asset exists.
The compounding failure problem
A broken image on a 404 page compounds the error experience
Users who reach a 404 page are already in a recovery mode. The page exists to redirect them somewhere useful. If the 404 page itself has broken images—an illustration that fails to load, a featured product with no photo, a decorative background that returns a 404 of its own—the user's trust in the product drops further.
This happens more often than expected. 404 page illustrations are often referenced via static asset paths that break during site restructuring. Decorative images in 404 templates get overlooked when CDN configurations change. Recommended product callouts on 404 pages point to image URLs from a CMS that may return null.
Illustration slot
Use a branded placeholder for the main 404 illustration
If you do not have a custom 404 illustration yet—or if the illustration asset is at risk of being unavailable (referenced from an external CDN, uploaded to a CMS that could be empty)—use a fallback.pics URL as the src or as an onerror fallback.
A purple-on-white or dark-on-brand-color placeholder with text '404' or 'Page Not Found' reads as intentional and matches the brand palette rather than the browser's default broken image icon.
<!-- Branded 404 illustration placeholder -->
<img
src="/assets/404-illustration.svg"
width="480"
height="360"
alt="Page not found illustration"
onerror="this.onerror=null;this.src='https://fallback.pics/api/v1/480x360/7C3AED/FFFFFF?text=404'"
/>
<!-- Or use fallback.pics directly while illustration is in progress -->
<img
src="https://fallback.pics/api/v1/480x360/7C3AED/FFFFFF?text=Page+Not+Found"
width="480"
height="360"
alt="Page not found"
/>Product callouts
Recommended products on 404 pages need fallback images
A common pattern on ecommerce 404 pages is a 'You might like' or 'Popular products' section that shows a grid of product recommendations. These product images come from the same catalog that has all the normal image failure modes: null fields, broken CDN URLs, recently deleted photos.
Apply the same onerror fallback pattern used in the main catalog. The 404 page product grid should be no more fragile than any other product grid on the site.
<!-- Product callout on 404 page -->
{products.map(product => (
<img
key={product.id}
src={product.imageUrl}
width={200}
height={200}
alt={product.name}
onError={(e) => {
e.currentTarget.onerror = null;
e.currentTarget.src =
`https://fallback.pics/api/v1/square/200/7C3AED/FFFFFF?text=${encodeURIComponent(product.name.slice(0, 14))}`;
}}
/>
))}Astro / Next.js
Implement 404 page image fallbacks in Astro and Next.js
In Astro, the 404 page lives at src/pages/404.astro. Images in this file are static and should either be local assets or fallback.pics URLs. Do not reference CMS-hosted images in the 404 page without a runtime onerror fallback.
In Next.js, the 404 page is pages/404.tsx or app/not-found.tsx. Use an img element with onerror rather than the next/image Image component for the main illustration slot—Image requires a configured domain whitelist, and fallback.pics may not be in it.
// app/not-found.tsx (Next.js App Router)
export default function NotFound() {
return (
<div className="flex flex-col items-center py-24">
<img
src="/images/404.svg"
width={480}
height={360}
alt="Page not found"
onError={(e) => {
(e.target as HTMLImageElement).onerror = null;
(e.target as HTMLImageElement).src =
'https://fallback.pics/api/v1/480x360/7C3AED/FFFFFF?text=404';
}}
/>
<h1 className="mt-8 text-2xl font-bold">Page not found</h1>
<a href="/" className="mt-4 text-purple-600 underline">Go home</a>
</div>
);
}Brand matching
Generate 404 placeholder colors from your design tokens
If your brand uses a specific primary color, pass the hex value directly in the fallback.pics URL. This produces placeholders that match your design system without any design work.
For dark-mode 404 pages, use a lighter foreground on a darker background. For light-mode pages, a vibrant brand color background with white text reads cleanly and professionally.
// Generate 404 placeholder URL from your brand token
const BRAND_PRIMARY = '7C3AED'; // your brand primary
export function get404ImageUrl(w = 480, h = 360): string {
return `https://fallback.pics/api/v1/${w}x${h}/${BRAND_PRIMARY}/FFFFFF?text=404`;
}Key takeaways
What to standardize before shipping
- A broken image on a 404 page compounds user distrust—ensure every image slot on the error page has a reliable fallback.
- Use onerror on the 404 illustration src to catch CDN failures or missing asset paths without blocking the page layout.
- Product recommendation grids on 404 pages need the same fallback treatment as catalog grids.
- In Next.js App Router, use a plain img element for 404 illustrations to avoid next/image domain configuration requirements.
- Derive 404 placeholder colors from your brand tokens for a consistent, professional error page appearance.
Production fallback layer
Use fallback.pics anywhere an image URL is accepted.
Start with one deterministic URL and standardize fallback behavior across your design system.
Continue reading
Related articles
Empty State Images vs Placeholder Fallbacks in SaaS
Understand when to use empty state images versus placeholder fallbacks in SaaS dashboards, and how to build both patterns with consistent URL-based images.
Onboarding Screenshot Placeholders for Product Tours
Use onboarding screenshot placeholder images in product tours and feature walkthroughs to keep UI polished before real screenshots are captured or approved.
From Broken Image Icon to Branded Fallback: A Production Rollout Checklist
Audit broken image states, choose branded fallback URLs, update shared components, test image failures, and monitor rollout quality.