A favicon is not one image. It is the small icon in a browser tab, the larger one a phone uses when a site is added to the home screen, and the larger one still that a PWA manifest and app switchers expect. Each context wants a different size, and getting one wrong shows: a 16-pixel icon stretched to fill a home screen tile looks broken in a way visitors notice.
This generator takes one image and produces the full set. Your source is centre-cropped to a square, scaled to each required size with the pica resampler rather than the browser’s default filter — which matters enormously at 16 pixels, where naive scaling turns a logo into a smudge — and packaged as a ZIP together with a genuine multi-resolution .ico file.
The icons are generated in your browser. Unreleased logos and brand assets are not uploaded to an icon service.
<head> of your pages.| File | Size | Used by |
|---|---|---|
| favicon.ico | 16, 32, 48 combined | Browser tabs, bookmarks, legacy support |
| favicon-16x16.png | 16 × 16 | Tab icon on standard-density displays |
| favicon-32x32.png | 32 × 32 | Tab icon on high-density displays |
| favicon-48x48.png | 48 × 48 | Windows site shortcuts |
| apple-touch-icon.png | 180 × 180 | iOS home screen |
| icon-512.png | 512 × 512 | Android home screen, PWA manifest, app switchers |
The .ico is a real multi-resolution container holding the 16, 32 and 48 pixel versions, not a renamed PNG. Windows and older browsers pick whichever size suits the context they are drawing into.
Unpack the ZIP into your site root and add these to every page’s <head>:
| Purpose | Tag |
|---|---|
| Classic favicon | <link rel='icon' href='/favicon.ico' sizes='any'> |
| Standard density | <link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png'> |
| High density | <link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'> |
| iOS home screen | <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'> |
The 512-pixel icon is referenced from your web app manifest rather than from a link tag.
A favicon is often displayed at 16 pixels square, which is roughly the size of a single character of body text. A full wordmark is illegible at that scale; a detailed illustration becomes noise.
What works is a single letter, a simple monogram, or one bold shape with strong contrast against both light and dark tab backgrounds. Test by shrinking your logo to 16 pixels and looking at it from arm’s length — if you cannot tell what it is, neither can anyone else.
At least 512 × 512, and square if possible. The source is centre-cropped to a square, so a wide logo will lose its ends — pad it to a square first with the Square Image tool if that is a problem.
Yes. It is a genuine multi-resolution ICO container holding 16, 32 and 48 pixel images, not a PNG with the extension changed. Windows and older browsers read it correctly.
In the root directory of your website, so they are reachable at paths like /favicon.ico. Then add the link tags shown above to your pages.
Browsers cache favicons aggressively. Do a hard reload, or open the icon file directly by URL to confirm it is being served, then reload the page.
Yes for the PNG files, which keep their alpha channel. Keep in mind that a transparent icon has to work against both light and dark tab backgrounds.
No. The cropping, scaling and ICO assembly all happen inside your browser.