Free Favicon Generator

How this tool computes its result

Loads an uploaded image into an offscreen <img> element, then for each of seven fixed target sizes (16, 32, 48, 64, 180, 192, 512 pixels) draws it onto a same-size canvas via ctx.drawImage(image, 0, 0, size, size) and exports a PNG data URL — a direct stretch to a square canvas, not a crop-to-fit or aspect-ratio-preserving resize. It also generates a static copy-paste HTML snippet referencing the 16px, 32px, and 180px (apple-touch-icon) sizes plus a site.webmanifest reference, and derives a safe filename base from the uploaded file's name (extension stripped, non-alphanumeric characters replaced with hyphens, lowercased).

Worked example

Uploading 'Company Mark.svg' produces seven canvas-resized PNGs (16x16 through 512x512) and derives the filename base 'company-mark'. The copyable HTML snippet references /company-mark-16.png, /company-mark-32.png, /company-mark-180.png, and /site.webmanifest — each individual PNG can also be downloaded on its own via a per-size Download button.

When not to use this tool

Non-square source images are stretched to fill each square canvas rather than centered, cropped, or letterboxed, since drawImage renders directly into a size-by-size canvas with no aspect-ratio handling — a wide rectangular logo will look visibly distorted in every generated icon.

Common mistakes

• - Uploading a non-square logo and expecting it to be centered or padded — it is stretched to fill the square canvas instead, distorting the aspect ratio in every exported size.
• - Assuming the copied HTML snippet's reference to site.webmanifest means a manifest file was generated — the tool only outputs the <link> tags; no manifest JSON file is created or downloadable.
• - Uploading a non-image file, like a PDF logo export — blocked upfront with 'Please choose an image file' based on a file.type.startsWith('image/') check.

Related tools