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.
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.