How to Add a Favicon on WordPress, a Website Builder, or Plain HTML

For a plain HTML site, add a favicon by uploading your icon files to the site's root or an assets folder, then referencing them with link tags inside the page's head section — something like a rel="icon" tag pointing to your .ico or .png file, plus a separate rel="apple-touch-icon" tag pointing to your 180x180 version. Browsers actually check for a favicon.ico in the site root automatically, even without a link tag, which is why placing one there as a fallback is good practice.

If your site uses a shared header template or a static site generator, add these link tags once to that shared template rather than to every individual page, so every page picks up the same favicon automatically. This manual approach gives the most control over exactly which icon shows in which context, which matters if you're supporting older browsers alongside modern ones.

Favicons are notorious for not updating even after you've correctly replaced the file, and that's a browser caching quirk rather than anything broken on your end. Browsers cache favicon files aggressively and separately from normal page caching, in some cases ignoring standard cache-control headers entirely, because re-fetching a tiny icon on every single tab render would be wasteful.

To force an update, try a hard refresh (often Ctrl+Shift+R or Cmd+Shift+R), clear the browser's cache specifically, or open the site in a private or incognito window to see the change without any cached files involved. If it still won't budge, renaming the favicon file itself (so the browser requests a genuinely new URL) is the most reliable fix, and clearing any server-side page cache through your hosting panel rules out that layer too.