Convert HEIC to ICO

This is the step that decides whether the result looks deliberate. Nothing in this conversion crops: the picture keeps its proportions and is centred on a square canvas at the largest scale that fits, so a normal 4,032 by 3,024 iPhone frame arrives as a 4:3 picture with a quarter of the icon empty above and below it. Nothing is stretched, which is the important half — but a favicon is 16 pixels tall and you have just given four of them away.

Open the photograph in the Photos app, tap Edit, choose the crop tool and pick the square ratio, then position it on the part you actually want — the letters on the sign, the emblem, the single object. Save, share the cropped copy out, and convert that. Thirty seconds of cropping is worth more than any setting on this page.

A favicon is drawn at 16 CSS pixels. On a high-density screen the browser may pick 32 device pixels, and a bookmark bar or a pinned tab can go a little larger, but 16 by 16 is the size to design for. That is 256 pixels in total, fewer than there are words on this page.

What survives at that size is one shape and one or two colours. What does not survive is text of any kind below about four characters, thin lines, gradients, shadows and anything with a background behind it. A photograph of a shopfront becomes a brown smudge. A photograph of a single bold letter painted on a wall, cropped tight, becomes a recognisable icon — the difference is entirely in what was photographed and how close.

The file is a six-byte header, then a sixteen-byte directory entry per size, then a PNG for each — three of them with the default settings, at 48, 32 and 16 pixels, listed largest first. The format also allows a raw bitmap payload and that is what it originally meant, but every version of Windows since Vista reads a PNG inside an icon and the file comes out a fraction of the size, so that is what is written.

One quirk is visible in a hex editor: the width and height fields in the directory are a single byte each, so 256 does not fit and the format’s convention is to write zero instead. An icon whose entry says its size is 0 by 0 is the specification working as intended, not a corrupt file. You will only meet it if you choose a size set that includes 256; the default three all fit in a byte and read as themselves.

Whatever you feed in, nothing in the file exceeds 256 pixels — the ceiling is applied on the way through and there is no setting that raises it. A 12-megapixel photograph is reduced by a factor of about sixteen in each direction to reach it, and a 48-megapixel one by more than thirty. The sizes actually written come off that, so with the default set the reduction is a factor of eighty-four before the largest entry is reached.

Every one of those reductions is done with high-quality smoothing in a canvas, which is the right way round: shrinking a large photograph averages a great many pixels into each output pixel and hides noise rather than showing it. The result is a clean small picture of something that was never meant to be small, which is a different problem and not one resampling can solve.

Icons look best with a transparent background, so they sit on a light or dark browser chrome without a visible box around them. The container here supports that, because the payload is a PNG and a PNG carries alpha.

A camera photograph has no transparency in it, so what you get is a fully opaque square. If the mark you photographed is dark on a pale wall, the pale wall becomes the icon’s background and it will show as a rectangle against a dark browser theme. Removing that background is a job for an editor before conversion, not something the conversion can infer.

If you are going to shoot something specifically for this, shoot it as flat and as close as the lens allows: the emblem alone, filling the frame, straight on, in even light with no shadow across it. Avoid the whole sign, the whole shopfront and the whole product. One motif, one dominant colour, hard edges.

It is also worth photographing the mark against a plain background you can cut out later — a sheet of paper, a plain wall — because that gives you the option of a transparent icon without reconstructing edges by hand. If the business has a real logo file somewhere in an email from a designer, that is a better starting point than any photograph, and it is worth ten minutes of searching before converting.

The picture is decoded and re-encoded on the way into the PNG payload, so nothing from the HEIC’s metadata reaches the icon: no capture date, no camera model, no GPS coordinate. That is unambiguously good here, since a favicon is served to every visitor of the site and would otherwise be publishing where the photograph was taken.

The Display P3 profile an iPhone attaches does not travel either, so saturated colours will render slightly tamer than on the phone. At 16 pixels this is not something anyone will notice, and it removes one variable from how the icon looks across browsers.

Two things are worth doing with the result. Upload it wherever your site builder asked for it, and also make sure a copy sits at the root of the domain as favicon.ico, because browsers, crawlers and link previews request that path on their own initiative whether or not the page declares it.

Then check it in a real tab rather than in the builder’s preview, at the size it will actually be seen, on both a light and a dark browser theme. Caching is aggressive with favicons — a hard reload or a private window is often needed before the new one appears, and more than one person has re-converted a file three times because of that rather than because anything was wrong with it.

The whole job happens in the browser: libheif decodes the HEIC, a canvas resizes it, the PNG encoder runs and the icon container is written by a few dozen lines of JavaScript. Nothing is transmitted, which you can verify in the network tab or by disconnecting first.

It also means no queue and no waiting. Making an icon is an iterative business — crop it tighter, try the other photograph, try it without the background — and being able to run six attempts in a minute on your own machine is what makes iterating practical.

The honest recommendation, if the photograph does not reduce well, is not to use a photograph. A favicon drawn as a shape — an initial in a strong typeface, a simple silhouette, a solid colour with a letter knocked out of it — will read at 16 pixels where a photograph never will, and it can be made in any vector tool in a few minutes.

If you do go that way, produce it as an SVG and convert that to ICO instead: it goes into the same container with the same set of sizes, but the pixels it starts from are rendered from the drawing rather than captured through a lens, so the edges are hard where a photograph’s are soft. This page exists because sometimes the photograph is all there is, and it will produce a usable file — but it will not make a shopfront legible in a browser tab.