Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

404 Error Pages, One More Time

The design of 404 error pages is often overlooked and underestimated. However, designed carefully, these pages can make a random visitor stay on your website, take a look around and eventually find the information he or she was looking for in the first place. Effective 404 error pages communicate why a particular page couldn’t be displayed and what users can do next. A search box and list of useful resources (possibly related to the missing page) could be helpful in this case. [Content Care Nov/29/2016]

We’ve already covered the design of 404 error pages in previous posts. In them, we also covered some interesting and useful ideas for designing 404 pages. Now, it’s time for a fresh dose of 404-error inspiration. This article presents 50 more examples of beautiful and original 404 error designs. Some of them are beautiful but not user-friendly, others are user-friendly but not really beautiful. Please use these examples as a source of inspiration; hopefully, this showcase has something for everybody.

You may also want to take a look at the following related posts:

Also note that some examples used in this post were suggested by our Twitter followers: please follow us on Twitter4 to vote on which article gets published next, discuss new ideas, get fresh updates and suggest great ideas for our next posts. Thank you.

Beautiful 404 Error Pages Link

Cut & Tate claims that “Someone on the staff is to blame for this! Rest assured, the proper person will get the proper amount of blame and humiliation dealt to them.” Notice how well the search box is highlighted. Beautiful!

Creative 404 Error Page

Productplanner
Productplanner perfectly integrates its 404 error page in the overall branding of the website.

Creative 404 Error Page

Mundofox.com
A 404 error page with a not-so-eloquent Homer.

Screenshot

Duoh.com
Probably one of the most colorful and abstract 404 error pages out there.

Screenshot

Apartmenthomeliving.com
A quite unusual 404 error page from a website that helps people find apartments.

Screenshot

Chrisglass.com
Chris takes his comrades on a trip, hunting for the right page.

Screenshot

Huwshimi.com
On Huwshimi a ninja seems to have stolen a 404 error-page: “you must return when the moon has friends and the fox is borrowed”. Gorgeous!

Screenshot

ilovetypography.com
A typographically beautiful (of course) 404 error page from ILoveTypography.com.

Creative 404 error page

Newspond
Newspond uses a very strange illustration on its 404 error page. The circle defines the limits of the website, and the small image at the top is a miniaturized Newspond logo. A click on the image leads to the home page of the website.

Creative 404 Error Page

Brightkit
“404 Fowl Not Found.” Brightkit shows a missing owl on a milk carton. Unusual and, therefore, memorable.

Creative 404 Error Page

jhuskisson.com

Screenshot

Gog.com
“404: oh noes, there’s nothing in here.” (sent by @Chamb via Twitter)

Creative 404 Error Page

User-Friendly 404 Error Pages Link

RealMacSoftware.com
An excellent 404 error page, functionally speaking, that contains a site map of the website.

Creative 404 Error Page

InspirationBit
InspirationBit presents an overview of popular and recommended articles.

Creative 404 Error Page

45royale
This error page contains links to popular posts and a cool illustration of a pretty freaky monkey.

Creative 404 Error Page

Ma.gnolia.com

Screenshot

Have Fun With 404! Link

Yes, fun! Because 404 also is a place where you can show your sense of humor. You have the opportunity, so use it well!

www.techkultura.com
On Pawel Opydo’s blog: “Golden Rule of the Code of the Samurai: If this isn’t the page you were looking for, you have to do Seppuku.”

Screenshot

Abduzeedo
Abduzeedo suggests ideas for finding the right article and lists popular and recent blog posts as well as a tag cloud.

Screenshot

Habrahabr
An illustrative image (sent by sabugao on Twitter).

Creative 404 Error Page

CSS Remix
This fellow is quite scared (sent by @dezignMusings on Twitter).

Creative 404 Error Page

Pattern Tap
Don’t get angry, and don’t cry. Pattern Tap will take on the burden of the missing page.

Screenshot

New Yorker
The New Yorker magazine has been published since 1925, but it is definitely with it, with its own 404.

Screenshot

Frye/Wiles
Frye/Wiles Creative Agency.

Screenshot

Heinz
The 404 for the best-known ketchup.

Screenshot

Chelmsford Library
OMG, Smashing Magazine is missing in the Chelmsford Public Library!

Screenshot

Craigslist
An ASCII 404 error page from Craigslist.

Screenshot

The Truth
Is this really the truth?

Screenshot

Wulffmorgenthaler
Blame that weird beaver on Wulffmorgenthaler.

Screenshot

Henrik Hedegaard
Henrik Hedegaard seems to like the Simpsons.

Creative 404 Error Page

NotaNiche
Refresh and see the next funny picture. A blog by Alexander Frison.

Screenshot

Daze of Our Lives
“Whatever the Dickens a so-called “Error 404″ is I haven’t the foggiest idea, but one has occurred. You can’t trust this wretched technology, can you?”

Screenshot

Limpfish
Wanted: a Web page.

Screenshot

Orangecoat
“Despite that song in your step and sense of purpose, you’ve hit a little bump in the road. These things happen. We’re going to do our best to make sure you keep dancing in the right direction.” Orangecoat gives a 404 error mind map.

Screenshot

Kochatelier Berlin
404 bread on the website of a cooking agency.

Screenshot

Dawdle
Mario occasionally entered the wrong castle.

Screenshot

CSS-Tricks
Chris Coyier takes a closer look at the code.

Screenshot

Niki Brown
Niki Brown encourages her visitors to “Have no fear” and shows them a beautiful mouse illustration.

Screenshot

Twitter
Twitter uses a minimalistic yet attractive 404 error page.

Creative 404 Error Page

Livadaru
Homer on the blog of Cristian Livadaru.

Screenshot

ARTTHUG Studios
Homer again, this time at ARTTHUG Studios.

Screenshot

Cubeecraft
Error Cubee (which you can download and make yourself) at Cubeecraft.

Screenshot

d20 SRD
A brutal error at d20 SDR!

Screenshot

HomeStar Runner
Oops! You had it coming at HomeStar Runner.

Screenshot

Animation? Sure! Link

404 doesn’t only have to be about graphics. Below, you’ll find 404 examples with animation.

Mark Fennell
On his 404, Mark Fennell offers… a game!

Screenshot

Project Euh
Project Euh? Just click and go to a random website.

Screenshot

Total Insanity
Total Insanity shows us what insanity really means.

Screenshot

Herr Nilsson
This 404 error page fetches 404 Tweets and displays them in real time (sent by eelay on Twitter).

Creative 404 Error Page

Cricket Feet
The 404 error page on Cricket Feet talks to you!

Screenshot

Bluedaniel
Daniel Karcher’s film design studio.

Screenshot

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2014/08/a-better-404-page/
  2. 2 https://www.smashingmagazine.com/2009/06/effective-maintenance-pages-examples-and-best-practices/
  3. 3 https://www.smashingmagazine.com/2011/05/optimizing-error-pages-creating-opportunities-out-of-mistakes/
  4. 4 http://twitter.com/smashingmag

↑ Back to top Tweet itShare on Facebook

Sylwia Besz is a Product Manager working on online and mobile products/services. Privately she's a blogger at In Web We Trust, geek and amateur photographer.

  1. 1

    These are awesome, most of the 404 pages I have seen don’t have anything on them. I am trying to create personalized ones to make people feel better and keep them on the site longer. Thanks for the great list and inspiration.

    1
  2. 2

    Great stuff, has inspired me to put more effort into the design of my 404 pages!

    1
  3. 3

    yeah real cool error´s !

    0
  4. 4

    Some very cool error pages.
    I also think that most of the readers do not know what the number 404 means.

    Better to write an understandable text to inform the visitor what happend.

    1
  5. 5

    Very useful and entertaining, thanks!

    2
  6. 6

    One more time? You promise?

    0
  7. 7

    Great list… Thanks

    -2
  8. 8

    I’ve always been proud of the 404’s I do for my clients. One of my favorites is the one I did for the non-profit Amara Conservation (hope this isn’t construed as advertising or spamming).

    -1
  9. 9

    Nice list.

    0
  10. 10

    Martijn Vandenberghe

    January 29, 2009 9:19 am

    Where do you guys keep getting the inspiration to write about these things?! Great!

    0
  11. 11

    funny stuff

    0
  12. 12

    Great article, these ones are very enjoyable to read.

    0
  13. 13

    I love the brightkit and the fryewiles one :D

    -1
  14. 14

    Extremely creative!

    -1
  15. 15

    some 404 pages were really creative, while others were simply hilarious. nice list. btw, i like d “live preview” when submitting comments.

    -1
  16. 16

    Flicdelapolice

    January 29, 2009 9:39 am

    Awesome work. This just made me think that for 80% of readers “error 404” means nothing but still “error 404” is in good place.

    Would be better to delete this “error 404” thing and write in very good place “We couldn’t find what you are looking for, please search or browse sitemap”

    I’ll change right away my 404 pages.

    -1
  17. 17

    Enjoyed it so much…
    tnx!

    -1
  18. 18

    Kind of appropriate…..

    I’m trying to enter the desktop wallpaper calendar contest for February but my email is bouncing back with this error:
    :
    The users mailfolder is over the allowed quota (size). (#5.2.2)

    D’oh… I may be too late anyway :(

    -1
  19. 19

    Good list… Little elements like an attractive (yet functional!) 404 page help improve the experience for the end user.

    Pattern Tap also has a useful list of 404 pages.

    -1
  20. 20

    That reminds me I need to make a nicer 404 page. Man Homer seems to be pretty popular for this error.

    -1
  21. 21

    Henrik Hedegaard

    January 29, 2009 11:00 am

    Very nice – and thanks for the reference to my 404-page :-)

    -1
  22. 22

    Hey, glad to see BrightKit made the list! It was inspired from the previous list of 404 pages, so it’s nice to see it on this one. Cheers!

    -1
  23. 23

    Nice list .The css-tricks and gog.com 404’s are my favourites.

    -1
  24. 24

    I’m getting “Internal server error” instead of your 404 page.
    Maybe we should also design THAT page to show something nice to the users, instead of telling them that we probably goofed somewhere…

    0
  25. 25

    Vitaly Friedman & Sven Lennartz

    January 29, 2009 11:37 am

    @T (#24): that’s not true, our 404-error-page doesn’t show an internal server error.

    -1
  26. 26

    @Vitaly and Sven

    T mentioned the error page of the author of this post. The link you provided to sylwias website returns an Error 500.

    -2
  27. 27

    Vitaly Friedman & Sven Lennartz

    January 29, 2009 12:21 pm

    @webmeister (#26): oh, that’s true. ;-(

    -1
  28. 28

    What a great collection, I like the one from Apartmenthomeliving.com.

    -1
  29. 29

    Hehe nice ones.. some of them are really inspiring / beatyfull others are just hilarious there are also those that are really good for their cause [ bakery : toasted 404 , HEINZ : empty page ].

    PS. :o i’m part of the Herr Nilsson’s 404 error page [ i was actually @the time the screenshot was shot ]! or a response to a tweet of mine at least :p

    -1
  30. 30

    Beautiful. We had to link this! :-)

    -1
  31. 31

    great pages, i tryed someting similar on 3ner.ro, but i ended up trying to make something usefull of it and monetize the page

    -1
  32. 32

    Love a great 404 page…a really easy way to show your visitors that you pay attention to every detail. Great post.

    -1
  33. 33

    gotta get working on my 404 !

    why all the homer ?

    -1
  34. 34

    I think I have a pretty unique

    -1
  35. 35

    Thanks for yet another link to my site! And it’s first on the list — even sweeter.

    I’m sure my 404 error stats will be sky high this month, thanks to you guys, haha.

    -1
  36. 36

    Homer is a conspiracy, I’m sure. :o

    This post had something I really didn’t expect from a design-related post: Sheer entertainment value.

    You have proven it is possible to be entertained by design. Thank god for that!

    Now I’m off to improve my own 404…

    -1
  37. 37

    Some clever ideas there, however I do believe that some readers who come across customised 404 pages might interpret the fact that you’ve taken responsibility for a page doesn’t exist as a sign of incompetent or sloppy work from the webmaster, when it is likely they have simply typed the wrong address… this said offering links back to the homepage etc has got to be good.

    -1
  38. 38

    How do you find this stuff—nice

    -1
  39. 39

    Cool and very funny examples. Hihi.

    -1
  40. 40

    Brian Gottier

    January 29, 2009 5:08 pm

    HAHAHA! Gotta love those custom 404 pages!

    -1
  41. 41

    Jamie Huskisson

    January 29, 2009 5:12 pm

    Thanks once again for publishing my site on your site guys :) It’s an honour every time.

    -1
  42. 42

    projectautomatika

    January 29, 2009 6:11 pm

    Nice list! Enjoyed watching those creative 404 pages.

    -1
  43. 43

    haha, I love Owly and the milk box. Also the ketchup one and the other one with the birds on-line :)

    -1
  44. 44

    Great list (yet again…!)

    This is a nice one too: on a dutch (NL) website for garden designs; ‘the requested page had been ‘erased’ from the design!’ .

    0
  45. 45

    I haven’t seen this used as a 404 error before, but it should be:

    “Once upon a midnight dreary,
    while I websurfed, weak and weary,
    Over many a strange and spurious website of hot chicks galore,
    While I clicked my fav’rite bookmark,
    suddenly there came a warning,
    And my heart was filled with mourning,
    mourning for my dear amour.
    ‘Tis not possible, I muttered,
    give me back my cheap hardcore! –
    Quoth the server, ‘404’.”

    0
  46. 46

    Epic fail! Doesn’t even include 4chan’s pedobear 404!

    -2
  47. 47

    Thanks for this collection. I merrily enjoyed looking at this bunch of nice 404 pages. Some people really give it a shot.
    May I add one of my favorites? It’s on a band’s page called Noisome Paste.
    Keep it up, cheers!

    -1
  48. 48

    Prasanna Jathan

    January 29, 2009 8:51 pm

    Great list again.. Thanks

    -1
  49. 49

    Beautiful pages.

    0
  50. 50

    TRUE! I always take 404 page for my best creativity this is nice place to show something unusual.

    -1
  51. 51

    Jordan McClements

    January 30, 2009 7:32 am

    Apartmenthomeliving.com is definitely the best one I have seen!

    ROFL etc…

    -3
  52. 52

    Superb post.

    -1
  53. 53

    hehe, nice ànd useful post and funny as well.

    -1
  54. 54

    Like ever! SM Rocks!
    Thanks for so many suggestions!

    -1
  55. 55

    @T (#24): Thx, now it’s workin’ :)

    -1
  56. 56

    Really nice second post on this subject. Your own 404 is also a great example of what can be done, consistent with the rest of your website. Thanks guys.

    -1
  57. 57

    Alexander Dombroff

    January 30, 2009 12:23 am

    i am a web designer and i really appreciate this post. It is awesome! i am gonna use these techniques.

    -1
  58. 58

    i love twitter 404 pages… seem like the bird going dissapear… original idea…

    -1
  59. 59

    Hahah oh my god how hilarious!!!!
    Love the Owl and the birdies.

    Superduper post!! ;)

    -1
  60. 60

    Awesome! Hilarious!

    -1
  61. 61

    Nikita Kondraskov

    January 30, 2009 2:06 pm

    You missed the 404 pages of comedy central.
    Some of their websites have funny monkey cartoons for the 404 page.

    0
  62. 62

    Hi… How did you put that twitter button above the comment along with digg delicious??

    -1
  63. 63

    Nice list.. the 404 of Chris Coyer is still my all time favorite !

    -1
  64. 64

    cool :))

    -1
  65. 65

    Very inspiring, makes me wanna change all of my page into a various 404 page…. ;)

    -1
  66. 66

    I think css-trick 404 error is the best

    -1
  67. 67

    Brilliant! Now I need to get back in there and fix my 404.

    cheers from Brooklyn.

    1
  68. 68

    The translation of techkultura.com’s 404 error is incorrect. But this one is 100% correct :D

    404th rule of the Samurai Code
    “If the page you are looking for does not exist,
    commit seppuku immediately.”

    -1
  69. 69

    Homer is slowly, but surely, becoming the 404 mascot.

    0
  70. 70

    great idea… will have to try it

    0
  71. 71

    who knew? i didn’t. those are so creative, so awesome. now i can’t wait to find a 404 page that i’m responsible for in order to do something creative and cool with. thanks for the collection, smashing mag.

    0
  72. 72

    Good stuff really. Hey check out the response at the first featured 404 page – Cut & Taste. There’s a nice response to Smashing magazine :).

    0
  73. 73

    Oops! sorry, this comment no longer exist. Please proceed reading the next one or the one before this.

    1
  74. 74

    Beverly Millson

    January 30, 2009 5:05 pm

    This is a bit like embroidering on the inside of the jacket. The wearer knows and dons it with pride.

    0
  75. 75

    Very inspiring, makes me wanna change all of my page into a various 404 page…. ;) :)

    0
  76. 76

    hey thats really colorful 404 pages.Really intresting stuff.I have seen such variety first time.

    0
  77. 77

    Camilo Oliveira

    January 31, 2009 6:49 pm

    Check the Cut And Taste´s 404 error page again.
    A special message to SM reader. Very appropriate :)

    0
  78. 78

    love, love, love the NotaNiche one! made my morning.

    0
  79. 79

    Good finds, I love the funny ones.

    0
  80. 80

    Thnks for this idea, loved it! First time I heard about it, eaven though i have worked whit webshops (not as desinger or similar) and i am going to use this Idea at my own webpage =)

    Br,
    Piparipiru from finland

    0
  81. 81

    Any kind soul know where to get tutorial for wordpress.org to make pretty custom 404 page like those
    posted above?
    I wanted to make a 404 page like that but dont know where or how to start.. lol..

    ~LoV3 smashingmagazine, my fav+ site for all time ^_^

    0
  82. 82

    Angelo Panares

    February 3, 2009 6:55 am

    This is a good one, it has inspired and motivated me to tidy up and make an interesting 404 error page :)

    0
  83. 83

    yeah, its very cool, it has inspired me too to make my own one. it should be more interesting than the frontpage! har har har!

    0
  84. 84

    geeez… I should learn to create my own awesome 404 page just like those :D

    0
  85. 85

    Rodrigo Henrik

    February 4, 2009 1:02 pm

    Cool! Congrats!

    0
  86. 86

    Studio-XL.com official 404 error page

    not only beautiful, but 100% valid:

    Link

    0
  87. 87

    Sai Gudigundla

    February 5, 2009 7:43 am

    That is a gr8 collection of Error Pages that you got here. I also like your comments on each one of them.

    1
  88. 88

    Really useful article!
    I’ve got my own version of 404 here with random pictures and effects after any reload

    0
  89. 89

    @123, glad that it made your day :) and thanks to Smashing Magazine putting my 404 on this list :)

    0
  90. 90

    Recently updated the 404 page a few days ago. Added a pic and some functionality. Here it is: .

    0
  91. 91

    some very clever examples… nothing like a good 404

    0
  92. 92

    Haha, when I saw the title of this article, I thought, “404’d!!! Homestar Runner!”

    0
  93. 93

    Great 404 page that must be added to this great list :D

    0
  94. 94

    I would like to know if I could find a nice tutorial to “How to place 404 Images when it’s happen”

    Thx in advence

    0
  95. 95

    Wow! Thanx a lot! Nice selection of 404 Error Pages. Look at my own 404 Error Page: Link

    0
  96. 96

    I have to start going to non-existent pages just to check out the 404 pages. These are great. Link Matching the 404 page to the theme helps and gives a good impression to the wayward visitor.

    0
  97. 97

    Nice work

    0
  98. 98

    Saw one funny one with tags. Had to plug it here :)

    Intermix Management

    0
  99. 99

    you forgot zipcar’s 404 page! i love the conversational tone and error sign dropped in the grass!

    0
  100. 100

    interesting post, will come back here, bookmarked your site

    0
  101. 101

    NPR’s 404 pages is one of my favorites, in terms of making sure I stay on the site.

    0
  102. 102

    This is a beautiful and funny 404 Web Page :
    Wimax Wibox Internet Haut-Débit 404

    0
  103. 103

    catty2christmas

    December 23, 2009 1:05 pm

    400+4=….

    0
  104. 104

    :O …404! That’s a lot of 4– wait a minute Mike M.!

    0
  105. 105

    Kitty, Kitty, y r u 2 far?

    0
  106. 106

    On the word, “Hello!” eye meant 2 doo “Jello!” HAHAHAHAHA.

    0
  107. 107

    Supercalifragilisticexpialidocious

    December 24, 2009 5:56 pm

    (burps)

    0
  108. 108

    Khine Nwe Nwe Lin

    February 3, 2010 1:13 am

    Sometimes this problem is because of the version of ChartImage.axd in declaring it in httphandler under the in web.config file.So please try to declare like this.

    And also some IIS 7 integrated-mode web applications require the following declaration in .So,if you need,please
    declare it again.

    ——–

    0
  109. 109

    Very nice list, specially the Homer pages.

    Regards,
    C.

    0
  110. 110

    nice one, i’m thinking to create one :)

    0
  111. 111

    Brenda Mabbitt

    April 12, 2010 11:45 am

    My favorite 404 page of all time was one w/a screen shot of Charlton Heston and Kim Hunter as Taylor and Zira in their famous kissing scene from “Planet of the Apes” and a title that read, “Okay, That’s Just Wrong!” I almost fell out of my chair I laughed so hard!

    0
  112. 112

    404 Snorlax is blocking the way. The site your requested could not be reached.

    0
  113. 113

    These are all cool and all, but I can’t help but wonder about the pages that utilize Homer Simpson and the one with Master Shake. I can’t imagine the site owners have permission to utilize these characters, even on a 404 page. Personally, I feel that using such a character is taking a gigantic risk, even if you never expect you’ll never get caught using it. Just putting those pages in a showcase like this exposes those 404 pages, which ideally won’t be seen, to people who would otherwise never see them.

    0
  114. 114

    Chelmsford Public Library? That is near where I live.

    0
  115. 115

    我正在寻找这方面的内容来妆点自己的404页面(虽然我还不知道怎么来弄).看到这样精彩的设计让我倍受鼓舞.非常感谢!

    -1
  116. 116

    Old but still a good article! I’ve noticed that articles like this have encouranged many people to spend a long time on their error pages. But is this wise? It’s spending effort on something that not many people (should) see!

    0
  117. 117

    Matej Latin

    May 3, 2011 1:59 pm

    haha great stuff.. some of the are really funny… i’ll make something similar for my web site… :)

    0
  118. 118

    For my 404, I wrote a small PHP script that yanks the page the user is looking for out of the address bar, gets rid of anything that’s not words [like slashes, hyphens etc] and puts it in a big shiny search box for them.

    0
  119. 119

    ravi pahariya

    July 12, 2011 5:03 am

    the Mario page was most hilarious… lol… i like that most… ;)

    0
  120. 120

    I loved s much s you?ll obtin crried out right here. The sketch is tsteful, your uthored subject mtter stylish. nonetheless, you commnd get got n

    0
  121. 121

    Aarik Iftekhar

    February 18, 2012 8:19 pm

    Most probably i have seen the most beautiful 404 page collection.

    0
  122. 122

    Bravo! these are just brilliant! :)

    0
  123. 123

    Today, I was searching benefits of custom 404 page on Google and found such an interesting blog post on SEOmoz by Randfish.

    I come to know about your blog post from here. You have given such a wonderful design concept for custom 404 page. But, I have question which is associated to SEO & page rank.

    You can find out my custom 404 page as above where I have created hyperlink to home page. So, will it pass page rank to home page, if any broken link have page rank?

    -1
  124. 124

    LoL Greats ideas !
    This one is awesone http://www.moonservices.ch/404/

    -1

↑ Back to top