How to Add a Favicon in HTML (Code + Manifest)
By AZ Utils Editorial · · 7 min read
You've generated your favicon files — now you need the browser to actually use them. That means a few lines of HTML in your page's <head> and a small manifest file. This guide shows you exactly how to add a favicon in HTML, with copy-paste code, where to put the files, and how to fix the classic "my favicon won't update" problem.
It's written for developers and site owners adding favicons to a hand-coded site or a template.
Key Concepts: Link Tags Tell the Browser
Browsers discover your favicon through <link> tags in the <head>. Each tag points to a specific icon file and size, so the browser can pick the right one for the tab, the iOS home screen or an Android install.
In short: To add a favicon in HTML, place the icon files in your site root and add link tags in the <head> for the ICO, PNG sizes, apple-touch-icon and web manifest.
Step-by-Step: Adding the Favicon
1. Place the files
Put the generated files (from the Favicon Generator) in your website's root directory.
2. Add the link tags to <head>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">3. Add a minimal web manifest
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}4. (Optional) Add an SVG icon
<link rel="icon" type="image/svg+xml" href="/favicon.svg">Try Our Free Favicon Generator
Generate the files and the exact HTML with our free Favicon Generator — just paste the snippet it gives you.
- ✅ All icon files from one image
- ✅ Ready-to-paste <head> markup
- ✅ Manifest included
- ✅ Free, in your browser
👉 Generate favicon + HTML now →
Fixing "My Favicon Won't Update"
Browsers cache favicons aggressively, so a change may not show immediately. To force it:
- Hard-refresh (Ctrl/Cmd+Shift+R) or clear the cache.
- Version the filename (e.g.
favicon-v2.ico) or add a query string (?v=2). - Confirm the path is correct and the file is reachable.
Real-World Examples
Example 1 — Static site
Files dropped in the root and five link tags added to the shared header template — every page now shows the favicon.
Example 2 — Updating an icon
After a rebrand, versioning the filename to favicon-2026.ico made the new icon appear immediately, bypassing the cache.
Example 3 — PWA install
With the manifest linked and 192/512 icons present, the site installs on Android with a proper icon and splash screen.
Common Mistakes to Avoid
- Wrong file paths (relative vs root-absolute).
- Forgetting the apple-touch-icon or manifest.
- Not accounting for caching when testing changes.
- Placing tags outside the <head>.
Best Practices
- Use root-absolute paths (
/favicon.ico) so it works site-wide. - Include ICO, PNG sizes, apple-touch-icon and manifest.
- Version filenames on change to defeat caching.
- Validate across browsers and devices.
Frequently Asked Questions
How do I add a favicon in HTML?
Place the icon files in your site root and add link tags in the head for the favicon.ico, the PNG sizes, the apple-touch-icon and the web manifest. Browsers then load the appropriate icon.
Where do favicon files go?
Typically in your website's root directory, referenced with root-absolute paths like /favicon.ico so they work on every page.
Why isn't my favicon showing or updating?
Browsers cache favicons aggressively. Hard-refresh, clear the cache, or version the filename or add a query string like ?v=2 to force the update.
Do I need a web manifest for the favicon?
You need it for Android home-screen icons and PWA installs, where the 192x192 and 512x512 icons are referenced from the manifest.
Can I use an SVG favicon?
Yes. Modern browsers support an SVG favicon via a link tag with type image/svg+xml, giving a crisp, scalable icon.
Conclusion
Adding a favicon in HTML is a five-minute job: drop the files in your root, add the link tags and manifest to your <head>, and version filenames when you update. Generate the files and the exact markup with the free tool, paste, and you're done.
👉 Generate your favicon & HTML now →
Related Resources
- Favicon Generator: Complete Guide — the full how-to
- Favicon Sizes Guide — which files to reference
- Favicon for WordPress — the no-code way
- Favicon Best Practices — design & technical tips
