The workshop · Icons and favicon
How it works : Icons and favicon
Drop an image in. You walk away with an archive holding the favicon.ico, the tab icons, the one for the iPhone home screen, the ones for an installable app, and the exact lines to paste into your page.
Putting an icon on a website ought to take two minutes. In practice it takes seven files at different sizes, an ancient format no software will write any more, a special icon for iPhones, another one Android cuts to its own shape, and half a dozen lines to paste in exactly the right place. That is why so many favicon generators exist, and why every one of them starts by asking for your logo.
This one does not ask. Your image is read, redrawn at each size, and the archive is assembled inside the tab. The .ico file is built byte by byte, because no browser can write it: that is measured, not assumed.
If your source is an SVG, it is REDRAWN at every size instead of being scaled up or down. That is exactly what should happen to a vector image, and it is the best possible source for an icon set.
How it works
- Drop your image in. A square of at least 512 pixels a side is ideal; an SVG is better still, it will be redrawn crisply at every size.
- Choose how a non-square image should be handled, and whether the icons that cannot do transparency should get a white background.
- Click “Build and download”. One archive comes down, with the nine files and a note holding the lines to paste.
Formats accepted
These four families open in every up-to-date browser. SVG has a status of its own and treatment of its own: it is redrawn at each size instead of being scaled.
PNG image (.png)
The best choice after SVG: it keeps transparency, which matters a great deal for a tab icon. Aim for at least 512 pixels a side.
SVG vector image (.svg)
The ideal source: every size is REDRAWN from the artwork, not enlarged from pixels. The SVG must carry its own dimensions or a view box, and must not reference any outside font or image, because the browser will ignore those.
JPEG photo (.jpg, .jpeg)
It works, but a JPEG has no transparency: your icon will always sit on a rectangular background. For a logo, prefer a PNG or an SVG.
WebP image (.webp)
Opens everywhere and keeps transparency. The icons produced are always PNG, though: it is the only format a browser is obliged to write, and the only one every system accepts inside a .ico.
Its limits
20 MB per file
An icon source has no reason to be heavy: beyond twenty megabytes it is not a logo but a photograph, and the archive produced would be the same. The limit avoids making a phone work for nothing.
About 16.7 million pixels per image
On iPhone and iPad, canvas area was capped at 4096 by 4096 pixels for years, and allocation fails beyond it. The tool checks the area BEFORE allocating and refuses cleanly.
A source that is too small cannot be improved
If your image is under 512 pixels a side, the large icons will be enlargements, and therefore blurred. No tool can invent pixels that do not exist, and this one says so on screen rather than handing you a soft icon with no comment.
The .ico is assembled by hand, with PNGs inside it
No browser can write a .ico file: we measured it, and asking a canvas for that format returns a PNG. The container is therefore built byte by byte around three PNG images. PNG inside a .ico has been accepted since Windows Vista and since Firefox 9; for other browsers we found only evidence of practice, not vendor documentation, and we would rather write that down.
The archive carries no date
A zip file normally records the date and time of every file it holds. That would be the only piece of information about you the archive carried. So we write a fixed date into it, the oldest the format allows, and two archives built from the same image are identical byte for byte.
Animated images are refused
An icon is still by nature, and a canvas holds one frame. Rather than quietly keeping the first frame of an animation, the tool stops and says so.
Questions about this tool
Is my image sent anywhere?
No, and you do not have to take our word for it. Open your browser's inspector with F12, go to the “Network” tab, clear the list, then drop your image in. Not one line appears. You can also cut your connection: the tool keeps working, archive included.
Which image gives the best result?
An SVG, if you have one: every icon is then redrawn crisply at its final size. Otherwise a square PNG of at least 512 pixels a side, with a transparent background. Avoid an image with a lot of fine detail: at sixteen pixels a side, fine artwork becomes a smudge. Good favicons are almost always one simple shape and a strong contrast.
Why nine files, and not one?
Because the systems do not ask for the same thing. Browsers want a small icon for the tab, and they look for a favicon.ico at the root of the site without being told. iOS wants a 180-pixel icon for the home screen, and lays it on black if it is transparent. Android wants a maskable icon, which it cuts to whatever shape is in fashion. An installable app's manifest wants two more. None of those needs is a whim, and the note in the archive tells you where each file goes.
Why does the archive carry no date?
Because a zip file normally records the date and time of every file it holds, and that would be the only piece of information about you the archive carried. So we write a fixed date into it, the oldest the format allows. It is a small thing, but it is a consistent one: a tool that receives nothing has no reason to write something about you into the file it hands back. It has a pleasant side effect too: two archives built from the same image are identical byte for byte.
How do you build the .ico if the browser cannot write it?
By hand. We started by checking rather than assuming: asking a canvas for the .ico format returns a PNG, without warning. So the file is assembled byte by byte, with an icon directory header, one descriptor per size, and three PNG images after them. It is about thirty lines of code, and it avoids embedding a library for a thirty-year-old format.
My image is not square. What happens?
The tool warns you and lets you choose. Placing the whole image keeps all of your artwork and adds margins around it: that is nearly always the right choice for a logo, because nothing is cut off. Cropping at the centre fills the whole square but cuts into the edges, which suits a photograph and rarely suits a logo.
Do the icons keep their transparency?
Yes, except two, and that is not our choice. The iPhone home screen icon is laid by iOS onto black if it is transparent, and the maskable icon is cut by Android to the system's shape, which gives nonsense over transparency. Those two therefore get a white background, and you can switch that off. All the others stay transparent.
Drop an image in. You walk away with an archive holding the favicon.ico, the tab icons, the one for the iPhone home screen, the ones for an installable app, and the exact lines to paste into your page.
VerifyThe proof, step by stepThe network inspector check, explained one gesture at a time, with screenshots.
The cornerThe image cornerA photo says more than it shows. Here you see it, clean it, slim it down, crop it, and blur what is nobody's business.