Create a Custom 404 File Not Found Page

Create a custom 404 File Not Found Page

Where do you often end up if you arrive at a website and click on a page link that doesn't exist? Usually you arrive at a default 404 page and encounter a "404 File Not Found" error.

The default 404 page is next to useless as it doesn't supply any site navigation or links that can take you to the websites site map or home page.

So what action do you normally take when you reach a nondescript 404 page. Do you:

1. Click on the browsers back button and end up at the last site you visited.

2. Try to get to the sites home page by deleting everything that's after the domain name shown in the browser window, so you arrive at something like

3. Write to the webmaster of the site to inform him of the broken link.

No matter what option you choose you're not any further forward in finding the page you are after. There's a good chance that if you are like most people, you'll just click on the back button and try to find the information you need somewhere else.

If you own a website, especially an e-commerce site, you must create a custom 404 page so that you do not lose this group of people who visit your site by following an old link or by typing your domain name incorrectly.

Customising the 404 File Not Found Page

If your website's hosting company mentions somewhere in there literature that you can customise a file named ".htaccess", it probably means that you can also customise your 404 'File Not Found' error page. So just follow the instructions they provide.

If you can't find a reference to this file try using an FTP tool to check your sites file structure to see if a file called .htaccess can be seen in the sites main directory (i.e. the sites root -

The .htaccess file is what an Apache web server uses to allow you to fine-tune your web server configurations at a directory level. Other types of web servers handle the customisation of 404 error pages a bit differently. (If your web server is not an Apache web server, you will have to find out from your web hosting company what you need to do to enable their server to use your customised 404 file when a file cannot be found.)

Creating or Modifying the .htaccess file

The first thing you need to do is to add the following line to a file named .htaccess. In some instances, no such file will exist, but you can easily create the needed .htaccess file on any Apache based server.

In the root of your site i.e. create a file named .htaccess. The best way to create this file is to open up notepad and save a document as a .htaccess file. Make sure you change the 'save as type' to all files. This will prevent the .htaccess file being saved as a text document.

Open your .htaccess file using notepad and type the following redirect request:

ErrorDocument 404 /custom404.html

You will of course need to put the custom404.html file in the main web directory for this to work.

The "ErrorDocument 404" directive essentially tells the Apache web server that whenever it cannot find the file it needs in the main directory or in its subdirectories, it is to use your custom404.html page.

You only need one .htaccess file in your main directory as this will handle all the 404 actions for this directory and all its subdirectories.

However, if you want a certain subdirectory to show a different 404 'File Not Found' message, you can always place a .htaccess file into that particular directory. This will override any .htaccess files you have in the parent directories.

Creating Your Error Document File

What should go into your custom 404 File Not Found page?

It is insufficient to simply let the visitor know that the file could not be found. In order not to lose that visitor, you will have to provide him some way to locate the document he wanted, or you will lose him.

Your page should have one or more of the following things:

1. A link to your site map, which lists all the pages on your website. If you don't have a site map, now is the time to create one. To see what's involved take a look our own site map.

2. A link to your main page, with a suggestion that the visitor can find what he wants by starting there.

3. If you have a search engine for your website, you should definitely put a search box on that page. Many people prefer to simply type a query rather than to scan through your site map.

4. If you know of frequently mistyped URL's on your site, you can even put links to the correct location directly on the page, so that visitors who arrive there from outside can quickly get to the correct page. Remember, you don't want to lose that visitor, so do all you can to help him or her.

In this instance it may be better to set the .htaccess file to redirect visitors to a new page that replaces an old one. To find out how to do this see our web design article - redirecting site pages with .htaccess.

5. Any other navigational aids that you may have - for example, if you have a drop down navigation menu on your normal pages, you should probably put one here as well.

6. You could set up a page redirect to your site map with a suitable delay before the redirection takes place so that your site visitors know what's going on.

Testing your custom Error Document

When you're satisfied with your page design, upload it together with your .htaccess file to the root of your website. Then test it by typing a URL that you know does not exist. Also test the page works for any sub folder errors.

Whenever and wherever a 404 page error occurs your error page should load up instead of the default page. Check that all the links on your custom page are working properly.

Common Errors with a Custom 404 Page

The most common error people have with their custom error page is making a mistake in the URL they put in their .htaccess file. This leads the web server into a loop when a visitor tries to access a missing file. When a file cannot be found the server tries to load the file specified in your ErrorDocument directive. But that file does not exist.

Make sure you test your error file by typing in a non-existent URL e.g.

Another very common error is to forget that your custom404.html page may be loaded either from the main directory or from a subdirectory or even from a CGI-BIN directory. When you put links on your custom 404 page, such as hyperlinks leading to other pages on your site or links to images (such as your logo), be sure that you use the full URL and not a relative link.That is, use:

<a href="">My Page</a> instead of <a href="mypage.html">My Page</a>

The first full web address will work even if the 404 page appears for a missing file in a subdirectory, but the second will not. So carefully check that all the links on your custom 404 page show the complete web address e.g.

Creating a custom 404 error page allows you to minimize the number of visitors who loose their way when trying to find pages within your website. So we suggest you follow all the steps in this article to cure a lot of these problems, keep your site easy to navigate and avoid default 404 pages that can quickly lead your visitors to leave your site, perhaps never to return!

If you would like to find out more about server error codes see our article - Server Error Codes (HTTP status codes).

Read more articles about PC repairs, Web design & SEO...