Web Design: How to create and edit a custom 404 error page

This is a great example of the kind of tips & tutorials I will be posting in the future. While working on the new design of daydull.com I realized that my webhost, HostGator, has recently decided to insert its own glaring ads on its customers’ 404 error pages.  This means if anybody visiting your site were to type in the wrong address (or if you had an invalid link somewhere) they would be subjected to an extremely unprofessional HostGator ad page.

Luckily, HostGator still allows you to customize your 404 page, and once that’s done their 404 ad page will not pop up anymore.

So, without further ado, below you’ll find instructions on how enable and customize your own 404 error page. Note that these instructions specifically apply to Host Gator’s shared hosting service and that other web hosts may differ slightly.

1. Connect via FTP to your website and look in your root directory.  For my HostGator shared hosting account, the directory is as seen below:
   Now there are a couple of things to note that are likely specific to Host Gator shared hosting accounts (accounts with addon domains).  First, you’ll note that all of your website files will go in the /www/ directory.  Secondly, your main website–the one you created your Host Gator account with–goes directly into the /www/ directory.  However, all addon domains have their own directory: all files for daydull.com go into the /www/daydull/ directory.
2. .htaccess file setup. The first thing you will want to do is set up the .htaccess file.  HostGator already has a placeholder, empty file set up in the correct spot– /www/.htaccess  — you will want to download this file then open it with notepad or the text/html editor of your choice. Then paste the following line (without quotes):
   “ErrorDocument 404 /notfound.html”
3. Save your new .htaccess file, then upload it to the same spot you downloaded it from.  It should now be located at /www/.htaccess
4. Create your customized 404 error page. Create an html file using whatever method you normally use then save it as “notfound.html”. Then upload this file so it is located at /www/notfound.html (right next to your .htaccess file). Also note at this time that you can change the “notfound.html” filename to whatever you wish, just make sure to edit the line in your .htaccess file to match.
5. DONE! You can now test by typing in an incorrect address into your browser’s address bar. For example on daydull, I would enter “daydull.com/fakefile324.html”. Your customized 404 page should now pop up.  You have now removed the HostGator 404 advertisements from your main website! See below for how to make customized 404 pages for each addon domain/website.
6. Addon Domains. Creating customized 404 error pages for addon domains at HostGator is easy.  This also allows you to enter website-specific information that doesn’t apply to all of your sites. To do this, simply paste the .htaccess and notfound.html file into your addon domain’s own folder.  In the image above, you can see I have daydull set up as an addon domain. I would simply paste the files so they were located at /www/daydull/.htaccess  and /www/daydull/notfound.html. You can edit this notfound.html to include website-specific information like a link to your home page, an error submission form, or a sitemap.
7. What should I include in my custom 404 error page? Here are a few things to consider when creating your page:
   • An error message. This should usually mention the file was not found, and I prefer to keep in the “404 error” for clarity
   • A link to your homepage.
   • A link to a contact form or your email address for visitors to report problems.
   • Keep the design of the “notfound.html” error page similar to the rest of your website. At the very least, use similar font type, font color, and background colors. If you have a logo, this would be a great place to use it. You do not want your visitors thinking they have left your website entirely.
   • A witty comment. Nobody wants to be sent to a 404 error page, but mistakes happen. Some humor can go a long way toward making your visitors feel welcome and happy. Make the comment positive and encouraging while communicating you care about your visitors.