Generate Favicons and App Icons

Every step happens above, in the tool panel — this is the same four-step order, named on its own for a screen reader or a search result.

1. Drop your logo, or try the sample. JPEG, PNG or WebP, up to 20 MB. No logo to hand yet? Try the sample logo to see the whole workflow first.
2. Choose Crop to square or Fit inside square. Crop to square keeps the part of the logo inside the frame; Fit inside square keeps the whole logo and pads the rest. Pick a background colour, or leave it transparent.
3. Check the composed preview. The preview draws the exact square every icon is built from, with an optional circle and rounded-square guide. Fine detail can disappear once an icon is shrunk to 16 × 16.
4. Press Generate icons, then download the files or the ZIP. Every size, favicon.ico, the manifest, an HTML snippet to paste and one ZIP download appear once the package is ready.

The package below is the tool’s own output for the sample logo under the defaults — Crop to square with the frame where the page puts it, and the transparent ground kept — copied from a measured run rather than drawn for the page. The 16 and the 32 are shown at their real size, which is the honest way to see what a small icon keeps of a mark and what it loses.

Source, 640 × 400

16 × 16

32 × 32

192 × 192

512 × 512

favicon.ico is a container rather than a single picture. Microsoft’s own icon documentation describes a short header followed by one directory entry and one image per size the file holds, and says that “common sizes include 16, 32, and 48 pixels square.” Resizo packs exactly those three sizes into the file it writes.

Most browsers still look for this file at the site root whether or not a page links it at all — MDN notes that many sites do not bother declaring one for exactly that reason. The generated HTML snippet still lists the PNG icons by size, because a browser choosing between several icon links uses their sizes attribute, and falls back to whichever is listed last when more than one looks equally appropriate. This tool does not generate an SVG favicon, and how browsers weigh an SVG against an ICO or a PNG varies enough that no single rule covers all of them.

16 × 16 is the classic browser-tab size a favicon has carried since the format existed; 32 × 32 is the size a higher-density display, a taskbar shortcut or a bookmark bar entry more often asks for. Declaring both, as Resizo does, is what gives a browser something to actually choose between rather than one fixed picture stretched to fit.

It is the picture iOS uses when a visitor adds a page to their home screen. Apple’s own example markup names a 180 × 180 file, the largest of the sizes it documents, and Resizo writes exactly that one. Apple’s app-icon guidelines, written for native apps, ask for a full-bleed, opaque background because the system masks an icon’s shape itself; a web clip sits on the same home screen, so the same advice is worth following.

Chrome’s own installability criteria name exactly these two sizes as required before it will offer to install a site — nothing smaller and nothing else. Both are listed in the generated site.webmanifest with purpose “any,” which is the plain drawing Resizo produces rather than a maskable icon built for Android’s adaptive-icon safe zone.

It depends on where the icon ends up. A transparent background usually looks fine in a browser tab, which is why Transparent is the default here. A home-screen icon is a different case: Apple’s app-icon guidelines ask for an opaque background because the system masks an icon’s shape itself, and a transparent icon on Android is drawn inside a plain white circle rather than left see-through. Choosing a background composites it onto every generated icon, favicon.ico included, so the two never disagree.

No. Enlarging a small logo to fill a 512 × 512 icon increases its pixel dimensions, and the tool says so before the job runs, but it cannot restore detail a smaller original never captured. The composed preview and the enlarged 16 × 16 and 32 × 32 checks in the result are there so that is visible before a download, not after one.

No. The logo is decoded, composited and re-encoded into every size in this browser tab, using the same code this page loaded to run the tool — there is no server this file is sent to, checked on or held by.

Not one of the numbers above is Resizo’s own opinion. Each row below names the document that states it, whether that document requires the size or only documents or recommends it, and the day it was last read.