Favicon.ico Generator

What is favicon.ico?

favicon.ico is the original favicon. Internet Explorer 5 introduced it in 1999 by requesting a file with that exact name from the root of every site, and every browser since has kept doing the same when a page does not say otherwise. That is why a missing favicon.ico shows up as a stream of 404 errors in server logs even on sites that never linked one.

Unlike PNG, an ICO file is a container. It holds a small directory followed by one or more images, and the reader picks whichever image is closest to the size it needs. The layout is simple enough to read by hand:

Older ICO files store each image as an uncompressed bitmap. This generator stores PNG data inside the container instead, which Windows has supported since Vista and every current browser reads. The result is the same icon at a fraction of the size.

ICO, PNG or SVG: which to use when

You rarely choose just one. Each format covers a different set of clients:

The full comparison, with browser quirks for each format, is in ICO vs PNG vs SVG.

Recommended ICO sizes

• 16×16 — the browser tab and bookmarks bar on standard screens. Always include it.
• 32×32 — the same places on high-DPI screens, plus the Windows taskbar. Always include it.
• 48×48 — Windows site shortcuts and Explorer's medium icon view. Include it; it costs very little.
• 64×64 — optional; helps on Windows at 150–200% display scaling.

Each layer is a separate drawing, so check the enlarged 16 and 32 px previews in the tool. If the 16 px version is muddy, you can untick it: readers then scale the 32 px layer down, which is sometimes cleaner for detailed logos. For a desktop application icon with 128 and 256 px layers, use the PNG to ICO converter, which offers the full range of Windows sizes.

Browser and platform support

How to install favicon.ico

Upload the file to the root of your site so that https://yoursite.com/favicon.ico opens it. Then add this line to your <head>:

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

Many older guides write sizes="any" here. Avoid it: Chrome reads “any” as a scalable icon and then picks the ICO over a sharper PNG or an SVG favicon declared on the same page.

Most servers already send the right content type for .ico. If yours sends application/octet-stream or text/plain, some browsers refuse the icon. Fix it and allow caching:

# Apache (.htaccess)
AddType image/x-icon .ico
<Files "favicon.ico">
  Header set Cache-Control "public, max-age=604800"
</Files>

# nginx
location = /favicon.ico {
    types { image/x-icon ico; }
    add_header Cache-Control "public, max-age=604800";
    log_not_found off;
}

On a framework, put the file where it is served from the root: public/ for Vite and Create React App, app/ or public/ for Next.js, static/ for Hugo and SvelteKit. Platform-by-platform steps are in how to add a favicon.

Read the layers of any favicon.ico

Want to see what a downloaded or third-party ICO really contains? This short Python script prints each layer from the directory described above. It needs nothing beyond a standard Python install:

import struct, sys

data = open(sys.argv[1], "rb").read()
reserved, kind, count = struct.unpack("<HHH", data[:6])
print("icon" if kind == 1 else "cursor", count, "layers")
for i in range(count):
    w, h, colors, _, planes, bpp, size, offset = struct.unpack(
        "<BBBBHHII", data[6 + 16 * i : 22 + 16 * i])
    fmt = "PNG" if data[offset:offset + 4] == b"\x89PNG" else "BMP"
    print(f"{w or 256}x{h or 256}  {fmt}  {size} bytes")

Save it as ico_layers.py and run python ico_layers.py favicon.ico. A file from this page prints one line per layer you selected. A PNG that was merely renamed to .ico fails immediately, because its first bytes are not an ICO header.

This page or PNG to ICO?

Both build real multi-layer ICO files. This generator is set up for the website case: it accepts SVG as well as raster images, offers crop and background options, and limits the layers to the 16–64 px range browsers use. The PNG to ICO converter is the simpler tool for desktop icons, with layers up to 256 px. If you need the PNG icons and manifest as well, go straight to the favicon package generator.

favicon.ico FAQ

Related tools and guides

• Image to favicon — every PNG size from the same upload.
• Favicon checker — confirm /favicon.ico loads on your live site with the right content type.
• Favicon sizes — the sizes outside the ICO and where each is used.
• Favicon not showing — a step-by-step fix when the new icon will not appear.