Favicon Tutorial: From One Image to Every Required Size

Favicon Tutorial: From One Image to Every Required Size

You have a logo file, a website that needs a favicon, and no clear idea which sizes actually matter. This favicon tutorial walks you through the whole job: what a favicon is, which dimensions browsers and devices request, how to produce each one from a single source image, and how to wire the files into your HTML so nothing 404s in the console.

A favicon is the small icon that appears in a browser tab, in bookmarks, in history lists, and on mobile home screens when someone saves your site. It is a tiny piece of branding, but it is also a technical asset with real constraints on size, format, and placement. Get it wrong and you get a blank square next to your page title.

What a Favicon Actually Is

The word favicon comes from "favorites icon," a name that dates back to the era when browsers only used it to mark bookmarked pages. Today the same concept covers several distinct files. Browsers, operating systems, and app launchers each ask for their own preferred format.

The file most people mean is favicon.ico, a container that can hold multiple raster images at different resolutions. Alongside it sit PNG files, an SVG for scalable rendering, and a web app manifest that points mobile devices to larger icons. Treat these as one asset family, not competing options.

Definition matters here. A raster image is a grid of pixels that blurs when scaled up. A vector image is a set of mathematical shapes that stays sharp at any size. Icons need both, because some platforms only accept raster and others prefer vector.

Which Favicon Sizes Do You Actually Need?

You need a 32x32 PNG or ICO for browser tabs, a 180x180 PNG for Apple touch icons, 192x192 and 512x512 PNGs for Android and web app manifests, and a 16x16 version for legacy and low-DPI contexts. Add an SVG for modern browsers that scale the icon cleanly. That set covers virtually every request a real visitor generates.

That is the short answer. The longer answer is that you should generate the full set rather than guessing which browser will ask for what. Requests for missing favicon sizes are among the most common 404 errors in server logs, and they are entirely avoidable.

The Full Favicon Size Chart

Here is the working set most sites should produce. Names in the right column match the conventions browsers expect.

You do not need to hand-craft each entry. Start from one high-resolution square image, then downscale. The critical rule is to begin large. Upscaling a 32x32 icon to 512x512 produces a blurry mess that no amount of sharpening fixes.

How to Create a Favicon Set From One Image

Follow these steps in order. The whole process takes a few minutes once your source image is ready.

1. Prepare the source. Use a square image at 512x512 or larger. Crop away empty margins so the mark fills the frame. Simple shapes survive downscaling; fine text and thin strokes do not.
2. Check the small size first. Shrink a copy to 32x32 and look at it. If the icon becomes an unrecognisable smudge, simplify the design before going further. This single check saves the most time.
3. Generate each required size. Produce 16x16, 32x32, 48x48, 180x180, 192x192, and 512x512 versions. Keep them in one folder with predictable names such as favicon-32x32.png.
4. Build the ICO container. Combine the 16x16, 32x32, and 48x48 images into a single favicon.ico. Older browsers read this file and pick the resolution they want.
5. Export an SVG if you have one. If your mark exists as vector artwork, export it as favicon.svg. Skip this step rather than tracing a raster logo by hand.
6. Place the files. Put everything in your site root, or in a dedicated /icons/ directory if you prefer tidier structure.
7. Add the HTML. Reference each file with a link tag in your document head, as shown below.
8. Verify in the browser. Load the site, check the tab, then open developer tools and confirm no favicon requests returned a 404.

A browser-based image tool can handle steps three and four without installing desktop software. It resizes the source image and exports the ICO container locally in your browser, so the file never leaves your machine.

Favicon HTML Link Tags Explained

Your document head needs a small block of link elements. Each one tells the browser which file to use in which context.

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

The sizes="any" attribute on the ICO line tells browsers the container holds multiple resolutions, so they can choose. The manifest file handles the 192x192 and 512x512 entries for Android.

Order matters less than presence. A browser picks the first format it understands, so listing the SVG before the PNG gives modern browsers the sharper option while older ones fall through to raster.

How to Add a Favicon to a Website Without Breaking Caching

Browsers cache favicons aggressively. After you replace a file, visitors may keep seeing the old icon for hours or days. This is normal and not a bug in your setup.

The reliable fix is to change the filename or add a version query string, such as favicon-32x32.png?v=2. That forces a fresh fetch. Do not rely on a hard refresh alone, because it only clears the cache for you, not for your visitors.

If you use a content delivery network, purge the icon paths after deploying. Confirm the change with a private browsing window, which starts with an empty cache.

How to Make a Favicon for Mobile Home Screens

When someone adds your site to a phone home screen, the operating system uses a larger icon than the browser tab does. On iOS the relevant file is a 180x180 PNG referenced with rel="apple-touch-icon". On Android the web app manifest supplies the 192x192 and 512x512 entries.

Two practical notes. First, avoid transparency in touch icons, because some platforms composite them against an unpredictable background. Second, do not add rounded corners yourself. The operating system applies its own mask, and pre-rounded artwork ends up double-cropped.

Test by actually saving the site to a home screen. Emulators approximate the result, but the real device is the only reliable check.

Favicon Formats Compared: ICO, PNG, and SVG

Each format exists for a reason, and the right answer is usually to ship all three.

• ICO holds several raster sizes in one file. Legacy browsers expect it at the site root. Keep it even though modern browsers rarely need it.
• PNG is the workhorse. It supports transparency, compresses well, and every platform reads it. Use it for every fixed size from 16x16 upward.
• SVG is vector, so it stays crisp at any zoom level. Support is broad but not universal, which is why it complements rather than replaces PNG.

If you can only manage one file, ship the ICO with 16x16 and 32x32 inside it. That covers the browser tab, which is where nearly all visitors see your icon. Everything else is refinement.

Common Favicon Mistakes to Avoid

The most frequent error is starting too small. A 64x64 source cannot produce a clean 512x512 icon, and the blur is obvious on a phone home screen.

The second is forgetting the site root. Browsers request /favicon.ico by default even when you have not declared it. If the file is missing, the request 404s and some crawlers log it as an error.

Third, do not use a detailed illustration as an icon. At 16x16 you have 256 pixels total. A single letter, a simple geometric mark, or a bold monogram survives that reduction. A photograph does not.

Finally, check contrast. Icons sit on both light and dark browser themes. A mark that only works on white will vanish for half your visitors. Test both, and add a subtle outline or background shape if needed.

Frequently Asked Questions

What size should a favicon be?

32x32 pixels is the standard size for browser tabs, and it is the one most visitors see. Produce a 180x180 PNG for touch icons, 192x192 and 512x512 for Android, and a 16x16 version for legacy contexts. An SVG covers scalable uses if you have vector artwork available.

Can I use a PNG instead of an ICO file?

Yes, and modern browsers prefer it. PNG supports transparency and compresses well at small sizes. Keep a small ICO file anyway, because some older browsers and feed readers still request /favicon.ico at the site root by default, and a missing file produces a 404 in your logs.

Why is my favicon not showing up?

Caching is the usual cause. Browsers store favicons for a long time, so an updated file may not appear immediately. Rename the file or append a version query string, then check in a private window. Also confirm the file sits at the correct path and that the link tag has no typo.

Do I need an SVG favicon?

Not strictly, but it helps. An SVG stays sharp on high-resolution displays and at any zoom level, which raster files cannot match. Support is broad across current browsers, and you lose nothing by including one alongside your PNG set as a fallback for older software.

Does a favicon affect search rankings?

Not directly. Search engines do not use favicons as a ranking factor. They do appear in some search result listings, which can improve recognition and click-through. Treat the favicon as a branding and usability asset rather than an optimisation tactic.

Wrapping Up

A complete favicon set is a small amount of work with a clear payoff: no broken icon requests, a tab that looks intentional, and a home screen shortcut that does not embarrass you. Start from one large square image, generate the sizes in the chart above, wire them into your head with the right link tags, and verify in a private window.

That is the whole of this favicon tutorial. One source image, a handful of exports, and a few lines of HTML cover every context your visitors will encounter. If you want to resize and package the files without installing anything, the available utilities run entirely in your browser.