OneTaskBy Tim King · Updated
404 Page Generator
Branded Page Not Found Template With Search, Home Link and Your Own Colours
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the 404 Page Generator works
A visitor who follows a broken link lands on your 404 page, and a bare server error usually sends them away. This 404 page generator builds a friendlier one: a clear heading, a short message, a button back to the home page and an optional site search, all in one HTML file.
The output is a complete HTML document with the CSS inlined and no images, fonts or scripts, so it loads even when the rest of your assets are what's missing.
What a good 404 page includes
Say plainly that the page wasn't found, without blaming the visitor. Then give them a way
forward: a link to the home page, a search box, or both. A little personality in the heading is
fine, but the way out should be the most prominent thing on the page. The large "404" is
decorative and marked aria-hidden, so screen readers go straight to the heading.
Serving the 404 page with the right status
The page must be sent with HTTP status 404 Not Found. If your server returns it with 200, search
engines see a "soft 404": an error page pretending to be real content, which wastes crawl budget
and can end up in search results. Never redirect missing URLs to the home page for the same reason.
Installing a custom 404 page on your server
On Apache, save the file as /404.html and add ErrorDocument 404 /404.html to .htaccess. On
Nginx, add error_page 404 /404.html; inside the server block. Netlify, Cloudflare Pages and
GitHub Pages all use a file named 404.html in the site root automatically. WordPress themes use
404.php: paste the markup into that template instead.
The search box
The search form sends the visitor's words as ?q= to the search page URL you set. If your site
has no search page, point it at https://www.google.com/search and add a hidden field named q
with site:yourdomain.com, or simply hide the box.
FAQ
Should a 404 page have a noindex tag?
It doesn't hurt, and the generated page includes one. A correctly served 404 status already tells search engines not to index the URL, so the meta tag only matters if a misconfigured server sends the page with 200 by mistake.
Why do links on my 404 page break in subfolders?
Because relative paths resolve against the missing URL. A link to style.css on
/blog/old-post/ looks for /blog/old-post/style.css. Use root-relative paths starting with /,
or full URLs, for every link on a 404 page. This generator inlines the CSS for the same reason.
Should I redirect all 404s to the home page?
No. Sending every missing URL to the home page confuses visitors, who don't learn that the page is gone, and search engines treat those redirects as soft 404s. Redirect a URL only when there is a genuine replacement page, and let everything else return a proper 404.
How do I find which pages are returning 404?
Check the Pages report in Google Search Console, which lists URLs Google tried and couldn't find, and search your server access logs for status 404. Fix any internal links that point at them, and add redirects for pages that moved.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Maintenance Page Generator
Self-contained "down for maintenance" HTML page with your wording.
Coming Soon Page Generator
Launch page with countdown timer and email signup, as one HTML file.
HTTP Status Codes
Look up what any HTTP status code actually means.
.htaccess Generator
Build an Apache .htaccess from toggles for HTTPS, caching, headers and more.
Redirect Generator
Turn an old-to-new URL list into 301 rules for Apache, Nginx, Netlify and Vercel.