Generate a Favicon in the Right Sizes and Formats

To generate a favicon that stays sharp everywhere, you need a small set of sizes in two formats: a multi-size .ico file for legacy browsers and a handful of PNG files for modern browsers, phones, and home-screen shortcuts. Most sites only need a 16×16, 32×32, and 48×48 ICO, plus PNGs at 180×180, 192×192, and 512×512. Once those files exist, you link them in your HTML and add a small web manifest.

This guide walks you through the whole process in plain language. No design degree required.

What Sizes and Formats Does a Favicon Need?

A favicon is the tiny icon that appears in a browser tab, bookmark list, history, and on a phone’s home screen. Different devices ask for different sizes, and that is why a single 32×32 image is not enough anymore.

Here is a practical set that covers the common cases:

Two formats matter most. The .ico format can bundle several sizes in one file, which is why it is still used as a fallback. PNG is the modern choice for crisp icons because it supports transparency and scales cleanly when the browser shrinks it.

If you are starting from a logo, use a square source image at least 512×512 pixels. Square art avoids stretching, and a large source gives the generator room to produce every smaller size without blur.

Step-by-Step: Generate a Favicon for Every Device

You do not need design software to do this. Follow these steps to generate a favicon set that covers phones, tablets, and desktop browsers.

1. Prepare a square source image. Use your logo or a simple letter mark. Keep it at least 512×512 pixels, and save it as a PNG with a transparent background if you want the icon to sit cleanly on any tab color.

2. Simplify the artwork. At 16×16 pixels, fine details disappear. Thick shapes, strong contrast, and one or two colors read best in a tiny tab. If your logo has small text, consider a simplified version for the favicon.

3. Generate the full set. Open a favicon generator and upload or drag in your square image. The tool should output the ICO file and the PNG sizes from the table above in one pass, so you do not have to resize anything by hand.

4. Download and organize the files. Put every icon in the root of your website, or in a dedicated folder such as /icons/. Keeping them together makes the HTML links easier to manage.

5. Add the link tags to your HTML. Copy the generated tags into the <head> of your pages. The next section shows what they look like.

6. Create a web manifest. The manifest tells Android and other platforms which PNG icons to use. Save it as site.webmanifest and link it from your HTML.

That is the whole workflow. The most common mistake is skipping the PNG sizes and relying only on favicon.ico, which can look soft on high-resolution screens.

Add the Favicon Tags to Your HTML

Place these tags inside the <head> section of your site. Adjust the paths if you stored the files in a subfolder.

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

The sizes="any" attribute on the ICO line tells browsers the file contains multiple sizes. The PNG lines give modern browsers a sharper option, and the Apple touch icon handles home-screen shortcuts on iOS.

Your site.webmanifest file can be short. It only needs the icon entries and a couple of basic fields:

{
  "name": "Your Site Name",
  "short_name": "Your Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

If you use a website builder or CMS, look for a favicon setting in the theme options. Many platforms let you upload the ICO and PNG files directly, and they insert the tags for you.

Check How Your Favicon Looks in Real Browsers

After you publish the files, open your site in a few browsers and look at the tab. Then check these places:

• Bookmark the page and look at the bookmark bar or menu.
• Open the browser history and confirm the icon appears there.
• On a phone, add the site to your home screen and check the shortcut icon.
• Clear your browser cache if an old icon still shows. Browsers cache favicons aggressively, so a hard refresh or a private window helps.

If the icon looks blurry, the source image was probably too small or too detailed. Go back to a larger square source and simplify the shapes. If it looks stretched, confirm the original was square.

Common Favicon Mistakes to Avoid

These small issues cause most favicon problems:

• Using only one size. A single 16×16 icon will look fuzzy on retina screens and on home screens.
• Forgetting the ICO fallback. Some older browsers and tools still request /favicon.ico by default.
• Placing files in the wrong folder. Broken paths are the most common reason a favicon does not appear.
• Adding tiny text. Words in a 16×16 icon turn into a smudge. Use a symbol or a single letter instead.
• Skipping the manifest. Without it, Android may show a generic icon instead of yours.

None of these are hard to fix. A complete icon set and correct paths solve almost every case.

Why a Browser-Based Generator Is the Easiest Option

You can resize images by hand, but it is slow and easy to get wrong. A browser-based tool lets you generate a favicon from one square image and download every size and format in a single step. Because the work happens in your browser, your logo is not uploaded to a server, and there is no account to create.

That makes it a good fit for beginners, side projects, and anyone who wants a correct icon set without installing software.

Ready to make yours? Use the free favicon generator to create your ICO and PNG files, then follow the HTML steps above and your site will look sharp on every device.