Favicon Generator

Each size has a context

There is no single favicon: there is a set, because each platform uses the icon differently. The 16 and 32 px PNGs appear in the browser tab and bookmarks. The apple-touch-icon (180 px) is what the iPhone uses when you add the site to the home screen. The 192 and 512 px PNGs are for PWAs and Android, described in the manifest.

The favicon.ico still matters as a universal fallback, old browsers and some contexts fetch it automatically at the root. That is why the tool generates them all: covering the set avoids the blurry icon (when a size is missing and the browser rescales another) or the generic square (when nothing is found).

• 16/32 px: browser tab and bookmarks.
• apple-touch-icon 180 px: iOS home screen.
• 192/512 px: PWA and Android (via manifest).
• favicon.ico: universal fallback at the root.

Why the .ico holds several sizes

The ICO format is special: it can embed several resolutions (16, 32, 48 px) inside a single file. So the system or browser picks the right-sized version for each context, a small tab uses the 16, a larger shortcut uses the 48, keeping sharpness without on-the-fly rescaling.

About framing: since favicons are square, a square image avoids cropping. In Cover mode, a rectangular image is cropped to the center to fit the square; in Contain mode, it is fit whole, with padding around it. Rounded corners and a background color help adapt a logo to the icon format.

What goes inside the file and where it works

An .ico is a directory of images: a 6-byte header, 16 bytes per size and then the data of each image. Here each image is a PNG, the format Windows has accepted since Vista and every current browser reads, and the 256 size is stored as 0 in the directory, a convention of the format. With the 6 default sizes (16, 32, 48, 64, 128 and 256 px), the header plus directory take 102 bytes, and the raw pixels would add up to 358,400 bytes; PNG compression usually shrinks that to a fraction, even more for logos with few colors.

The limit worth knowing: PNG icons do not work on Windows XP or in some old resource compilers, which require BMP inside the ICO. This tool does not produce BMP. For a site favicon, or a folder or shortcut icon on Windows 7 and newer, the file works normally. For a good result, start from a square image of 256 px or more: sizes larger than the source are scaled up, and the tool warns when that is going to happen.

• 6-byte header plus 16 bytes per size.
• Each size is a full PNG, transparency included.
• 256 px maximum per image, a format limit.
• Windows XP and old compilers want BMP, which is not produced.

site.webmanifest and the HTML snippet

The site.webmanifest is a small JSON file that describes the site as an app: name, colors and the icon list (the 192 and 512 PNGs). It is what lets you "install" the PWA and show a proper icon on the home screen instead of a page screenshot. The tool already generates this file referencing the correct PNGs.

The HTML snippet ties it together: these are the <link> and <meta> tags pointing to the favicon.ico, the PNGs, the apple-touch-icon and the manifest. Just paste it into your site's <head>. Without the snippet, the files exist but the browser does not know where to look, pasting the references is the step that activates the set.