Skip to content
Lizely

Favicon Generator

Turn one local image into selectable square PNG favicons and copy the matching HTML icon links.

Privacy: your files never leave your device. All processing happens locally in your browser.

How to use

  1. 1.Choose a PNG, JPEG, or WebP image with its main subject near the center.
  2. 2.Select the square PNG sizes you need and generate the favicon files.
  3. 3.Inspect and download each icon, then copy the matching HTML link snippets into your site.

About Favicon Generator

Favicon Generator turns an ordinary local image into a practical set of square PNG icons for a website. Choose a PNG, JPEG, or WebP source, select the pixel sizes you need, and download each generated file separately. The tool also writes the corresponding HTML link elements, including the PNG media type and the exact square sizes value, so the files and markup stay aligned. Everything runs in the current browser tab. The source image is decoded locally, drawn with Canvas, and never sent to a processing server.

A favicon has very little room for detail, so the source composition matters. This generator uses a centered cover crop: it takes the largest possible square from the middle of the image before resizing. A landscape picture loses equal portions from its left and right edges, while a portrait picture loses equal portions from the top and bottom. A square source is not cropped. This predictable rule is useful for logos, symbols, initials, and illustrations whose important subject is already near the center. It is not an interactive crop editor, so use an image cropper first when the subject is intentionally off-center.

You can select 16, 32, 48, 64, 128, 256, and 512 pixel outputs. Every selected file is rendered independently from the decoded source at its requested natural dimensions. The tool does not enlarge a small preview and then reuse that preview for the larger downloads. Each result is an image/png Blob with a filename such as favicon-32x32.png. The preview is only a convenient visual check; downloading a link gives the exact dimensions named by that link. Because browsers smooth pixels during resizing, very small icons may soften thin lines or tiny lettering. Inspect at least the 16 and 32 pixel files at actual size before publishing.

The generated snippets use the standard rel icon relationship, an image/png type, a square sizes token, and a root-relative filename. Copy only the lines for files that you will actually place on the site. Then put those PNG files at the matching root paths or edit each href to match your real asset directory. Multiple icon links let a browser choose an appropriate resource, but the final selection remains browser behavior. The tool does not promise which one a particular browser, bookmark surface, or operating system will display. Clear site data or browser caches when an old icon remains visible after deployment.

This scope is deliberately narrow. It creates PNG browser favicons and matching HTML snippets. It does not create an ICO container, SVG icon, Apple touch icon, Android icon set, pinned-tab asset, web app manifest, or platform-specific package. It also does not add transparency to an opaque source or remove a background automatically. PNG can preserve transparency that already exists in a PNG or WebP source, while JPEG sources begin with no transparent pixels. Review the result against both light and dark backgrounds if the original has transparent or pale edges.

Input is limited to PNG, JPEG, and WebP files up to 25 MB. After the browser has decoded the source, the tool rejects images above 40 million pixels before allocating the output canvases. That post-decode processing budget reduces subsequent Canvas memory work, but it cannot prevent the browser's initial image decode from using memory or failing on an unusually large or malformed file. Compressed file size alone does not describe decode memory. SVG and animated inputs are excluded to avoid scriptable vector content and ambiguous frame selection. If a source is rejected, convert it to a supported static raster format before trying again. Object URLs used for previews and downloads are revoked when results are replaced or the page closes, and stale asynchronous render jobs cannot replace a newer selection.

For a dependable publishing workflow, start with a simple high-contrast square logo, generate the sizes you need, and open the smallest files at 100 percent zoom. Confirm that the subject remains recognizable and that no important detail was cut off by the center crop. Upload the chosen PNG files, copy their matching link lines into the document head, and verify the deployed page source and network paths. This generator prepares assets and markup; it does not modify your website, upload files, or confirm production cache behavior.

Methodology & sources

The browser validates a static PNG, JPEG, or WebP file, then decodes it under file-size and pixel-count safety limits. A shared center-cover calculation selects the largest centered square from the natural source. Each requested size gets its own exact-size offscreen Canvas, high-quality draw operation, and image/png Blob export. The same selected sizes produce standard rel icon HTML lines with matching filenames.

Frequently asked questions

Are images uploaded to a server?
No. Image decoding, center cropping, Canvas resizing, and PNG creation happen locally in your browser tab.
Does this tool create an ICO file or web app manifest?
No. It creates selectable PNG favicon sizes and matching HTML icon links only. ICO, SVG, Apple icons, manifests, and platform packages are outside its scope.
Why does my favicon look blurry or cropped?
The source is center-cropped to a square, and very small icons cannot preserve fine detail. Start with a centered, high-contrast image and inspect the 16 and 32 pixel downloads at actual size.

Related tools

Image Tools guides

View all