How to Add a Favicon to Your Website

Last updated: 2026-06-30

Adding a favicon takes two things: a small set of icon files at the root of your site, and three lines of HTML in the page <head>. You do not need the two dozen files some generators spit out — a favicon.ico, one PNG, and an Apple touch icon cover every browser and device in use today. The icon is tiny, but it carries weight: it is the visual anchor for your tab, your bookmark, and your home-screen shortcut.

The modern minimal set

Generate three files from one square source image (a 512×512 PNG is ideal) and drop them in your site's root directory:

favicon.ico — a single file bundling the 16, 32, and 48 px versions. It is the universal fallback that every browser, old and new, looks for automatically.
favicon-32.png — a crisp PNG that modern browsers prefer when you point to it explicitly.
apple-touch-icon.png — 180×180, shown when someone adds your site to an iPhone or iPad home screen. iOS renders it on an opaque tile, so it needs a solid (non-transparent) background.

The favicon generator produces all three from one image — including the byte-correct multi-size .ico — and gives you the exact HTML below, without uploading your image anywhere.

The HTML

Put these three tags in the <head> of every page (or your shared layout/template):

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Designing for 16 pixels

A favicon is the smallest branding you will ever ship, and detail is the enemy. A full logo with a tagline and thin lines turns to mush at 16 px. Use a single bold mark — a monogram letter, a simple symbol, a solid shape — with strong contrast that holds up against both light and dark tab backgrounds. Start from a clean, square source. If your logo is a vector, rasterize it large first with the SVG to PNG converter; if it is not square, frame the mark with the image cropper (or let the generator's "cover" mode crop it) before you generate.

Try the toolFavicon GeneratorGenerate a favicon.ico with 16, 32, and 48 px sizes from any image, plus the HTML tags. Free browser-based favicon generator — no upload.

Why your new favicon won't show up

The number-one favicon frustration is caching. Browsers cache favicons aggressively — often longer than ordinary assets — so after you replace one, you may keep seeing the old icon (or none). Before assuming something is broken, force a refresh, load the page in a private/incognito window, or visit /favicon.ico directly to confirm the new file is actually served. Other common causes: the file is not at the path your HTML points to, the server returns the wrong content type, or a build step didn't copy the files into your output directory. Check the network tab for the favicon request and its status code.

A quick checklist when an icon misbehaves: confirm the files exist at the site root, confirm the <link> href paths match, hard-refresh to dodge the cache, and verify each request returns 200 with an image content type.

What about an SVG favicon?

Modern browsers also accept an SVG favicon via <link rel="icon" type="image/svg+xml" href="/icon.svg" />, which stays crisp at any size and can even adapt to dark mode with a media query inside the SVG. It is a nice progressive enhancement, but it is not a replacement: older browsers and most home-screen/app contexts still need raster icons. Ship the .ico and PNGs as the baseline, and add an SVG on top if you want the extra polish. For choosing between raster formats elsewhere on your site, see PNG vs JPG vs WebP.

Frequently asked questions

What sizes do I actually need for a favicon?

For the .ico, 16, 32, and 48 px cover browser tabs, bookmarks, and taskbars. Add a 180×180 apple-touch-icon.png for iOS home screens, and optionally a 512×512 PNG if you ship a web app manifest. You do not need the dozens of sizes older generators produce — that was for a more fragmented device era.

Where do I put the favicon files?

In your site's root directory, so they're reachable at /favicon.ico, /favicon-32.png, and /apple-touch-icon.png. If your framework has a public/ or static/ folder, put them there so the build copies them to the root of your output. Then reference them with root-relative paths in your <link> tags.

Why isn't my new favicon showing up?

Almost always browser caching. Favicons are cached aggressively, so hard-refresh the page, try a private window, or open /favicon.ico directly to confirm the new file is served. If it still fails, check that the file exists at the path your HTML points to and that the request returns a 200 with an image content type.

Do I still need favicon.ico, or just a PNG?

Keep the .ico. Modern browsers happily use a PNG when you point to one, but favicon.ico at the site root is the universal fallback every browser checks automatically — including older ones. Offer both: the .ico for compatibility and the PNG for sharper rendering where it's supported.