The Ultimate Developer's Guide to Favicons (2026)

Every website needs a favicon — the small icon in the browser tab, bookmark lists, and on a user's mobile home screen. It seems like a tiny detail, but a well-implemented favicon is crucial for brand recognition and a polished user experience.

It's also a detail a surprising number of sites still get wrong. According to the HTTP Archive Web Almanac 2024, roughly 17% of pages ship no favicon at all (17.2% on desktop, 17.9% on mobile) — millions of sites showing a blank placeholder. Among the sites that do ship one, PNG leads at 41.9% of pages. Getting this right is a fast, cheap win.

Generating the correct formats historically meant complex design software or outdated, ad-heavy converter tools. In 2026, web standards are refined enough that a perfect favicon setup should take seconds. This guide walks through the modern best practices and the fastest way to generate them.

The Modern Favicon Standards

Tutorials from a decade ago demanded dozens of image files for every Android and iOS device. Today, browsers and operating systems are smarter, and a few formats cover 99% of use cases:

1. The Classic .ico Bundle: The traditional fallback. A single .ico file can hold multiple sizes; a high-quality bundle contains 16x16, 32x32, and 48x48 versions so it stays crisp everywhere. The format is far from dead — the same Web Almanac data shows ICO declared on 28.3% of desktop pages, second only to PNG at 41.9%. A favicon.ico in your site root remains the most reliable cross-browser fallback.
2. The SVG / High-Res PNG: Modern browsers (Chrome, Firefox, Edge) prefer a scalable SVG or a high-resolution PNG (512x512) in your HTML head. SVG support is broad — about 88% of global users have a browser that renders SVG favicons, per caniuse — but not universal: Safari on iOS only added support in version 26, and Internet Explorer never did. Treat SVG as a progressive enhancement on top of your .ico and PNG, not a replacement.
3. The Apple Touch Icon: iOS devices saving your site to a home screen look for an apple-touch-icon.png. Chrome's Lighthouse audit checks that the <link rel="apple-touch-icon"> tag is present in your HTML, and its docs recommend 180x180 or 192x192 pixels, with one catch most people miss: the background must not be transparent. iOS paints a transparent PNG onto a black square, which looks broken, so always export this one with a solid background.

Why a layered approach still wins

It's tempting to read "88% support SVG" and ship a single icon.svg. Don't — that remaining slice includes older Android browsers, locked-down corporate machines, and (until very recently) every iPhone. A favicon that silently fails is worse than a less-trendy one that always works. The reliable pattern is layered: an .ico fallback, a PNG for high-DPI tabs, an optional SVG for crisp scaling, and a non-transparent Apple Touch Icon for iOS. Declare them all and let each browser pick the best it understands.

What about manifest.json and Android?

Android Chrome and installable PWAs don't read your apple-touch-icon — they look for icons in a web app manifest. A minimal manifest references a 192x192 and a 512x512 PNG so the launcher and splash screen render sharply on an Android home screen. Skip it if you only care about the tab; otherwise a site.webmanifest with those two sizes rounds out the set. The 512x512 master PNG most generators produce doubles as the large manifest icon.

How to Quickly Convert an Image to a Favicon

If you have a high-resolution logo (PNG or JPG) and need production-ready files, we built a fast Free Favicon Generator:

1. Prepare your source image: Make your logo perfectly square, ideally at least 512x512 pixels with a transparent background. If it isn't square, fix the aspect ratio with our Crop Tool first. Starting from a large, clean source matters — downscaling a sharp 512x512 to 16x16 always beats upscaling a tiny one.
2. Upload to the Generator: Open the Favicon Generator and drag your logo into the dropzone.
3. Instant Client-Side Conversion: Unlike older tools, the generator doesn't upload to a server queue — it downscales the logo locally in your browser. Because the file never leaves your machine, an unreleased brand asset stays private.
4. Download Your Bundle: Click download for a .zip containing your multi-resolution favicon.ico, a 512x512 PNG, and the Apple Touch Icon.

A quick word on the 16x16 problem

The hardest size to get right is the smallest. At 16x16 pixels, fine detail, thin strokes, and gradients turn to mush. If your logo is intricate, create a simplified "mark" — the core symbol or a single letter — for the favicon. Many strong brands use a bolder glyph for their tab icon than their full wordmark, because legibility at tab size beats faithfulness to the design.

The Optimal HTML Code

Once your icons are uploaded to your site's root directory, add a few lines inside the <head>. Here is the boilerplate favored by frameworks like Next.js and Vite:

<!-- Classic Fallback -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- SVG / High Res Modern Setup (if applicable) -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

A note on the ordering: sizes="any" tells browsers the .ico scales to any size, stopping Chrome from picking a blurry low-res entry. Browsers that understand SVG prefer the image/svg+xml line; the rest fall back to the .ico. The apple-touch-icon link is read only by iOS and iPadOS, costing nothing elsewhere.

On the Next.js App Router you can skip the manual <link> tags entirely: drop favicon.ico, icon.svg, and apple-icon.png into your app/ directory and the framework injects the correct metadata tags at build time.

How to verify your favicon is actually working

Shipping the files is only half the job. Three quick checks catch almost every problem:

1. Check the DevTools Network tab. Reload and filter for ico, svg, and png; you want a 200 OK on each. A 404 means the path in your <link> tag doesn't match where the file lives — the most common favicon bug.
2. Run a Lighthouse audit. Chrome's Lighthouse panel flags a missing apple-touch-icon by checking that the <link rel="apple-touch-icon"> tag is present in your HTML — note that, per Chrome's docs, it doesn't verify the icon actually exists or is the correct size, so still confirm the dimensions, path, and non-transparent background yourself.
3. Test the real surfaces. Add the page to a phone's home screen. That icon comes from a different file than the tab icon, so one that looks perfect in the tab can still break on iOS or Android.

Why this matters more than it used to

It's easy to dismiss the favicon as decoration, but consider where it shows up. On mobile, your Apple Touch Icon sits on the home screen next to native apps and is judged against them. On desktop, a row of open tabs collapses each site to almost nothing but its favicon. That tiny square does real branding work: a crisp icon signals a maintained, trustworthy site; a pixelated one signals neglect.

Final Checks

After deploying, clear your cache and reload. Favicons are cached aggressively, so if you still see the old icon, try a hard refresh or incognito window before assuming something is broken. A crisp, correctly sized favicon ensures your brand stands out whether the user is scanning 50 tabs or saving your app to their iPhone.

Pro tip: run the PNG files through our free Image Compressor before deploying — every kilobyte counts. Images dominate the modern page budget: the HTTP Archive Page Weight 2024 report puts the median desktop page at 2,652 KB, with roughly 1,054 KB — about 40% — from images alone. Icons are a small slice, but they load on every page, so trimming them is among the cheapest wins available.

Ready to polish your UI? Generate your icons instantly with our 100% free Favicon Generator.