Substack

Why Your Favicon Needs So Many Sizes

February 3, 2026

Added a favicon to a site last week. Thought I was done. Then tested it on my phone. Looked like garbage.

Turns out one favicon.ico file isn’t enough anymore.

The Thing That Should Be Simple

A favicon is just that little icon in the browser tab, right? How hard can it be?

Drop a 16x16 pixel image in your root directory, call it favicon.ico, done.

That worked in 2005. Doesn’t really work now.

Where Favicons Actually Show Up

Took me actually looking around to realize how many places these icons appear:

  • Browser tabs - The obvious one. 16x16 pixels usually.

  • Bookmarks bar - Also small, but sometimes 32x32 on high-DPI screens.

  • iOS home screen - 180x180 pixels. If you save a site to your iPhone home screen, it uses this.

  • Android home screen - 192x192 pixels. Same idea, different size.

  • Windows tiles - Remember when Windows 8 had those start screen tiles? Some apps still use them. 144x144 pixels.

  • Browser new tab page - Some browsers show larger icons. 192x192 or bigger.

  • Task switcher on mobile - That view where you see all your open apps. Uses larger icons too.

One size doesn’t fit all these contexts. A 16x16 icon scaled up to 180x180 looks blurry and bad.

My First Attempt

Found an icon I liked. Saved it as favicon.ico. Put it in the root.

<link rel="icon" href="/favicon.ico">

Looked fine on desktop. Checked my phone. The home screen icon was a tiny 16x16 image stretched to fill a 180x180 space. Pixelated mess.

Oh. Need more sizes.

The Apple Touch Icon Thing

iOS has its own icon system. Completely separate from regular favicons.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

This is what shows up when someone saves your site to their iPhone home screen.

It needs to be 180x180 pixels. PNG format. Apple applies the rounded corners automatically, so give it a square image.

Without this tag, iOS will use your regular favicon and scale it up. Looks bad.

You can specify multiple sizes:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">\n<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png">\n<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png">

Older iOS devices use the smaller sizes. Modern ones use 180x180. Honestly? Just provide the 180x180 one. Older devices will scale it down, works fine.

The Android Situation

Android uses a web app manifest file.

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

Link it in your HTML:

<link rel="manifest" href="/site.webmanifest">

Android looks for icons in the manifest. If you want a nice icon when users add your site to their home screen, you need this.

512x512 seems huge. But it’s for splash screens and higher resolution displays. Scales down well for actual home screen icons.

The Microsoft Tile Thing

Windows used to have those colorful tiles on the start screen. Some browsers still support them.

<meta name="msapplication-TileColor" content="#da532c">\n<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Do you need this? Probably not anymore. Windows 11 doesn’t really use tiles like that. But if you’re being thorough, include it.

SVG Favicons (The New Thing)

Modern browsers support SVG favicons.

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

This is nice because one file works at any size. Scales perfectly. No blurriness.

Browser support is good now. Works in Chrome, Firefox, Safari (as of Safari 14+).

The catch: Not all contexts support SVG. iOS home screen icons? PNG only. Android? PNG only.

SVG works great for browser tabs and bookmarks. But you still need PNG files for mobile home screens.

What I Actually Use Now

After trying everything, here’s the minimal setup that actually works:

  • favicon.ico (32x32, with 16x16 embedded)
    For browser tabs and bookmarks. Old-school but still works everywhere.

  • favicon.svg
    Modern browsers use this. Scales perfectly.

  • apple-touch-icon.png (180x180)
    For iOS home screen.

  • Two Android icons via manifest
    192x192 and 512x512 in site.webmanifest.

HTML looks like:

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

This covers 99% of use cases. Desktop browsers, mobile home screens, high-DPI displays.

The Tools That Help

Generating all these sizes manually? Annoying.

Used a tool called RealFaviconGenerator. Upload one image, it spits out all the sizes and code you need.

There’s also Favicon.io, simpler but does the job.

Or if you have ImageMagick installed:

convert icon.png -resize 180x180 apple-touch-icon.png\nconvert icon.png -resize 192x192 android-chrome-192.png\nconvert icon.png -resize 512x512 android-chrome-512.png

Not hard once you know what sizes you need.

The Dark Mode Consideration

Some browsers support dark mode favicons now.

<link rel="icon" href="/favicon-light.svg" type="image/svg+xml" media="(prefers-color-scheme: light)">\n<link rel="icon" href="/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)">

Your icon can adapt to the user’s system theme. Nice touch if your brand colors support it.

Not essential. Most sites don’t do this. But it’s possible.

Why Browsers Don’t Just Scale

Why can’t browsers take one image and scale it as needed?

They do. That’s the fallback. But scaling a tiny 16x16 icon up to 180x180 looks bad. Detail gets lost. Edges blur.

Vector graphics (SVG) scale well. But not all contexts support them yet.

So we provide multiple sizes. Browsers pick the best one for each context. Your 16x16 icon stays crisp in browser tabs. Your 180x180 icon looks good on home screens.

It’s a quality thing.

The Caching Headache

Changed your favicon? Browser might not show the new one immediately.

Favicons are cached aggressively. Sometimes for weeks.

Hard refresh doesn’t always clear it. Sometimes you need to actually clear browser cache.

This is why testing favicons is annoying. Make a change, can’t see it, wonder if your code is wrong. Nope, just cached.

One workaround: Add a query string.

<link rel="icon" href="/favicon.ico?v=2">

Change the version number when you update the icon. Forces browsers to fetch the new one.

Do You Really Need All This?

Depends on your site.

Personal blog? Just favicon.ico and maybe an apple-touch-icon.png. Good enough.

Professional site? Company product? Add the full set. Users saving your site to home screens should get a nice icon.

The minimal viable setup:

<link rel="icon" href="/favicon.ico">\n<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Two files. Covers browser tabs and iOS home screens. Android will fall back to the apple-touch-icon if no manifest exists.

Everything else is polish.

What Actually Matters

Having some favicon is better than having none. Even if it’s just favicon.ico.

Sites without favicons show a generic browser icon or blank space. Looks unfinished.

Having a crisp, properly-sized icon for different contexts? Better user experience. More professional.

But don’t obsess over it. Get the basics right (favicon.ico, apple-touch-icon.png) and move on. Perfect favicons don’t make or break your site.

The Thing I Learned

Favicons seem simple until you care about them showing up well everywhere.

Then it’s suddenly six different files in four different formats.

Not hard to set up once you know what you need. Just more involved than “drop a 16x16 ico file in the root.”

Mobile changed everything. Desktop only needed one tiny icon. Mobile home screens need high-resolution images. So now we have this whole system.

It’s fine. Just takes a minute to set up properly.

The Quick Checklist

If you want proper favicons:

  1. Create a square icon (512x512 works as a source)

  2. Generate favicon.ico (16x16 and 32x32)

  3. Create apple-touch-icon.png (180x180)

  4. Create android icons (192x192 and 512x512)

  5. Optionally create favicon.svg for modern browsers

  6. Link them all in your HTML

  7. Test on desktop and mobile

Or use a generator tool and skip the manual work.

Either way, your site will have proper icons everywhere users expect them.

Thanks for reading Under The Hood! Subscribe for free to receive new posts and support my work.