How to make a favicon that looks sharp everywhere

A practical guide · Updated June 2026

A favicon is a tiny image with an outsized job: it is the visual signature that identifies your site in a crowded row of browser tabs, a bookmark bar, a search-history list and a phone's home screen. Getting it right is not hard, but there is more to it than dropping one small PNG into a folder — modern browsers and devices expect several sizes, a couple of formats, and a few lines of HTML to tie them together. This guide walks through exactly what you need, why each piece exists, and how to make an icon that stays crisp from a 16-pixel tab to a 512-pixel app tile.

What a favicon actually is (and where it shows up)

The word "favicon" is short for "favorite icon," a term that dates back to the bookmark ("favorites") menu in early browsers. Today the same small icon is reused in far more places than a bookmark list, and each surface renders it at a different size:

• Browser tabs and the address bar — the smallest and most common view, usually drawn at 16 or 32 pixels.
• Bookmarks and reading lists — often 32 pixels, sometimes larger on touch devices.
• Browser history and autocomplete — the icon helps users spot your site at a glance.
• The phone home screen — when someone taps "Add to Home Screen," iOS uses a 180-pixel Apple touch icon and Android uses 192-pixel and 512-pixel icons from a web app manifest.
• Windows and taskbar shortcuts — pinned sites can use 32 and 48-pixel versions.

Because the icon appears at so many sizes, a single small file will look either blurry (if it is scaled up) or wasteful (if a huge file is scaled down). The trick is supplying the right sizes and letting each device pick the one it needs.

The favicon sizes you actually need

You will see people ship a dozen icon files "just in case," but that is cargo-culting. In 2026 a lean, complete set covers every real surface. The table below is the part most tutorials skip — it maps each size to where it is used, the HTML or file that references it, and the format that works best. Sizes are in pixels, always square (width equals height).

Notice that 180 pixels covers all current iPhones and iPads. Apple once asked for a spread of sizes (152 for older iPads, 167 for the iPad Pro), but a single 180-pixel image is downscaled cleanly and is the accepted default today. Likewise, 192 and 512 are the two sizes the web app manifest spec specifically calls out — 192 for the home-screen icon and 512 for the splash screen — so you do not need the in-between sizes you may see in older generators.

.ico vs .png vs .svg — which format?

Three formats matter for favicons, and they are not interchangeable. Here is what each one is genuinely good for.

ICO — the compatibility baseline

The .ico container is unique in one way: a single file can hold several sizes at once (typically 16, 32 and 48 pixels). Browsers automatically look for /favicon.ico at your site root even if you never add a link tag, which makes it the ultimate fallback. A three-size .ico is usually just 5–15 KB. Keep it for maximum compatibility, especially with older browsers and Windows.

PNG — the sharp, simple workhorse

PNG is lossless and supports transparency, so it is the right choice for the specific pixel sizes you reference directly — the 32-pixel tab icon, the 180-pixel Apple touch icon, and the 192 and 512-pixel manifest icons. It is universally supported and easy to generate. The one thing PNG cannot do is scale: a 32-pixel PNG shown at 64 pixels looks soft.

SVG — one file, every size

An SVG favicon is a vector, so it stays razor-sharp at any size from a single file that is often under 1 KB. It can even respond to dark mode using a CSS media query inside the SVG. Current versions of Chrome, Firefox and Edge support SVG favicons well; Safari's support is more limited, so treat SVG as the crisp modern layer and always keep an .ico or PNG fallback underneath it.

• Want the simplest reliable setup? An .ico plus a 180-pixel PNG covers the vast majority of visitors.
• Want the sharpest possible tab icon? Add an .svg on top of that baseline.
• Building an installable web app? Add the 192 and 512-pixel PNGs in a manifest.

Design tips for tiny sizes

The hardest part of a favicon is not the code — it is making artwork that survives being shrunk to a 16 × 16 grid, which is a mere 256 pixels total. A logo that looks great on a business card often turns into an unreadable smudge at that scale. A few rules keep icons legible:

• Simplify ruthlessly. Drop taglines, fine detail and thin strokes. A single letter, a bold symbol, or one strong shape reads far better than a full logo lockup.
• Use high contrast. The icon sits on browser chrome that may be light or dark. A strong figure-to-background contrast keeps it visible in both themes.
• Design on a square canvas. Favicons are always square. If your mark is wide or tall, add transparent padding so it centres cleanly instead of being stretched.
• Preview at true size. Zoom your design down to 16 and 32 pixels and look at it honestly. If you cannot tell what it is, neither can your visitors.
• Avoid tiny text. Words below roughly 32 pixels become noise. If your brand is a wordmark, use just the first letter or a monogram for the icon.

A practical shortcut: start from the boldest, most recognizable element of your logo rather than the whole thing. The tab is an identity cue, not a place to reproduce your full branding.

The HTML link tags you need to add

Once your files exist, you tell the browser about them with a handful of <link> tags inside the <head> of every page. Here is a modern, complete-but-minimal set:

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

What each line does, in plain terms:

• Line 1 points to the classic .ico as the universal fallback and hints its size.
• Line 2 offers the SVG to browsers that support it; those browsers prefer it and get a perfectly sharp tab icon at any zoom level.
• Line 3 gives iOS a 180-pixel PNG for the home screen. No sizes attribute is needed when it is 180 × 180.
• Line 4 links a web app manifest, a small JSON file that lists the 192 and 512-pixel icons Android and installable apps use.

The matching site.webmanifest is short:

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

Place the icon files at your site root so paths like /favicon.ico resolve correctly, and you are done. Browsers that predate any of these formats simply ignore the tags they do not understand and fall back to the next option.

A complete worked example

Say you have a single square logo saved as a 512 × 512 PNG and want a full favicon set. Here is the exact sequence, start to finish:

1. Square it up. Confirm the image is truly square. If your mark is a wide wordmark, crop to the symbol or add transparent padding so it centres — a 512-pixel canvas gives you room to work down from.
2. Generate the sizes. Produce 16, 32, 48, 180, 192 and 512-pixel PNGs from that master. Each is scaled from the same high-quality source so none of them looks soft.
3. Build a multi-size favicon.ico. Bundle the 16, 32 and 48-pixel versions into one .ico for the compatibility baseline.
4. Name the files clearly. For example favicon.ico, apple-touch-icon.png (the 180), icon-192.png and icon-512.png.
5. Drop them at the site root and add the four <link> tags plus the manifest shown above.
6. Deploy and hard-refresh. Favicons cache aggressively, so a normal reload may still show the old icon — see the testing section next.

To make this even faster, generate every size in one pass. Our free favicon generator takes a single square image and instantly renders crisp PNGs at 16, 32, 48, 64, 180, 192 and 512 pixels, all in your browser — nothing is uploaded. You download the set, add the link tags, and your icon is ready in a couple of minutes.

How to test your favicon (and fix it when it is missing)

The single most common favicon frustration is "I added it but it is not showing." Nine times out of ten the file is fine and the browser is simply serving a cached version — favicons are cached harder than almost any other asset. Work through this checklist:

• Hard-refresh. Reload with the cache bypassed (Ctrl+Shift+R on Windows, Cmd+Shift+R on macOS), or test in a private window where nothing is cached.
• Open the icon URL directly. Visit yoursite.com/favicon.ico (or the SVG/PNG path). If it does not load there, the file is missing or in the wrong place — fix the path before anything else.
• Check the path in your tags. A leading slash matters: /favicon.ico resolves from the root, while favicon.ico resolves relative to the current page.
• Confirm it is square and a supported format. A non-square source or an unsupported file type can be silently ignored.
• Wait for caches to expire. Some browsers and CDNs hold favicons for days; if the direct URL works, the icon will catch up.

For the home-screen icons, test on an actual phone: add the site to your home screen on iOS and Android and confirm the tile is sharp and correctly cropped. Emulators are convenient but do not always match real device rendering.

Frequently asked questions

Try the free tool — in your browser

You can make a complete favicon set in a couple of minutes with Imagloo's free, private tools. Everything runs locally in your browser, so your image is never uploaded:

• Favicon Generator — turn any square image into crisp PNG icons at 16, 32, 48, 64, 180, 192 and 512 pixels, all at once.
• Image Compressor — shrink your source logo or the finished icons so they load instantly.