Fix 404 Errors Caused by Requests for Missing files

If your website stats and server error logs are filled with requests for missing images, non-existent Javascript files or just plain old missing CSS and TXT files, or any other file type you can think of then you can quickly cure those 404 errors with an .htaccess snippet and set of default replacement files.

How to Fix Those 404s

This 404 error fix is a one-size-fits-all plaster over what could be a much larger problem within your website. So fix the errors you can fix before you apply this solution to mask the 404s you cannot fix.

WordPress admins can use an activity logger like Simple History with its Developer Loggers addon pack (both free plugins) to track 404 requests. Admins of others CMSs will need to use their server logs or some other means to track 404s.

The 404 Fix

This ‘missing file’ fix will serve a replacement document whenever a specified file type is requested but not found.

All the files required for this to work can be downloaded from my GitHub repository. The details are provided here in case you feel lost or you just want a little more info.

Download Files Here

This solution requires

  • One set of directives to fix requests for missing images
  • A second set of directives to fix requests for other missing files
  • One folder to store the substitute files

We use separate solutions for image and other file types so that browser error messages are kept to a minimum. There should be no browser error messages when missing files are replaced with an image only but we can never be 100% sure about that and I like to be careful.

Step one

Save these server directives into your site’s root .htaccess file. Place them near or at the top of the file. Create the .htaccess file if it does not exist but first confirm your file manager is configured to show hidden files.

## Fix missing image and file requests
## Change each of the two {REQUEST_URI} lines to specify the missing file 404 requests to check against.
## The replacement file(s) to serve should go into a server directory called "missing" located under public_html/
## See https://journalxtra.com/web-development/fix-missing-file-404-requests/
 
## Fix Bad Image Requests
RewriteCond %{REQUEST_FILENAME} !-f
## Add image file types to check against here
RewriteCond %{REQUEST_URI} .(gif|jpe?g|png|bmp|tiff|xcf|psd|ico|svg)$ [NC]
## Specify the file to serve instead
RewriteRule .* /missing/missing.gif [L]
 
## Fix Bad File Requests
## Ignore specified virtual file(s)
RewriteCond %{REQUEST_URI} !^/robots.txt/? [NC]
RewriteCond %{REQUEST_FILENAME} !-f
## Add file types to check here.
## Put a replacement document in the "missing" directory for each specified file type.
## The replacement document can be an empty text file but with the same extension type as the file it is served in place of.
RewriteCond %{REQUEST_URI} .(css|html?|js|php|shtml|txt)$ [NC]
RewriteRule .* /missing/missing.%1 [L]

Be careful not to block access to virtual files generated by your CMS or other scripts. Each .htaccess directives block explicitly tells Apache to check whether a file exists (or not) before it serves (or not) a substitute for any requested missing file(s). Virtual files do not exist to be checked so Apache will not know whether a virtual file is ‘present’ or not.

If you use WordPress,

  • do not test for xml files (because of virtually created XML sitemaps) or,
  • if your permalinks end in .htm or .html,  do not block html files.

Step two

Download the ‘missing’ files folder from GitHub.

Step three

Upload the missing files folder to your web server, unpack it and move the ‘missing’ directory to your website’s root directory. This is usually public_html/missing.

Step four

Check your website still loads. If it does, good. If it does not, check the .htaccess directives have been saved correctly.

Step five

Try to load a non-existent file or image. You will see either a white dot in the middle of the screen (the substitute image) or a blank white page (the substitute file).

Need help to fix 404 errors? Ask in the comments or pay me to fix them for you.

6
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Stefan Lisowski

This is exactly what I wanted, though because I don’t do rewrites much, and don’t recall ever doing them from .htaccess files before, it took me a bit of googling before I discovered that the first line in the .htaccess file needs to be “RewriteEngine on”. At least — when I put it in there, everything worked. (Well after I also put “AllowOverride FileInfo” in httpd.conf for the relevant docroot so the .htacess would take effect…). Thank you very much.

You are very welcome, Stefan. I’m glad my ramblings helped ;)

Most servers already have rewrites enabled. The best place to add the “RewriteEngine on” directive is in the server space’s root directory (above public_html or its equivalent).

Thank you.

I have some question.

How can I check if the image is forbidden?

If is a forbidden image I would like to redirect it as well.

Thanks again.

Tom

The following piece of code worked for me (adapted from yours, ported to nginx) # Missing resized images, try to fetch original location ~* (\-\d+x\d+)(@2x)?\.(gif|jpg|jpeg|png) { if (!-e $request_filename){ rewrite (.*)\-\d+x\d+(@2x)?\.(gif|jpg|jpeg|png) $1.$3 break; } } Basically it matches any image with dimensions (ie. wp-uploads/imagename-200×200.jpg or wp-uploads/imagename-200×200@2x.jpg) and if it doesn’t exist it tries to load the original size respectively (ie. wp-uploads/imagename.jpg and wp-uploads/imagename.jpg) Sorry for the formatting, don’t know how to put code in your comments.

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!