FlowingDev

Favicons, explained: the tiny icon with a big job

Learn what favicons are, why you need so many different sizes, and how they help brand your site across browser tabs, home screens, and bookmarks.

Try the tool: Favicon Generator

In one sentence

A favicon is the small icon that represents your website in browser tabs, bookmarks, and mobile device home screens, acting as a tiny, persistent piece of your brand identity.

The problem it solves

Back in the ancient internet times of 1999, Microsoft introduced a feature in Internet Explorer 5 that solved a simple problem: how do you visually distinguish a bookmark in a long list? Their solution was the "favorites icon," or favicon. A web server could provide a file named favicon.ico in its root folder, and IE would display that 16x16 pixel icon next to the bookmark. It was a small but brilliant piece of branding.

Fast forward to today. We don't just have bookmark lists. We have dozens of tabs crammed into a single browser window. We have mobile phones where we "Add to Home Screen," effectively turning a website into an app-like icon. We have different operating systems (iOS, Android, Windows), each with its own ideas about how these icons should look, what size they should be, and what special effects to apply.

The original problem of "identifying a bookmark" has exploded into a much bigger challenge: "How do I maintain a consistent, high-quality brand presence across every possible context where my site's URL might appear?"

Just dropping a single favicon.ico file on your server doesn't cut it anymore. Doing so might get you a fuzzy, pixelated mess on a new iPhone, or a generic letter inside a colored square on Android. The problem a modern favicon strategy solves is this fragmentation. It's about generating a whole suite of icons and the corresponding HTML head tags to ensure your little logo looks crisp, professional, and intentional everywhere, from a 4K desktop monitor to a 6-year-old Android tablet.

How it works under the hood

Creating a "complete" favicon set isn't just resizing one image. It involves different file formats, metadata files, and a bouquet of <link> tags, each born from a different era of the web.

The Granddaddy: favicon.ico

The original format, .ico, is a container, not just an image. Think of it as a ZIP file for pictures. A single favicon.ico file can bundle multiple bitmap images, typically 16x16, 32x32, and 48x48 pixels. This allowed the browser to pick the best resolution for the job—a 16x16 icon for the tab bar, and maybe a 32x32 icon for the Windows taskbar.

For backward compatibility, browsers to this day will often make an unprompted request to /favicon.ico at the root of your domain, even if you don't declare it in your HTML. To declare it properly, you'd use a link tag like this:

<!-- The classic .ico, with `sizes="any"` as a hint that it contains multiple sizes -->
<link rel="icon" href="/favicon.ico" sizes="any" type="image/x-icon">

While .ico is a legacy format, it's still the only way to get an icon to show up in certain contexts, like for users of Internet Explorer (yes, they still exist).

The Apple Touch: A Higher-Res World

When the iPhone was released in 2007, its "Add to Home Screen" feature needed something better than a fuzzy 16x16 pixel icon. Apple's solution was simple and pragmatic: if a user saves a site to their home screen, iOS would look for a PNG file in the site's root named apple-touch-icon.png.

This bypassed the .ico format entirely, using a higher-resolution PNG. Over the years, as screen densities increased (hello, Retina displays!), Apple's requirements grew. Now, to look sharp on all modern iPhones and iPads, you typically provide a 180x180 pixel PNG.

You declare this using a special rel attribute:

<!-- For iPhone, iPad, etc. This is the one that matters most for modern iOS. -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

You might see older code with apple-touch-icon-precomposed.png. This was to tell older iOS versions not to add the default rounded corners and glossy effect. Today, iOS doesn't apply those effects, so the "precomposed" version is effectively obsolete.

The Android & Chrome Way: The Web App Manifest

Instead of inventing yet another proprietary link tag, Google took a more extensible approach with the Web App Manifest. This is a simple JSON file, usually named manifest.json or site.webmanifest, that provides a host of metadata about your web application. It's the cornerstone of Progressive Web Apps (PWAs).

Within this manifest, you define an array of icons of various sizes. Android and Chrome can then pick the most appropriate one for the user's device and context, whether it's a home screen icon, a splash screen, or a notification icon.

First, you link to the manifest in your HTML:

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

Then, the site.webmanifest file itself describes the icons:

{
  "name": "FlowingDev",
  "short_name": "FlowingDev",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

The purpose: "maskable" property is a neat trick. It tells the browser that the icon is designed to work with "safe zones," so Android can crop it into different shapes (like circles or squircles) without cutting off important parts of your logo.

The Modern Twist: SVG Icons

In a perfect world, we'd have one infinitely scalable vector file for everything. That's the promise of using an SVG for your favicon. An SVG icon can be tiny in file size and will look perfectly sharp at any resolution. Browser support for this is now excellent.

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

The coolest part? You can embed a CSS media query directly inside the SVG to make it adapt to the user's system theme.

<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #FFF; }
    }
  </style>
  <path d="..."/>
</svg>

However, you can't rely only on SVG. It doesn't work for apple-touch-icon or in many other legacy contexts. The best practice today is to use an SVG as your primary, high-quality icon and provide PNG and ICO fallbacks for older browsers and platforms.

Real-world stories

The Startup Launch Scramble

A tiny startup, "CodeLeap," was about to launch their new developer tool. The logo, a clever leaping frog, looked great on the site. For the favicon, the founder quickly saved a 32x32 PNG as favicon.ico, dropped it in the root directory, and moved on. The launch was a success. A few days later, a VC they were wooing added their site to her iPhone home screen to check it out on the go. Instead of the crisp frog logo, she saw a blurry, pixelated square that was actually a low-quality screenshot of the webpage. It looked amateurish.

Lesson: First impressions matter everywhere. Forgetting platform-specific icons like apple-touch-icon can undermine your brand's professionalism at a critical moment. You're not just making a website; you're creating a brand asset that lives on users' devices.

The E-Commerce Cart Abandonment Puzzle

An online store, "GadgetGrove," noticed something weird. Users were adding items to their cart but often failing to check out, especially during peak shopping seasons. They had a decent favicon—a green "G" on a white background. The problem? Their main competitor, "GearGalaxy," used a blue "G." In a browser packed with 20 tabs from product comparisons, users were getting confused and accidentally closing the GadgetGrove tab when they meant to close a competitor's. The team generated a new favicon set based on their unique shopping bag logo. It was instantly recognizable. Tab confusion dropped, and users could find their way back to their cart.

Lesson: A favicon is not just decoration; it's a vital navigational micro-tool. In a tab-heavy world, a distinctive and recognizable icon can directly impact user experience and even conversions.

The PWA that Didn't Feel "App-y"

A developer built a fantastic Progressive Web App (PWA) for tracking personal reading habits. It worked offline and was lightning-fast. He encouraged users to "install" it via Chrome's "Add to Home Screen" feature. But when they did, the icon that appeared was a generic letter inside a bland-colored square, automatically generated by Chrome. The app felt less like a "real" app and more like a simple bookmark. User engagement was low. The developer realized he had forgotten the site.webmanifest file. He quickly generated one, complete with high-res icons and a theme color. The next time users installed it, they got a beautiful, branded icon. The perceived quality shot up.

Lesson: For modern web apps, the Web App Manifest and its icons are non-negotiable. They are the bridge between a website and a native-like app experience on a user's home screen.

Common mistakes and traps

  • Starting with a low-res source. If your source image is a 64x64 pixel JPG, all the generated icons will be blurry and artifact-ridden. Always start with the highest resolution source you have, ideally a 512x512 pixel (or larger) square PNG or an SVG.
  • Ignoring transparency. Using a source image with a solid background (like a white square) will result in that square appearing in the browser tab or on a user's home screen. Unless that's your intended design, use a source image with a transparent background.
  • Designing an overly complex icon. A favicon is displayed at minuscule sizes. Your company's full logo with tagline is going to become an unreadable smudge. The best favicons are simple, high-contrast symbols derived from the main logo.
  • Forgetting to clear the cache. This is the #1 cause of developer frustration with favicons. Browsers cache them very aggressively. If you've updated your favicon but aren't seeing the change, don't panic. Force a hard refresh (Ctrl+Shift+R or Cmd+Shift+R), clear your browser cache, or try a different browser to confirm the change went live.
  • Using relative paths when you need absolute ones. The href attribute in your <link> tags should usually be an absolute path from the root of your domain (e.g., /images/favicon-32x32.png, not images/favicon-32x32.png). This ensures it works no matter how deep the current page's URL is.

Why it belongs on your radar

You should think about your favicon strategy the moment you start any web project. It's not a "nice-to-have" flourish to be added at the end; it's a fundamental piece of your site's identity.

A complete and well-executed favicon set:

  • Bolsters your brand. It's often the most frequently seen element of your visual identity.
  • Improves usability. It helps users navigate crowded tab bars and find your site in their history.
  • Signals professionalism. A missing or poorly rendered favicon makes a site feel incomplete or untrustworthy.
  • Enhances the "app" experience. For PWAs, it's the key to looking like a native app on a user's device.

In short, spending ten minutes to generate a proper favicon set is one of the highest-ROI activities you can do for your website's perceived quality and user experience.

Go deeper

Theory done. Time to get your hands dirty — 100% in your browser.

Try the tool: Favicon Generator