How to Add a Favicon in HTML
A favicon is the small icon in browser tabs, bookmarks, and some search results. You need two pieces: the image files, and HTML that points to them. Place favicon.ico at the site root for older clients, then add explicit link tags for PNG and Apple touch icons so modern browsers do not guess.
Generate the files
Start with a square logo at 512×512 or larger. Simple shapes read better at 16×16 than photographs or thin text.
Use a favicon generator to export favicon.ico (multiple sizes), favicon-32x32.png, and apple-touch-icon.png (180×180). Keep filenames stable so bookmarks survive a rebrand.
Put favicon.ico at the site root
Many browsers still request /favicon.ico automatically even if you never add a link tag. Upload favicon.ico next to index.html or your app root so that request succeeds.
If your site lives in a subdirectory, still prefer a root favicon.ico when you control the domain. Some Windows shortcuts and older CMS themes ignore HTML and only look at that path.
Add HTML link tags
In the document head, declare the ICO, a PNG for high-DPI tabs, and an Apple touch icon. Example: link rel="icon" href="/favicon.ico" sizes="any", link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png", and link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png".
Copy the same tags from the favicon generator after you process an image. Do not put UTM parameters or cache-busting query strings on icon URLs unless you also update every bookmark later.
Cache and verification
Browsers cache favicons aggressively. After replacing files, hard-refresh, clear the CDN cache, and check Chrome DevTools Application → Images. iOS home-screen icons may keep the old asset until the user removes and re-adds the site.
If the tab icon is missing, confirm the files are publicly reachable, the HTML is in the head (not the body), and you are not blocking /favicon.ico in robots.txt.
Related guides
Related resources
Related tools
Frequently asked questions
Do I still need favicon.ico if I have PNG link tags?
Yes for compatibility. Keep favicon.ico at the root and add PNG plus apple-touch-icon tags for modern clients.
Why is my new favicon not showing?
Usually cache. Confirm the file URL loads, then hard-refresh or wait for CDN cache headers to expire. Changing the filename also works but breaks old bookmarks.
Where should the tags go in a Next.js or WordPress site?
In the shared document head: the root layout in Next.js, or the theme header in WordPress. One set of tags is enough for every page.
Last reviewed: 2026-08-19