ICO File
Definition
The ICO format comes from Windows 1.0 in 1985 and has barely changed. A small header records how many images the file contains, and each entry records a width, a height, a colour depth and an offset to the image data, which is stored either as a Windows bitmap or, since Windows Vista, as an embedded PNG. A typical web ICO holds three images at 16 by 16, 32 by 32 and 48 by 48 pixels, and weighs between 1 KB and 15 KB. Browsers request it by convention: if no icon is declared in the HTML, they try /favicon.ico at the root of the domain anyway. The content type is image/x-icon in common use and image/vnd.microsoft.icon in the IANA registry, and browsers accept either.
Why It Matters
The favicon is the smallest asset on a site and one of the most visible — it is what a reader scans for among thirty open tabs and what sits beside a bookmark for years. Its absence is noticeable: the browser shows a blank page glyph and requests /favicon.ico regardless, producing a 404 in your logs on nearly every page load. The multi-size property is why ICO has not been retired. A 32-pixel PNG scaled down to 16 pixels for a tab turns muddy, whereas an ICO can carry a separately drawn 16-pixel version with thickened strokes and less detail. Most sites pair a small ICO with a 180-pixel PNG for the Apple touch icon and a 512-pixel one for the web app manifest.
How It Works
A browser looks first for a link element in the head with rel set to icon, which names the file, its type and its sizes, and falls back to requesting /favicon.ico from the site root when none is present. Because the fallback path is fixed, the file has to sit at the root — a copy in an assets folder is not found unless the HTML points at it explicitly. Icons are cached hard and for a long time, sometimes beyond an ordinary refresh, so a changed favicon often needs a new filename before anyone sees it. Making one is a conversion step you run yourself: ImageMagick packs several PNGs into a single ICO in one command, and an SVG source scaled to each size gives the cleanest result.
Real-World Example
A one-page site published at recipes.99helpers.site starts life with no icon, and its logs show a 404 for /favicon.ico on almost every visit. The owner exports their logo mark from an SVG at 16, 32 and 48 pixels, packs the three into a 4 KB favicon.ico, and uploads it to the root of the site alongside index.html. The 404s stop, the tab shows the mark, and the file is small enough that it is fetched once and cached for the rest of the visitor's year. A 180-pixel apple-touch-icon.png goes up beside it for anyone saving the page to a phone home screen.
Common Mistakes
- ✕Putting favicon.ico in an images or assets folder without a link element — the browser only guesses at the site root and gets a 404 there
- ✕Scaling one large image down to 16 pixels and shipping that alone — fine detail turns to mush at tab size, which is where the icon is seen most
- ✕Expecting a changed icon to appear straight away — favicon caching is unusually aggressive, and a cache-busting filename is often the only reliable fix
- ✕Uploading a renamed PNG as favicon.ico — some browsers cope, others do not, and the ones that do not simply show nothing
Related Terms
Favicon
A favicon is the small icon a browser shows for a site — in the tab, in bookmarks, in history and on a phone home screen. It is a file in the site, pointed to from the HTML or found at a fixed path.
PNG File
A PNG file is a raster image that compresses without discarding any pixel data and supports a full alpha channel for transparency. It suits screenshots, logos and line art, and is the wrong choice for a photograph.
SVG File
An SVG file is an image written as XML markup, describing shapes and paths instead of a grid of pixels. Because the browser draws it at render time, one file stays sharp at any size.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
HTTP Status Code
An HTTP status code is the three-digit number a server returns at the head of every response, saying what happened to the request. It is the first thing on the first line — a 200 means here is the file, a 404 means there is nothing at that address.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →