If you check your server logs right now, you will almost certainly find a steady stream of 404 errors for a file named /favicon.ico. You might have deployed a pristine, modern SVG icon for your site, but browsers, RSS readers, and web scrapers are still blindly requesting a file extension that debuted with Windows 1.0. Getting the ico file format explained is a rite of passage for web developers, because understanding what this file actually is completely changes how you build your site's branding.

The ICO File Format Explained: It Is Not an Image

The biggest misconception about the ICO format is that it is a standard image file like a JPEG or a GIF. It is not. An ICO file is a container. Think of it like a tiny, uncompressed ZIP archive specifically designed to hold multiple versions of the exact same icon at different resolutions and color depths.

When a browser or operating system downloads your ICO file, it doesn't just render the whole thing. It reads the file's internal directory, looks at the available sizes (like 16x16, 32x32, or 48x48), and selects the specific payload that best matches the user's current display scale. This is why a single ICO file can look perfectly crisp on a low-resolution monitor and equally sharp on a high-DPI Retina display.

The Internal Byte Structure

To truly understand how this works, we need to look at the raw bytes. Every ICO file starts with a strict 6-byte header:

Immediately after this header is the image directory. For every image you packed into the file, there is a 16-byte entry detailing its width, height, color palette, and the exact byte offset where the actual image data begins. If you want to dive deeper into packing these correctly, I highly recommend reading our guide on creating a multi size favicon ico.

How Transparency Actually Works in ICOs

Before the widespread adoption of the alpha channel, creating a transparent background in an ICO file required mathematical sorcery. Legacy ICO files used two separate bitmaps to render an image: the XOR mask and the AND mask.

The AND mask told the system which pixels should be transparent (by applying a bitwise AND operation with the background), while the XOR mask contained the actual color data. If you messed up the mask generation, your icon would render with a hideous black or white box around it. Thankfully, since Windows Vista, the ICO container was updated to support embedded PNG files. Modern ICOs simply wrap standard 32-bit PNGs (which include an 8-bit alpha channel), completely bypassing the old XOR/AND mask nightmare.

Real-World Example: Why GitHub Still Uses It

Look at GitHub's network traffic. They serve a highly optimized SVG icon for modern browsers. Yet, if you navigate to https://github.com/favicon.ico, you will find a multi-resolution ICO file sitting right at the root of their domain.

They do this because the web is incredibly fragmented. Enterprise environments running outdated intranet browsers, command-line tools like curl, and various search engine crawlers are hardcoded to look for that exact file at that exact path. If you don't provide it, your server wastes resources serving 404 pages, and your brand appears broken in legacy environments. You don't even need to declare it in your HTML if it lives at the root.

The Modern Implementation Strategy

You should never try to build an ICO file by simply renaming a .png file to .ico. Browsers are smart enough to read the file signature and recover from this mistake, but older desktop applications will crash. Instead, you need to properly compile the container.

<!-- Modern browsers get the SVG -->
<link rel='icon' type='image/svg+xml' href='/icon.svg'>
<!-- Legacy browsers fall back to the ICO -->
<link rel='icon' type='image/x-icon' href='/favicon.ico'>

Notice the type='image/x-icon' attribute. This tells the browser exactly what to expect. If you are starting with a modern vector file, you should use a dedicated SVG to ICO converter to ensure the internal directory structure is written correctly.

Best Practices for 2026

Keep your ICO file lean. I frequently see developers stuffing 512x512 PNGs into their ICO containers, resulting in a 300KB file that blocks the initial page load. This is terrible for performance.

Your ICO file only needs three sizes: 16x16, 32x32, and 48x48. Anything larger should be handled by your Web App Manifest or Apple Touch Icons. By limiting the ICO to these three legacy dimensions, you keep the file size under 15KB while maintaining 100% compatibility with every system built in the last thirty years. Use Mzu favicondl to automatically generate this optimized container, and you will never have to worry about bitwise masks or broken server logs again.