How to Make a Favicon for Website: All Sizes Explained

Learning how to make a favicon for website use is one of the smallest jobs in web design and one of the most visible. A favicon is the tiny icon that appears in the browser tab next to your page title, in bookmarks, in search results on mobile, and on home screens when someone saves your site. Despite being only 16 pixels wide in a tab, it carries your brand identity into every corner of the web experience — and a missing or broken favicon quietly undermines trust.

The good news is that making a favicon is straightforward once you know which sizes to create and how to install them. No Photoshop, no designer needed — just a square logo, a free online tool, and a few lines of HTML. This guide covers it all: what a favicon is, the exact sizes you need in 2026, how to design one that stays readable at 16 pixels, how to generate the full size set in one go, and how to install it so it shows up everywhere it should.

What a Favicon Is and Why It Matters

The word "favicon" comes from "favorites icon" — it originally appeared next to bookmarked pages in early browsers. Today the job of a favicon is much bigger. It shows up in:

• Browser tabs — the 16×16 icon beside your page title, often the only visible branding when a user has twenty tabs open.
• Bookmarks and bookmark bars — users scan icons, not text, when hunting for a saved site.
• Browser history and autocomplete — favicons make your pages stand out in suggestions.
• Mobile search results — Google shows your favicon next to your listing in mobile search, which makes it part of your search appearance.
• Home screens and PWAs — when someone saves your site to a phone home screen, your icon becomes your app's identity.

A generic globe icon or broken-image placeholder tells visitors the site was thrown together. A crisp favicon signals professionalism and helps users find their way back. Browsers request /favicon.ico automatically, and if it is missing, your server logs fill with 404 errors.

How to Make a Favicon for Website Use: The Sizes You Need in 2026

You do not need dozens of files. A modern, complete favicon set is small and predictable:

• favicon.ico (16×16 and 32×32) — the classic format. A single ICO file can contain both sizes. Browsers still request this file first, and it covers tabs and bookmarks in all desktop browsers.
• icon-32.png and icon-16.png (optional PNGs) — PNG versions of the two classic sizes, used when you want to reference each size explicitly in your HTML.
• apple-touch-icon.png (180×180) — the icon iOS and iPadOS use when someone adds your site to the home screen. This single size is all you need for Apple devices; older 57/72/114 sizes are obsolete.
• icon-192.png and icon-512.png — required if your site is a Progressive Web App (PWA), referenced in your web app manifest. 512×512 is also used for the install prompt and splash screens.
• icon.svg (SVG favicon) — a scalable vector icon supported by modern browsers including Chrome, Firefox, and Edge. One tiny SVG file replaces all raster sizes on supporting browsers and stays razor-sharp at any resolution.

That is the complete set: an ICO for universal compatibility, a 180×180 PNG for Apple devices, 192 and 512 PNGs for PWAs, and optionally an SVG for crisp scaling.

Designing a Favicon That Reads at 16px

The hardest part is the design, not the file format. At 16×16 pixels, detail vanishes — your icon must read instantly, like a road sign. Follow these rules:

• Simplify ruthlessly. Use one letter, one symbol, or one bold shape — the most distinctive part of your logo. Drop taglines, thin lines, and gradients.
• Keep strong contrast. Your icon sits on browser chrome that can be light or dark. A bold mark on a solid background square (often your brand color) stays legible in both.
• Test at actual size. Zoom out and look at your design at 16×16 before you publish. If you cannot tell what it is in a tab, simplify further.
• Stay on-brand. Use your brand's primary color and, where possible, the first letter of your brand name — users recognize it instantly next to your title.
• Square canvas, full bleed. Design on a square (at least 512×512) with the mark filling the frame and modest padding so nothing clips.

A common mistake is shrinking the full website logo — text becomes gray mush. Instead, design a derived mark: just the icon part of your logo, or a single letter on your brand color.

How to Make a Favicon for Website Publishing With a Generator

Manually exporting six sizes in three formats is tedious and error-prone. The practical way is to design one high-quality source image and let a tool produce the full set. A dedicated favicon generator takes your square logo and outputs the ICO, PNGs, and SVG in the correct dimensions in seconds.

Here is a concrete example from start to finish. Say your site is Bluebird Bakery and your logo is a small blue bird on a white square:

1. Prepare the source. Export or screenshot the bird mark as a square PNG at 512×512 (or larger). If your source logo is not square, an image resizer can crop and resize it to a clean square first — always start from the highest resolution you have.
2. Upload to the generator. Open the favicon generator and upload the square image. Preview it at small sizes to confirm the bird is still recognizable.
3. Generate the set. Download the complete package: favicon.ico (16+32), icon-180.png for Apple, icon-192.png and icon-512.png for the PWA manifest, and optionally an SVG.
4. Place the files. Put them in your site's root directory (or an /icons/ folder) and note their paths.
5. Wire up the HTML (covered in detail in the next section) and, if you run a PWA, reference the 192/512 icons in your manifest.json.
6. Test live. Open the site in a desktop tab, bookmark it, and add it to a phone home screen. Hard-refresh (Ctrl/Cmd+Shift+R) to bypass cache — favicons are aggressively cached, so a private window gives the honest result.

Under ten minutes. The alternative — hand-exporting every size from a graphics editor and hand-writing the markup — takes far longer and invites mistakes like mismatched dimensions.

Installing Your Favicon on Your Site

Installation means adding <link> tags inside the <head> of your HTML so browsers find every icon. With the icons in the site root, the markup looks like this:

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

A few notes on this markup:

• The sizes="any" ICO line covers legacy browsers that request /favicon.ico automatically — keep the file at that exact path even if your other icons live elsewhere.
• The SVG line goes before the PNG so modern browsers pick the scalable version; older browsers skip unknown types and fall through to the next line.
• apple-touch-icon needs no sizes attribute when you ship the single 180×180 file; iOS picks it up automatically.
• For a PWA, add the 192 and 512 icons to manifest.json under "icons" — the install prompt reads the manifest, not the <head>.
• Set long cache headers on icon files, but rename or version them when you redesign, otherwise returning visitors keep seeing the old icon.

If you use WordPress or Squarespace, you can usually upload the 512×512 source in the site-identity settings and the platform writes the markup for you — but knowing what the tags do lets you verify the result.

Now you know how to make a favicon for website deployment from start to finish: design a bold, simple mark that survives 16 pixels, generate the ICO, PNG, and SVG sizes in one pass, and install them with a handful of <link> tags. A ten-minute job that pays off every time someone glances at their tabs, bookmarks your page, or finds you in mobile search. Do not leave the default globe in place.

FAQ

What is the standard favicon size?

The classic standard is 16×16 pixels, with 32×32 as the companion size — both usually packed into a single favicon.ico file. For full modern coverage, add a 180×180 apple-touch-icon, 192×192 and 512×512 PNGs for PWAs, and optionally an SVG favicon for crisp scaling in modern browsers.

Do I still need favicon.ico in 2026?

Yes. Browsers still request /favicon.ico automatically, and it is the only format guaranteed to work everywhere. Keep a small ICO file at your site root alongside your modern PNG and SVG icons.

Can I use an SVG as a favicon?

Yes, in modern browsers. Chrome, Firefox, and Edge support SVG favicons, which stay perfectly sharp at any size. Always pair the SVG with a PNG or ICO fallback for browsers that do not support it yet.

Why is my new favicon not showing up?

Almost always caching. Browsers cache favicons aggressively. Hard-refresh with Ctrl/Cmd+Shift+R, test in a private window, and check that your <link> tags point to the correct paths. If you redesigned an existing icon, rename the file so returning visitors fetch the new one.