Setting up a custom 404 Error – Page Not Found Page

Don’t you hate it when you hit a bad link on a website? Sometimes it’s just a matter of a redesign or reorganization making a page obsolete. Avoid rejecting your users by creating a custom “404 Error – Page Not Found” page.

You’ll need two files:

  • A .htaccess file uploaded to your root directory
  • An html file named the same as mentioned in your .htaccess file

Your .htaccess file should be made in a text editor and contain the following:

ErrorDocument 404 /pageerror.html

There’s nothing tricky about this file, except uploading it to your server. Many hosts will not let you upload a file named this way. A get-around is to name the file something like, “htaccess.html” and then renaming the file after it’s saved on the server. I use GoDaddy and it was easy to use their content file management utility to rename the file.

Now, all you need is the pageerror.html file. This is just a regular html webpage. You could just have a logo and a basic message, or you could include your full website navigation. The tricky part here is that you need to link everything – images, links, etc. – using absolute paths, not relative paths. Example: Your link to the logo should look something like this:

<img src="" />

You can even put a different pageerror.html file in every directory if you want.

One last thing – your pageerror.html file needs to be at least 512 bytes or it will be ignored. Hmmm strange, I know.

There you go. All that’s left to do is test it. Type a url within your site that doesn’t exist. Your error page should pop up. Don’t forget to test the page deep within your website.

Need inspiration? Go to some of your favorite sites and type a page url wrong – maybe just delete a letter in the page name. Instant sample…

Or, check out this blog with 40 creative examples.

Gloria Wadzinski

About Gloria Wadzinski

Gloria Wadzinski is a multimedia designer specializing in graphic design, website design and video production. She currently lives in Boulder, Colorado. View Gloria's contact information and portfolio at
Web Development, , , Permalink

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>