How to make a favicon: multi-size ICO, PNG and mobile icon specs

Which sizes belong in favicon.ico, why you should also ship an SVG and a 180×180 touch icon, and why the tab icon sometimes shows as a blank block—all explained here.

Format conversion Author tdd8.cn

The favicon is the smallest detail that most affects how a site feels: a white square in the tab, a blurry block in bookmarks, a cropped ring after adding the site to a phone home screen.

1. How many sizes go inside the ICO

The classic answer is 16x16, 32x32 and 48x48 in one ICO. Two more make it robust today: 64x64 for high-DPI screens and 256x256 for the large Windows icon view. Image to ICO takes a 512x512 PNG and generates the multi-size ICO in one step.

2. Does more sizes mean a bigger file

Not noticeably. Real favicons with embedded PNGs total 20-60 KB across sizes; anything over 100 KB is unoptimised. Browsers only read the size they need, so extra entries cost nothing at runtime -- but uncompressed bitmaps in every size quickly add up.

3. The four files a modern site needs

  • favicon.ico in the site root (old browsers and RSS readers request this path directly);
  • favicon.svg for modern browsers: vector, sharp at any size, and can respond to dark mode;
  • apple-touch-icon.png at 180x180 for iOS home screens, without rounded corners -- the system rounds them itself;
  • og-cover.png at 1200x630 for social previews, which is a separate job from the favicon.

4. Why a white square appears

The usual cause is a white or very light mark with no background colour: on a white tab bar it simply vanishes. Give the icon a dark or brand-coloured background, or make it a solid shape. The test is whether it is still recognisable at 16x16 -- design at 16 px first, then add detail.

5. Dark mode

An SVG icon can switch fill colours with a media query:

<style>
  @media (prefers-color-scheme: dark) {
    .bg { fill: #0b1220; }
  }
</style>

That way it does not turn into a smudged dark blob in a dark tab bar.

6. Changes that do not show up

Favicon caches are stubborn: browsers, CDNs and OS icon caches each keep a copy. Verify in a private window first, then consider renaming the file (for example favicon-v2.ico) and updating the HTML references.

FAQ

Must the favicon be named favicon.ico?

Keep that filename at root, and use a versioned link tag for both compatibility and caching.

How many images in one ICO?

It can hold many sizes—dozens of tiers—but 5 tiers are enough in practice.

Can PNG be used as favicon directly?

Modern browsers support it, but old browsers and some readers only accept ICO; ship both for safety.

Tools used in this guide

To ICOMake a favicon ResizeScale by pixels or percent Convert FormatSwitch between major formats
What are TIFF and AVIF, and when should you convert to JPG

TIFF is the standard for print and scanning; AVIF is a new high-compression format—both often fail to open in browsers and chat apps. This article covers when to use each and how to avoid quality/color drift when converting to JPG.

 Video to GIF: how to set frame rate, size and file weight

The most common video-to-GIF failure is a tens-of-MB file you can't send. This article uses concrete numbers to show how frame rate, width and duration combine to set GIF size, with different presets for chat emojis vs tutorial clips.

 Splitting and extracting PDFs: break a long file into single pages

You only need a few pages of a long PDF, or want each scanned page as its own file. This article explains page split vs extract, how to merge back, and scan-splitting caveats.