Creating Favicons That Look Good Everywhere

Look, I know favicons seem like an afterthought. They're those little 16x16 pixel squares that show up in browser tabs, bookmark bars, and sometimes your phone's home screen. But here's the thing — a good favicon can make your site feel professional, while a bad one (or worse, none at all) makes you look like you forgot to finish setting up.

And the requirements have gotten way more complicated. It's not 2005 anymore — you can't just drop a single favicon.ico in your root folder and call it a day. Now you've got high-DPI displays, dark mode, PWAs, iOS shortcuts, Android home screens, and who knows what else.

So let's fix that. Here's how to create favicons that actually work everywhere.

Start with a high-resolution source

The biggest mistake people make is starting too small. If you design your favicon at 16x16 and then try to scale it up for a home screen icon, it's going to look terrible.

Start big. Like, 512x512 or even 1024x1024. Design at high resolution, then scale down. It's way easier to make a big image smaller than to make a small one bigger without looking like garbage.

And keep it simple. At 16x16 pixels, you have exactly 256 pixels to work with. That's not enough room for intricate details, gradients, or tiny text. Think logo mark, not full wordmark. Think Nike swoosh, not your entire company name in 6-point font.

The sizes you actually need

Here's the current state of favicon chaos (as of 2026):

• 16x16 and 32x32 — classic browser tab icons
• 180x180 — Apple Touch Icon (when someone saves your site to their iPhone home screen)
• 192x192 and 512x512 — Android home screen and PWA icons
• SVG — scalable vector favicon (works great in modern browsers)

Yeah, it's a lot. But you don't need to design each one from scratch — you design once at high resolution, then resize your image to each target size.

Most modern browsers will use the SVG version if you provide one (which is great because it scales perfectly to any size). But you still need PNG and ICO fallbacks for older browsers, apps, and services that don't support SVG.

The classic favicon.ico file

Some people will tell you favicon.ico is dead. They're wrong.

Sure, modern browsers don't require it. But tons of services — RSS readers, old email clients, bookmark managers, random third-party tools — still look for /favicon.ico by default. If it's not there, they show a broken image or generic globe icon.

So just make one. Take your 32x32 PNG, convert it to ICO format, and drop it in your site's root folder. Done.

(And yes, ICO files can contain multiple sizes embedded in one file — 16x16 and 32x32 together. But honestly, just a 32x32 is fine.)

Apple Touch Icons are their own thing

When someone saves your site to their iPhone or iPad home screen, iOS looks for an apple-touch-icon. If you don't provide one, it takes a screenshot of your webpage. Which usually looks terrible.

Apple wants a 180x180 PNG. No transparency (it gets ignored). Square with rounded corners applied automatically. Here's the HTML:

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

And here's the fun part — if you don't specify a size, iOS will look for one at exactly 180x180. If you provide multiple sizes, iOS picks the closest match. But honestly, just give it one at 180x180 and move on.

SVG favicons (the future, probably)

SVG favicons are great in theory. They scale to any size perfectly, work beautifully on high-DPI screens, and can even adapt to dark mode with embedded CSS.

But browser support is still spotty. Chrome and Firefox? Sure. Safari? As of iOS 17, yes. Edge? Yep. Internet Explorer? No, but who cares.

If your logo is simple and vector-based, an SVG favicon is worth adding:

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

Just remember to include PNG fallbacks for older browsers. Browsers that don't support SVG will ignore it and fall back to your ICO or PNG versions.

Dark mode favicons (yes, really)

So you've got a dark favicon on a white background. Looks great in light mode. But when someone switches their browser to dark mode, your black logo disappears into the black tab bar.

SVG favicons can adapt to dark mode using CSS media queries. Like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M32,10 L54,54 L10,54 Z"/>
</svg>

But if you're using PNG icons, you're stuck. Some sites solve this by having two separate favicon sets and swapping them with JavaScript when dark mode is detected. But honestly, that's overkill for most sites. Just make sure your icon has enough contrast to work on both light and dark backgrounds.

Testing across devices (the annoying part)

Here's the annoying truth: favicons are cached aggressively. Change your favicon, reload the page, and... nothing. Still showing the old one.

Why? Browsers cache favicons separately from page content. Sometimes for weeks. Even hard-refreshing doesn't always clear it.

To actually test your new favicon:

• Open an incognito/private window
• Clear your browser cache completely
• Use a different browser you haven't visited the site on before
• Check on your phone (both iOS Safari and Android Chrome)
• Save the site to your home screen and see how it looks there

And if you're pushing a new favicon to production, expect complaints from users who still see the old one for days. That's just how it works.

The HTML you need

Okay, so you've got your images ready. Here's the bare minimum HTML to cover everything:

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

And inside manifest.json (for PWAs and Android home screen icons):

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

That's it. Four lines of HTML and a JSON file. Covers every major browser and device.

Common mistakes to avoid

Using transparency when you shouldn't. Some platforms (like iOS home screen icons) ignore transparency and replace it with black or white. If your icon relies on transparency, it might look broken.

Making it too detailed. At 16x16 pixels, every pixel counts. Intricate logos with thin lines or small text turn into an unreadable blob.

Forgetting about retina displays. If you only provide low-res icons, they'll look blurry on modern high-DPI screens. Always provide higher resolution versions.

Not testing on actual devices. Your favicon might look great on your desktop browser but terrible when saved to an iPhone home screen. Test everywhere.

Tools that actually help

You don't need to manually resize and convert every favicon size. Use image resize tools to generate all the sizes from your high-res source, then convert your PNG to ICO for the classic favicon.ico.

There are also favicon generator services that take your source image and spit out all the sizes and HTML you need. But honestly, once you understand what's needed, doing it yourself gives you more control and better results.

And if you're working with SVG source files, just export your logo as SVG and use that directly as your favicon. No conversion needed.

Final thoughts

Favicons are one of those tiny details that most people don't notice when they're done right — but definitely notice when they're missing or broken.

Start with a simple, high-contrast design at high resolution. Scale down to the sizes you need. Provide both modern (SVG) and legacy (ICO) formats. Test on actual devices. And don't overthink it.

Your favicon won't make or break your website. But it's one of those little touches that shows you care about the details. And those details add up.