What is "How to Make a Favicon from Any Image (in 2 minutes)"?

A favicon is the small icon browsers show in tabs, bookmarks, and home-screen shortcuts. The fastest way to make one is to take any square image, generate a 32×32 PNG (plus a 16×16 for old browsers, a 180×180 for iOS, and a 512×512 for PWA installs), and add the right tags to your . A free in-browser favicon generator handles all the sizes and the HTML in one step.

How to Make a Favicon from Any Image (in 2 minutes)

A favicon is the small icon your browser shows in tabs, bookmarks, history, and the home-screen shortcut when someone installs your site as a Progressive Web App. It is the single most-overlooked piece of branding on the web: a 32×32 image that 99% of visitors will see for the entire duration of their visit, and most sites still use the default browser icon or, worse, a 256×256 logo that gets aggressively downscaled to a blurry square.

Making a proper favicon used to mean five files, a ZIP, and a build step. It is still five files, but the build step is now a single button in the browser. Here is what you actually need.

The favicon file set you need in 2026

There is no single "the favicon" — different browsers and platforms want different sizes and formats. The realistic minimum:

favicon.ico — the legacy 16×16 (and sometimes 32×32) ICO file. Browsers still fall back to this if nothing else is declared. ICO is a container format that holds multiple sizes in one file, so a single favicon.ico with 16×16 and 32×32 covers old browsers cleanly.
favicon-32x32.png — the modern default for desktop browsers. 32×32 is sharp on standard-DPI displays and acceptable on most retina ones.
apple-touch-icon.png — 180×180 PNG, used when someone adds your site to the iOS home screen. Without it, iOS takes a screenshot of the page, which looks terrible.
android-chrome-192x192.png and android-chrome-512x512.png — for Android home screen and PWAs. The 512×512 is also the source-of-truth PNG that Chrome uses when generating other sizes.
site.webmanifest — a one-page JSON file that tells the browser the names, colors, and icons for your PWA.

That is five image files and one manifest. None of them are large — the biggest is the 512×512 PNG at maybe 30–80 KB. Total bundle: under 200 KB for a complete, modern favicon setup.

Pick a source image

The source image should be square and at least 512×512 pixels. The best source is your logo on a transparent background (PNG) or a square photo with the subject centered. If your source is rectangular, you need to crop it first — a browser image cropper can square it up, or use a resizer to fit the longest dimension and add padding.

If the source is small (say, a 64×64 logo), the result will be soft when scaled up. The fix is to start with the largest clean version of the logo you have. Vector source (SVG) is ideal: a single SVG can be exported to any PNG size without quality loss.

Generate the file set

Open the favicon generator in your browser, drop in the source image, and it will produce every size plus the manifest in one ZIP. The whole thing takes about 30 seconds. The generator:

Crops to a square if the source isn't already square.
Generates 16, 32, 180, 192, and 512 pixel PNGs.
Generates a multi-resolution favicon.ico from the 16 and 32 versions.
Writes the site.webmanifest with sensible defaults (white background, "Uttir" theme color placeholder that you edit).
Includes the <link> tags you need to paste into your <head>.

Everything runs in the browser. The image never leaves your device — the generator does the resizing with the Canvas API and packages the result locally. Useful when the source image is a draft logo you don't want to upload yet, or when the brand guidelines forbid putting assets through third-party services.

Wire it up

Drop the generated files into your site's root or a dedicated /icons/ folder, then paste the suggested <link> tags into your <head>. The full set, with the manifest:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

The order matters: the ico link comes first as the legacy fallback, the PNG versions come next, and the Apple touch icon and manifest come after. Browsers pick the first one they support. The theme-color meta tag tints the address bar on mobile browsers that support it.

Two gotchas to avoid

Don't ship a 2048×2048 favicon and call it done

Some guides recommend "just use one big PNG and let the browser scale it." The browser will scale it, badly. A 2048×2048 PNG downscaled to 16×16 is a blurry square because the browser uses a fast but crude algorithm; a hand-prepared 16×16 favicon is sharp. Modern favicon generators handle every size explicitly because the difference is visible in the tab strip.

Don't forget the cache

Favicons are aggressively cached by browsers. When you change your favicon, visitors will keep seeing the old one until they hard-refresh, restart the browser, or the cache expires (which can be days). Two ways to fix this:

Add a version query string to the href: /favicon.ico?v=2. The browser treats this as a new resource and refetches.
Set the right Cache-Control headers in your _headers file (Cloudflare Pages, Netlify) or your server config: Cache-Control: public, max-age=86400 for the favicon files balances freshness with performance.

Verify it works

After deploying, open the site in a fresh incognito window (to bypass the cache) and check three places:

The browser tab — the favicon should be sharp, not blurry, and not a generic globe.
The bookmarks bar — bookmark the page; the favicon in the bookmark should be the same as the tab.
The home screen on mobile — on iOS, use "Add to Home Screen" from the share menu. On Android, use "Install app" from the address bar. The icon should be your favicon, not a screenshot of the page.

If any of those are wrong, the file is missing, the <link> tag is wrong, or the cache is stale. The browser's DevTools → Application → Manifest panel shows the resolved manifest and icon set for the PWA case; the Network tab shows which favicon files the page actually requested.

A favicon is the one piece of branding every visitor sees whether they intend to or not. The five-file setup is not glamorous, but it is the difference between a site that looks like a real product and a site that looks like a placeholder. Two minutes of work, an afternoon of forgetting about it.