A favicon is the small icon a browser shows in the tab, in bookmarks and history, and on a phone's home screen when someone saves your site. Getting it onto your site takes four files and about five minutes — and most of the frustration people hit is caching, which the last section deals with.

The minimal set that actually works

You do not need sixteen PNGs and a browserconfig.xml. Windows tiles and the old Internet Explorer formats are dead. Four assets cover every browser and device in real use today:

File	Size	Why it exists
`favicon.ico`	16 · 32 · 48 (multi-size)	Legacy browsers, and Google Search, which fetches `/favicon.ico` directly.
`icon.svg`	vector	Modern browsers prefer it — sharp at any size, and it can adapt to dark mode.
`apple-touch-icon.png`	180 × 180	iOS home screen and Safari. iOS ignores SVG here, so the PNG is required.
`android-chrome` 192 & 512	192 · 512	Android home screen and installable PWAs, referenced from the web app manifest.

The HTML to paste into <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

The browser reads all four lines and picks the best format it supports, so a current Chrome or Safari uses the SVG while an old browser falls back to the .ico. The sizes="48x48" on the .ico line simply declares the largest image contained inside it.

The web app manifest

The manifest is what lets Android and PWA installs use a proper icon. A minimal site.webmanifest:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

The "purpose": "any maskable" lets Android crop the icon into its adaptive shape without clipping your logo — provided you leave a safe margin around it (see Advanced Tips).

Where the files go

Put every file in your site's root directory. Browsers — and Googlebot — request /favicon.ico from the root automatically, even without a <link> tag, so keeping it there is the safest default.

Verify it actually worked

Hard-refresh the page: Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac).
Still stuck? Open the site in a private/incognito window — it starts with an empty cache.
Load each file directly, e.g. yourdomain.com/favicon.ico, and confirm it returns the image (HTTP 200), not a 404.
Inspect the rendered <head> in DevTools, not just your source file — a build step or CMS may rewrite the paths.

The one thing that wastes the most time: caching

Browsers cache favicons more stubbornly than almost any other asset, sometimes holding the old one through ordinary reloads. If a new icon refuses to appear:

Hard-refresh, then fully close the tab and open a fresh one — the favicon cache is often tab-scoped.
While testing, add a version query so the browser treats it as a new file: <link rel="icon" href="/favicon.ico?v=2">.
Google Search keeps its own copy and updates on its own schedule — expect days, sometimes weeks, before a search result shows the new icon.

Everything on this site runs in your browser. Your uploaded image never leaves your device — there is no server to upload it to.

← Back to the generator