Generate a Favicon to Replace Your Old Icon Everywhere

If your site still shows the old icon in browser tabs, bookmarks, or search results, the cause is almost always one of two things: the old favicon file is still being served, or browsers and search engines have cached the old one. To fix it, you need to generate a favicon in the right sizes, replace the existing files, update the links in your HTML and web manifest, and then nudge browsers to fetch the new version.

This tutorial walks you through that process in plain language. You don’t need to be a developer to follow along.

Why Your Old Icon Is Still Showing

Browsers are aggressive about caching favicons because they show up on every tab and bookmark. That means even after you upload a new file, your browser may keep showing the old image for a while. A few common reasons the old icon sticks around:

• Stale cache. Your browser saved the old icon and hasn’t checked for a new one.
• Old files still on the server. The original favicon.ico is still sitting in your site root, so browsers keep finding it.
• Missing or outdated links. Your HTML still points to the old file name, or the web manifest references a different icon.
• Search engine delay. Google and other search engines refresh favicons on their own schedule, which can take days or longer.
• Multiple icon sources. Some platforms read the manifest, some read the <link> tags, and some read /favicon.ico directly. If they disagree, you’ll see mixed results.

What You Need Before You Generate a Favicon

Start with a clean source image. A square PNG or SVG at least 512 by 512 pixels works well. Simple shapes and strong contrast survive the shrink down to 16 pixels, which is the size browsers show in a tab. Avoid fine text or thin lines, because they turn into a blur at small sizes.

You’ll also want:

• A way to generate the icon set — a browser-based tool like FaviconForge runs locally, needs no sign-up, and never uploads your image anywhere.
• Access to your site’s files (via your host’s file manager, FTP, or your CMS’s theme settings).
• A few minutes to update your HTML and manifest.

Step by Step: Generate a Favicon and Replace the Old One

1. Open the generator in your browser. Load your square source image into FaviconForge. Because it runs entirely in the browser, the file never leaves your computer.
2. Generate the full icon set. You want at minimum a 16×16 and 32×32 PNG, a 180×180 Apple touch icon, a 192×192 and 512×512 PNG for the web manifest, and a multi-size favicon.ico for older browsers and direct requests. The tool produces these from your single source image.
3. Download the files. Keep the file names simple and predictable, like favicon-32x32.png, favicon-192x192.png, and favicon.ico. Predictable names make the next steps easier.
4. Delete the old files from your server. This is the step most people skip. Remove the old favicon.ico and any old PNG icons so browsers can’t fall back to them.
5. Upload the new files. Put favicon.ico in your site root (the same folder as your homepage) and the PNGs in a folder like /icons/ or wherever your HTML will point.
6. Update your HTML links. Replace the old <link rel="icon"> tags with the new ones (see the next section for the exact markup).
7. Update your web manifest. If your site has a site.webmanifest or manifest.json, point its icons array at the new 192×192 and 512×512 files.
8. Clear your cache and test. Reload your site in a private window and check the tab. Then check a bookmark, a mobile home screen shortcut, and a search result preview.

Where to Put the Files and How to Link Them

Browsers look in several places, so cover the common ones. A typical set of link tags in your <head> looks like this:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

And inside your manifest, list the larger PNGs so Android and other platforms can pick the right size:

{
  "icons": [
    { "src": "/icons/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/favicon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

If you use a CMS, look for a “site icon” or “favicon” setting in your theme or SEO plugin. Upload the new files there, then confirm the plugin isn’t still pointing at the old ones.

How to Force Browsers to Show the New Icon

Once the files are live, browsers still need a reason to re-fetch them. Try these in order:

• Hard refresh. On most browsers, reload while holding Shift, or use the developer tools to empty the cache and reload.
• Use a new file name. Renaming the icon (for example, favicon-v2.png) and updating the link tag is the most reliable way to break a cache. Browsers treat it as a brand-new file.
• Add a version query string. Appending ?v=2 to the href has the same effect without renaming files.
• Check a private window and a second browser. If the new icon appears there but not in your normal window, it’s a local cache issue, not a server issue.
• Give search engines time. Google refreshes favicons on its own schedule after it recrawls your page. You can request a recrawl in Search Console, but there’s no guarantee of a same-day update.

Tip: after you generate a favicon and swap it in, keep the old file name unused for a while. If you ever need to roll back, you’ll have a clean path to do so.

Checklist: Make Sure the New Icon Appears Everywhere

Run through this list after you publish the changes:

• Browser tab shows the new icon, in both normal and private windows.
• Bookmark bar and bookmark manager show the new icon.
• Mobile home screen shortcut (iOS and Android) uses the Apple touch icon or manifest icon.
• Search results show the new icon after recrawling.
• Social sharing previews look correct, though these often read a separate image tag.
• No leftover old files remain in the site root or icon folder.

If one place still shows the old icon, the cause is almost always a leftover file or a cached copy. Recheck the link tags, the manifest, and the file names, then test again in a fresh window.

Ready to start? Generate a favicon with FaviconForge — it’s free, runs in your browser, and needs no account or uploads.