How to Make a Favicon for Free (All Sizes)

A favicon is the tiny icon that represents your website in a browser tab, a bookmark, the history list, and the home-screen shortcut on a phone. It is small, but it does a lot of work: it makes your site recognizable among a dozen open tabs and signals that the site is polished and cared for. The problem is that a modern favicon is no longer a single file. Browsers, iOS, Android, and installable web apps all expect different sizes, and getting them all right by hand is tedious.

The good news is that you can generate the entire icon pack for free from one image, without paying for software or handing your logo to a server. This guide explains exactly which sizes you need in 2026, how to design an icon that still reads at 16 pixels, and how to use an in-browser favicon generator to turn any logo into a ready-to-ship set of files, complete with the HTML you paste into your site.

What Exactly Is a Favicon?

The word favicon is short for "favorites icon," a name that dates back to when browsers used it for the bookmarks (favorites) menu. Today it appears in far more places: the browser tab, the address-bar suggestions, the bookmarks bar, the browser history, search-engine results in some cases, and the icon saved to a phone's home screen when someone installs your site as an app.

Because it shows up everywhere from a 16-pixel tab to a 512-pixel splash screen, a favicon is really a family of images at different resolutions, all derived from the same design. Your job is to create one strong source image and then export it at every size a device might ask for.

The Favicon Sizes You Need in 2026

You do not need dozens of oddball sizes anymore. Modern browsers and platforms have settled on a compact, reliable set. Here is what a complete favicon pack looks like today:

For desktop browsers

• 16x16 — the classic browser-tab size, still the most-seen resolution.
• 32x32 — used for high-DPI (Retina) tabs, the taskbar, and pinned sites.
• 48x48 — used by some browsers and desktop shortcuts for a slightly larger view.
• favicon.ico — a single multi-resolution file (usually bundling 16, 32, and 48) that older browsers request automatically from the site root.

For phones and web apps

• 180x180 — the apple-touch-icon, used when someone adds your site to the iOS home screen.
• 192x192 — the standard Android and Progressive Web App (PWA) home-screen icon referenced from the web manifest.
• 512x512 — the large PWA icon used for splash screens and app listings.

If you cover those, you are set for every mainstream device in 2026. A good generator produces all of them in one pass, so you never have to resize each one manually. If you do want to prepare a source image yourself first, you can resize your image to a clean square before generating the pack.

Design Tips for an Icon That Works at 16 Pixels

The single biggest mistake people make is trying to shrink their full logo, wordmark and all, into a 16-pixel box. At that size, text turns into an unreadable smudge. Treat the favicon as a distilled symbol, not a miniature version of your logo.

• Keep it simple. One shape, letter, or symbol. Remove taglines, fine lines, and small details that vanish when scaled down.
• Go bold and high-contrast. Thick strokes and strong color separation survive downscaling; thin hairlines disappear.
• Make it recognizable at 16px. Preview your design tiny before committing. If you cannot tell what it is, simplify further.
• Use a transparent background. Start from a transparent PNG so the icon sits cleanly on light or dark browser themes.
• Fill the frame. Leave only a little padding so the symbol is as large as possible within the square.
• Pick a distinctive color. A bold accent color helps users spot your tab instantly.

If your logo is round or you want a circular badge, you can circle crop the source image first, then feed the result into the generator so every size keeps the same shape.

Step by Step: Make the Full Icon Pack for Free

Here is the fastest way to go from a single logo to a complete set of favicon files using the in-browser generator. Everything happens locally in your browser, so your image is never uploaded to a server.

1. Prepare a square source image at high resolution, ideally 512x512 or larger, saved as a transparent PNG. The bigger and cleaner the source, the sharper every exported size will be.
2. Open the favicon generator and drag your image onto the drop area (or click to select a file). Nothing leaves your device.
3. Preview how the icon looks at small sizes. If details get lost, go back and simplify the artwork, then re-import it.
4. Let the tool render every required size: 16x16, 32x32, 48x48, 180x180, 192x192, and 512x512, plus a multi-resolution favicon.ico.
5. Download the full pack as a single ZIP file and unzip it into your project.
6. Copy the generated icon files into your site's public root (so favicon.ico is reachable at yoursite.com/favicon.ico) or your assets folder.
7. Add the HTML link tags (below) to the of your pages, adjusting the file paths to match where you placed the files.

The HTML Link Tags to Add

Browsers do not automatically discover every icon. You declare them in the document head so each device picks the right file. A complete, modern set looks like this:

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

The 192x192 and 512x512 PWA icons are referenced from the web manifest file (site.webmanifest) rather than a link tag, inside its icons array. Most generators produce a ready-made manifest so you only need to include the single manifest link shown above.

.ICO vs PNG vs SVG: Which Format for What

You will encounter three formats, and each has a role:

• favicon.ico is a legacy container that can hold several sizes in one file. Browsers request it from the site root by default, so it remains the best universal fallback for older software.
• PNG is the modern workhorse. It supports crisp transparency and is what you reference for the specific 16, 32, 180, 192, and 512 sizes. It is smaller and sharper than an equivalent .ico.
• SVG is a single vector file that scales to any size and can even adapt to light or dark mode with a little CSS. Most current browsers support an SVG favicon, but not all, so ship it alongside the .ico and PNG fallbacks rather than instead of them.

A robust setup in 2026 offers all three: an SVG for modern browsers, PNGs for specific device sizes, and a favicon.ico as the catch-all.

Testing Your Favicon

After deploying, do not trust the first thing you see, because browsers cache favicons aggressively. Verify it properly:

• Load your site in a fresh tab or a private/incognito window to dodge the cache, then check the tab icon.
• Do a hard refresh, and if the old icon lingers, clear the browser cache or visit yoursite.com/favicon.ico directly to confirm the file loads.
• Add the site to a phone home screen to confirm the apple-touch-icon and PWA icons render at full size.
• Bookmark the page and check the bookmarks bar and history entries.
• Confirm the icon still looks clear on both a light and a dark browser theme.

Free, Private, and In Your Browser

Making a favicon used to mean juggling image editors or trusting an online service with your brand assets. Today you can generate the whole pack in seconds, for free, with everything running 100% in your browser so nothing is ever uploaded. Start with one clean, bold, square image, run it through the favicon generator, drop the files into your site, and paste in the link tags. Your site will look sharp in every tab, bookmark, and home screen your visitors use.