# 404 page examples
## Short answer
These 27 404 page examples show different ways to explain a missing page and help someone continue: familiar navigation, useful search, task-specific links and, sometimes, a brand-specific joke. Borrow the recovery idea, not just the artwork. A good starting point is a calm “Page not found” heading, one short explanation and an obvious next step.
Use the screenshots for inspiration, then adapt the page to your visitors’ goals. For implementation, see [how to make a custom 404 page](/guides/custom-404-page/).
## What a 404 page needs to explain
Someone followed a link or entered an address, but the requested page is missing. It may have moved, been removed or never existed at that address. That does not mean the visitor did something wrong.
“404” alone leaves the explanation to the reader. Say “Page not found” and offer a way forward. The [GOV.UK page-not-found pattern](https://design-system.service.gov.uk/patterns/page-not-found-pages/) recommends plain language without technical jargon, blame or an “Oops” heading. Its no-breadcrumb rule belongs to that specific pattern, not every website.
## A practical design checklist
- **Name the problem plainly.** Use a descriptive heading and a short, non-blaming explanation. Mention a redesign or moved content only when that context is actually relevant.
- **Keep the site recognizable.** Retain useful branding and navigation so the page feels like part of the same website. The [U.S. Web Design System’s 404 guidance](https://designsystem.digital.gov/templates/404-page/) recommends consistent layout, empathy and actionable next steps; it discourages whimsical treatment for its government-service context.
- **Offer a route that matches the task.** A home link is a fallback, not always the best destination. Add relevant sections, search or a help/contact route where they serve real visitor needs. Label destinations clearly rather than using “Click here.”
- **Make recovery usable without the decoration.** Keep the explanation and actions as real text and controls, not just text embedded in an illustration. Do not require a game, animation or a joke to understand what happened.
- **Check accessibility in the actual page.** Review the browser title, headings, link purpose, keyboard operation, visible focus, contrast, small-screen reflow and any motion against the relevant [WCAG 2.2 requirements](https://www.w3.org/TR/WCAG22/). A screenshot cannot certify any of these.
The descriptions below are visual observations reviewed on 2026-10-11, not measured usability, accessibility, performance or gameplay results. The examples are inspiration, not endorsements.
Creative and funny 404 page examples
“View example” opens a missing-page address on the original site. Sites can change; the linked page may no longer match the screenshot.
Brands
These brands use familiar characters, product imagery and playful copy, with recovery options ranging from one home button to full site navigation.
LEGO
Creative · Playful · Functional
Brand humor softens the interruption; familiar navigation keeps a way forward.
- A literal explanation follows the brick joke.
- A prominent homepage button offers a clear next step.
- Shop navigation and a search control remain in the header.
- Takeaway: Pair a brand-specific joke with a literal explanation and a clear next step.
View example.
Mailchimp
Functional · Playful
Useful destinations precede the decorative joke.
- Marketing-resource links appear before the illustration.
- A yellow home button sits close to the explanation.
- Header search offers another visible route.
- Takeaway: Put useful recovery links before decorative humor.
View example.
Airbnb
Functional · Playful
A friendly illustration accompanies several clearly named recovery paths.
- The missing-page explanation sits above seven recovery links.
- Home, Search and Help offer different ways forward.
- Traveling and Hosting name distinct visitor tasks.
- Takeaway: Pair a friendly illustration with clearly named destinations for different visitor needs.
View example.
Marvel
Creative · Playful · Functional
A comic-book joke surrounds practical recovery instructions.
- The artwork makes the error recognizable as Marvel.
- Advice names the address, previous page and site search.
- Question/opportunity: Could someone scanning only the mock accusation miss the reassurance?
- Takeaway: Let the brand illustration carry the joke while the recovery instructions remain literal.
View example.
Disney
Functional · Creative · Playful
A familiar character introduces search rather than just decorating the error.
- The copy reassures visitors that they did not break the internet.
- A central search field supplies a visible next step.
- Header navigation, Help and Contact Us remain available.
- Takeaway: Let a brand character introduce a useful recovery action rather than merely decorate the error.
View example.
20th Century Studios
Creative · Playful · Functional
Catalog imagery gives the missing-page message a relevant theme.
- Young Frankenstein imagery matches the playful error wording.
- Home, Movies and search remain in the header.
- A Recommended Movies section begins below the hero.
- Takeaway: Use catalog imagery to give an error message a relevant, recognizable theme.
View example.
Netflix
Creative · Functional
A cinematic lost-world metaphor gives one homepage action the entire stage.
- The cinematic scene echoes the lost-your-way message.
- Netflix Home is the clear primary action.
- Question/opportunity: Only a homepage route is visible; search could offer another way forward.
- Takeaway: Keep a memorable visual subordinate to an unmistakable recovery action.
View example.
Pixar
Creative · Playful · Functional
Character-world language adds personality around a literal explanation.
- A direct missing-page statement accompanies the character.
- Back to Headquarters provides a visible recovery link.
- Films, Technology and Careers remain in the header.
- Takeaway: Keep the explanation literal while using brand-world language for a secondary flourish.
View example.
IMDb
Functional · Playful
A small catalog reference adds personality without dominating recovery.
- A plainly labelled homepage link appears above the quote.
- The linked Lost credit extends the television-themed joke.
- Takeaway: A small catalog reference can add personality without overwhelming a direct recovery link.
View example.
Wendy's
Creative · Playful · Functional
Arcade imagery sits alongside ordinary customer navigation.
- Pixel-art food connects the game theme to the brand.
- Menu, restaurant finder and search remain visible.
- Pickup and delivery links keep customer tasks available.
- Takeaway: Keep ordinary customer navigation available alongside a playful diversion.
View example.
9GAG
Creative · Playful
A visual nothing-here joke makes the error theme unmistakable.
- The character and hedge reinforce the missing-page message.
- Question/opportunity: A Download app button is visible; a direct website recovery route could help visitors continue.
- Takeaway: Motion can reinforce the error metaphor, but visitors still benefit from a direct route back to website content.
View example.
Spotify
Creative · Playful · Functional
A music metaphor accompanies explicit product and support routes.
- The synthesizer illustration connects the page to the product.
- Underlined Web Player and Support links sit in the explanation.
- Download and Log in remain in the header.
- Takeaway: Use a product-specific metaphor without losing explicit next steps.
View example.
Studios, portfolios and small businesses
These studios, portfolios and businesses explore decision trees, stories, arcade themes and experimental compositions.
Orange Coat
Creative · Playful
Recovery advice becomes the page’s central visual idea.
- A yes/no flowchart organizes possible next steps.
- Home, Fun and Work remain available in navigation.
- Question/opportunity: The chart mentions a search form; making that control easy to locate would support the advice.
- Takeaway: A decision-tree layout can make recovery advice distinctive rather than decorative.
View example.
Business Casual Copywriting
Creative · Playful
The error concept demonstrates the writer’s craft.
- A zombie and fill-in-the-blank fields establish a story premise.
- Background, process, clients and work remain in navigation.
- Hire Me gives a direct business destination.
- Takeaway: Let the error concept demonstrate your craft while retaining normal business navigation.
View example.
Dribbble
Creative · Playful · Functional
Real portfolio content becomes the error artwork.
- Design thumbnails form the 404 numerals.
- Design/designer search offers a discovery route.
- A linked color value and Contact us appear below.
- Takeaway: Use real site content as the error artwork and offer a route back into discovery.
View example.
Ready to Go Survival
Functional · Creative · Playful
Themed choices remain understandable through explicit labels.
- Red and blue pills connect the artwork to the two choices.
- Get Prepared and Home Page name their destinations.
- Search, blog, gear deals and consulting remain available.
- Takeaway: Make themed choices understandable through destination labels, not color or cultural references alone.
View example.
Nothin
Creative · Playful
An experimental composition retains a plainly labelled exit.
- Metallic objects and scattered lettering create a distinctive scene.
- A Homepage button anchors the composition.
- Question/opportunity: Would a single readable missing-page heading make the scattered message easier to scan?
- Takeaway: An experimental error composition still needs a stable, plainly labelled exit.
View example.
Awwwards
Functional · Creative
Distinctive artwork accompanies audience-specific resources.
- Foreground copy names the error.
- Home, award-winning websites, Magazine and Directory offer concrete destinations.
- Question/opportunity: Text crosses a busy background; check contrast in the actual page.
- Takeaway: Pair distinctive artwork with recovery destinations relevant to the site's audience.
View example.
Kualo
Creative · Playful
An arcade-themed diversion includes a visible navigation escape.
- Alien sprites and score counters establish the arcade theme.
- An underlined link offers to return to the previous page.
- Question/opportunity: A reliable site destination could also help someone arriving directly.
- Takeaway: Keep an immediate navigation escape beside any game-themed diversion.
View example.
Maximilian Kaspar
Functional · Creative
A restrained grid preserves site identity and navigation.
- The minimal page retains the site’s top navigation.
- Photos and About offer visible destinations.
- Question/opportunity: A plain-language explanation could clarify what the 404 numeral means.
- Takeaway: A minimal error page can retain identity through its grid and familiar navigation.
View example.
Public services and docs
These public-service and documentation examples emphasize explanations and recovery routes, with less reliance on a visual joke.
Confederation College
Functional
A nonblaming explanation and described destinations help visitors choose their next move.
- The explanation connects older links to a site change without blaming visitors.
- A search control sits beside described quick links.
- Home, Programs, Admissions and Contact Us offer distinct destinations.
- Takeaway: Explain the relevant cause and label alternatives with enough context to choose.
View example.
Niagara Region
Functional · Playful
Site-change context accompanies common public-service destinations.
- A straightforward explanation sits beside a restrained illustration.
- A website-launch notice supplies relevant context.
- Garbage & Recycling, Health, Bid Tenders and Council name service routes.
- Takeaway: Offer common service destinations when site changes may disrupt familiar links.
View example.
GOV.UK
Functional
Plain language and familiar navigation carry the error page.
- Page not found states the problem directly.
- Short recovery paragraphs avoid relying on artwork.
- Homepage, search, Menu and problem reporting remain visible.
- Takeaway: Plain language and recognizable recovery paths can carry the entire error page.
View example.
U.S. Web Design System
Functional
Concrete troubleshooting sits alongside self-service and human-help routes.
- The explanation distinguishes moved pages from typing mistakes.
- A sample URL makes the advice concrete.
- Homepage and Contact us buttons offer different recovery paths.
- Takeaway: Combine concrete troubleshooting guidance with both self-service navigation and a human-help route.
View example.
Plain but useful
These restrained examples range from visitor-facing recovery to owner-facing troubleshooting.
Amazon
Functional · Playful
A friendly photograph does not displace search or recovery.
- A named office dog adds a personal touch.
- Search and the homepage link remain prominent.
- The dog-themed link provides a separate optional detour.
- Takeaway: Use a friendly image to soften the error without displacing search or the primary recovery link.
View example.
MDN Web Docs
Functional
The requested URL becomes a starting point for recovery.
- The failed path is repeated in the explanation.
- A suggested site-search link uses the requested slug.
- Question/opportunity: Could editable search terms avoid an unhelpful or sensitive URL fragment?
- Takeaway: Use the failed URL as a starting point for recovery rather than showing only a generic error.
View example.
GitHub Pages default
Functional
Owner-facing diagnostics need a separate visitor recovery path.
- Filename, permissions and index-file advice addresses publishing problems.
- Documentation and status links support owner troubleshooting.
- Question/opportunity: A site-specific home or content link could help ordinary visitors.
- Takeaway: Technical diagnostics suit owners, but ordinary visitors also need a route back into the affected site.
View example.
## What to borrow from these designs
### Brand continuity without losing the message
[LEGO](#showcase-01-lego) uses a minifigure and brick language; [Pixar](#showcase-08-pixar) uses a character and “Headquarters” wording. Both keep an explanation and recovery route alongside the brand reference. The transferable idea is continuity: use your own visual language, but let someone who misses the joke still understand the page.
[GOV.UK](#showcase-23-gov-uk) and [USWDS](#showcase-24-u-s-web-design-system) show the quieter alternative. A direct heading, brief explanation and familiar navigation do not need an elaborate illustration. Neither approach is evidence of better conversion or faster loading; those outcomes would need testing on your site.
### A reassuring voice, not a joke at the visitor’s expense
[Disney](#showcase-05-disney) explicitly says the visitor did not break the internet, then offers search. [Marvel](#showcase-04-marvel) makes a mock accusation before softening it with a joke. That reversal fits a comic-book voice, but someone scanning only the first line could miss the reassurance. For a new design, keep the core message non-blaming and put any humor around it, not in place of it.
### Recovery destinations that match the visitor’s goal
[Airbnb](#showcase-03-airbnb) names different tasks, including traveling, hosting and help. [Confederation College](#showcase-21-confederation-college), built by this article’s author, adds short descriptions to its quick links. Both suggest a useful question for your own page: where would someone go to continue the task they came for?
[MDN](#showcase-26-mdn-web-docs) derives a search suggestion from the requested URL. That is a starting point rather than proof that a result will be useful: in this capture, the suggestion contains an artificial slug. If you use this pattern, make the suggested terms editable and handle unhelpful or sensitive URL fragments carefully.
### The tradeoffs behind playful and minimal designs
[Kualo](#showcase-19-kualo) gives its arcade-themed page a back link, but that is a limited escape for someone arriving directly from a bookmark or external link. Add a reliable site destination alongside “Back”; the screenshot does not establish whether the game works or is keyboard accessible.
The [GitHub Pages default](#showcase-27-github-pages-default) explains filename and publishing issues to the owner, not how an ordinary visitor can find the intended content. A custom page can retain that useful owner support elsewhere while giving visitors site-specific navigation. Similarly, [Maximilian Kaspar’s minimal design](#showcase-20-maximilian-kaspar) retains navigation, but the numeral alone leaves the missing-page explanation unstated.
## FAQ
### Should a 404 page be funny?
Humor is optional. Choose it only when it fits the brand, audience and task, with a literal explanation and recovery actions still easy to find. A playful shop and an urgent public service have different needs; [USWDS](https://designsystem.digital.gov/templates/404-page/) discourages funny or whimsical error pages in its service context. The screenshots do not establish that humor reduces anxiety or improves task completion.
### Is a home button enough?
It is a useful fallback, especially on a small site. On a larger site, a relevant section, search or help route may be closer to the visitor’s goal. Do not add every possible destination: choose a few clear options and make their labels describe where they lead.
### Can I copy one of these designs?
Use the patterns for inspiration, not as a license to reuse the artwork, characters, screenshots or copy. Those materials belong to their respective owners; attribution alone does not grant reuse rights. Make your own assets and wording, or obtain the necessary permission or license.
### Does a creative design make the page accessible?
No. Nor does a plain design automatically make it accessible. A still image cannot establish keyboard behavior, focus order, screen-reader output, search behavior or motion controls. Use the design checklist above, then test the implemented page rather than treating this gallery as an accessibility ranking.
## Before you publish
- **Return an actual 404 for a missing URL.** A “Page not found” design served as a successful 200 response is not a substitute. [Google’s HTTP guidance](https://developers.google.com/search/docs/crawling-indexing/http-network-errors) says URLs returning 404 are not considered for indexing and already indexed URLs returning 404 are removed. Check the missing address, not only a preview route; see the [custom 404 guide](/guides/custom-404-page/#check-it) for setup and checks.
- **Leave missing pages out of the sitemap.** Google says to [include URLs you want in search results](https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap). Sitemap omission is not an indexing block. For a genuine 404 response, Google ignores the returned content, so `noindex` is redundant. A separate `/404` demonstration served as 200 can use [a crawlable `noindex` directive](https://developers.google.com/search/docs/crawling-indexing/block-indexing) to stay out of results, but that cannot replace proper error responses for missing URLs.
- **Give the browser tab a descriptive title.** “Page not found | Your brand” explains the page’s purpose, in line with [WCAG’s page-title requirement](https://www.w3.org/TR/WCAG22/#page-titled). One shared missing-page template title is fine; you do not need unique metadata for every nonexistent address. A meta description is optional on an error page: [Google sometimes uses descriptions for search snippets](https://developers.google.com/search/docs/appearance/snippet), but content returned with a true 404 is not indexed.
- **Monitor broken journeys, especially after a redesign.** [USWDS recommends tracking missing pages and where visitors came from](https://designsystem.digital.gov/templates/404-page/). Fix source links and redirect moved content to its relevant replacement when one exists. Analytics can miss visits; server logs can supplement it. Keep collected data minimized and access controlled. Do not send personal or sensitive URL paths, query strings, page titles or search terms into analytics; [Google’s PII guidance](https://support.google.com/analytics/answer/6366371?hl=en) covers these leakage risks. Respect applicable consent requirements; [Google’s consent implementation guidance](https://developers.google.com/tag-platform/security/guides/consent) explains its controls, not a guarantee of legal compliance. See [your own 404 pages](/guides/check-404-errors/#your-own-404-pages) and [old links after a relaunch](/guides/check-404-errors/#old-links-visitors-still-follow-after-a-relaunch) for the detailed workflow.
## Create or review your own 404 page
Give an AI assistant the actual site, design or copy you want it to work with. This prompt asks it to distinguish what it saw from what it recommends and what it could not check.
```prompt
Mode: [CREATE OR REVIEW]
Site: [SITE URL]
Design or copy: [SCREENSHOT OR EXISTING COPY]
Visitor’s intended task: [VISITOR GOAL]
Inspect the actual supplied website and design/copy before proposing changes.
If you cannot access them, ask me for screenshots, existing wording, navigation
and brand guidance. Do not invent observations about a site you did not inspect.
Create or review a calm, non-blaming “Page not found” heading and short body.
Keep brand continuity without making the explanation depend on a joke or image.
Recommend clearly labelled recovery actions suited to the visitor’s goal:
relevant destinations, a reliable home link, search and help where appropriate.
Do not make “Back,” a game or animation the only way out.
Review descriptive headings, browser title and link labels; identify needed
keyboard, visible-focus, contrast, reflow, screen-reader and motion checks.
Do not claim WCAG compliance from a screenshot or fabricate accessibility results.
Include a publishing checklist: actual 404 responses for missing URLs; exclude
missing pages from the sitemap, without calling omission an indexing block;
noindex is redundant on genuine 404 responses, while a separate 200-served /404
demo may use crawlable noindex but cannot replace correct missing-page responses.
Use a descriptive shared “Page not found | Brand” title; no unique metadata for
every nonexistent URL is needed. A meta description is optional on an error page:
Google sometimes uses descriptions for snippets, but true 404 content is not indexed.
Recommend privacy-aware monitoring after redesigns, with minimized data,
applicable consent requirements respected and no personal or sensitive URL/query,
page-title or search-term data sent to analytics. Consent controls alone do not
guarantee legal compliance.
Consider server logs as a supplement and point to detailed implementation guides
rather than inventing a tracking setup.
Separate your answer into Observed, Recommended and Not checked.
Only check the HTTP response on a missing URL if you have access tools available;
otherwise mark it Not checked. Do not fabricate network or accessibility results.
Do not deploy changes or enable tracking without my permission.
```
External links open a new tab or window.
---
Source: https://linkscan.app/guides/404-page-examples/ (2026-10-12)