A favicon is the 16 to 512 pixel icon that appears next to your page title in browser tabs, bookmarks, and address bars, and you can produce one from a local PNG, JPEG, or WebP image by selecting square sizes between 16 and 512 pixels, generating each PNG, and pasting the matching HTML link snippets into your document head. Modern browsers no longer require the .ico container format that gave favicons their original name. They read square PNG files referenced through standard <link rel="icon"> tags and pick the size that best fits the surface they are rendering. The shorthand "ICO" survives in the phrase "favicon ico" because early browsers expected a single Windows icon resource at /favicon.ico, but today's web platform treats each pixel size as an independent image, so a set of well-named PNG files is the practical modern equivalent. That shift is good news for anyone who already has a logo or a square symbol on disk: you can stay in the browser tab, pick the pixel sizes you actually need, and download each file without uploading the original anywhere. The Favicon Generator runs entirely in your browser, decodes your local image, crops it to a centered square, and writes the size-matched HTML lines for you.
Why "Favicon ICO" No Longer Means a Single .ico File
The "ICO" in "favicon ico" is a holdover from Internet Explorer 5, which asked every site for a single Windows icon resource at the root path /favicon.ico. That container could hold several resolutions inside one file, and browsers fell back to it whenever a page did not declare its own <link rel="icon"> tag. The WHATWG HTML Standard now defines the rel="icon" relationship that lets a page point at any image resource, including PNG, SVG, and animated formats, and modern browsers use those declarations first. According to the MDN rel icon reference, browsers walk the declared icon links in document order and pick the one that best matches the surface they are drawing, which is why many production sites list multiple sizes side by side. In practice that means a set of square PNG files named favicon-16x16.png, favicon-32x32.png, and so on does the same job the old /favicon.ico did, with sharper rendering and easier edits.
Picking a Source Image That Survives a Centered Square Crop
A favicon has very little room for detail, so the source composition matters more than the file format. The Favicon Generator uses a center cover crop: it takes the largest possible square from the middle of your image and resizes that square to each requested output. A landscape picture loses equal portions from its left and right edges, while a portrait picture loses equal portions from its top and bottom. A square source is not cropped at all. This predictable rule is useful for logos, symbols, monogram letters, and illustrations whose important subject already sits near the center. It is not an interactive crop editor, so when the subject is intentionally off-center you should fix the framing first with an image cropper and then return to the Favicon Generator with the reframed file. PNG and WebP sources can carry transparency through the pipeline, so a logo on a transparent background keeps its transparency at every output size. JPEG sources begin with no transparent pixels, so a JPEG logo will arrive as an opaque square. Review the result against both light and dark backgrounds if the original has transparent or pale edges, since the tool does not add or remove transparency on its own.
Generate Square PNG Favicons From a Local Image
Open the Favicon Generator in your browser tab. The whole workflow runs locally: your file is decoded in the tab, never uploaded, and each icon is drawn with a Canvas at its exact requested size.
- Choose a PNG, JPEG, or WebP image with its main subject near the center. Click the file input and select a source from your device. The tool accepts PNG, JPEG, and WebP files up to 25 MB, and it rejects images above about 40 million decoded pixels before allocating output canvases, so very large photos will fail even when the compressed file size looks small.
- Select the square PNG sizes you need and generate the favicon files. Tick 16, 32, 48, 64, 128, 256, and/or 512 pixel outputs. Every selected file is rendered independently from the decoded source at its requested natural dimensions, so a 32×32 download is a real 32×32 PNG rather than a downscaled preview.
- Inspect and download each icon, then copy the matching HTML link snippets into your site. Open the smallest downloads at 100 percent zoom in your image viewer to confirm the subject is still recognizable, click each download link to save the PNG to your project, and copy the corresponding <link rel="icon"> line the tool writes next to that size.
Each generated filename follows a consistent pattern, which is helpful when you upload the files. A request for the 32 pixel output produces favicon-32x32.png, the 256 pixel request produces favicon-256x256.png, and so on. Place the downloaded files at the root paths the snippets assume, or edit each href to match the directory you actually use, then drop the matching <link> tags into the <head> of your page.
| Pixel size | Generated filename | Typical browser or device surface |
|---|---|---|
| 16×16 | favicon-16x16.png | Classic browser tab fallback and very small bookmark surfaces |
| 32×32 | favicon-32x32.png | Standard browser tabs, address bars, and modern bookmark lists |
| 48×48 | favicon-48x48.png | Legacy Windows site icons and larger bookmark thumbnails |
| 64×64 | favicon-64x64.png | Higher-DPI tabs and sidebar contexts |
| 128×128 | favicon-128x128.png | macOS pinned tabs and dense bookmark bars |
| 256×256 | favicon-256x256.png | High-DPI desktop shortcuts and large thumbnail surfaces |
| 512×512 | favicon-512x512.png | Native export for further resizing or platform tooling |
Reading the HTML Link Snippets the Tool Writes
Every requested size comes with its own <link> line, and the line is built from the standard rel icon relationship. A typical snippet looks like this:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Three parts of that snippet deserve attention. The rel="icon" value tells the browser this is an icon resource rather than a stylesheet or preload hint. The type="image/png" attribute matches the MIME type of the file the tool actually exports, since each result is an image/png Blob produced by the Canvas toBlob API. The sizes="32x32" token tells the browser the natural pixel dimensions of the file, which is how the browser decides which declared icon fits a given surface. The href is root-relative by default, so /favicon-32x32.png means the file lives at the root of your domain. If you store assets in a folder like /assets/icons/, change the href on each line to match that path. Copy only the lines for the sizes you actually intend to upload; the others can be ignored without affecting the rest of the page. For a full deployment walkthrough after you have the files, the guide on setting up a favicon on your website covers the matching server paths and head-section placement in more detail.
Where Modern PNG Favicons Work (and Where ICO Still Shows Up)
Modern Chromium, Firefox, and Safari-based browsers all accept PNG icons declared with rel="icon", and each picks the size that best matches the surface it is rendering, which is why producing several sizes at once is the practical approach. The Favicon Generator output covers that path well: it produces selectable PNG sizes, writes the correct MIME type and sizes token for each, and keeps filenames aligned with the snippets. The scope is deliberately narrow. The tool does not produce an .ico container file, an SVG icon, an Apple touch icon, an Android adaptive icon set, a pinned-tab asset, a web app manifest, or a platform-specific package. If your deployment needs any of those, you have to create them in addition to the PNG set. For most content sites, blogs, documentation portals, and small web apps, the PNG sizes plus the matching HTML lines are enough to populate browser tabs, bookmarks, and most address bar surfaces without going near the legacy /favicon.ico endpoint.
Fixing Common Problems With Small Favicons
Three issues come up often enough to plan around. First, very small icons soften thin lines and tiny lettering because the browser smooths pixels during the final resize. The fix is to inspect the 16 and 32 pixel downloads at 100 percent zoom before publishing and confirm that the subject is still recognizable at that size. Second, an important detail may sit outside the center square and disappear after cropping. The center cover rule takes equal margins from the longer side, so an off-center logo will lose the side that was already near the edge. Reframe the source in an image cropper first, save it as a square, and rerun the favicon workflow on the reframed file. Third, an old icon may keep showing in your browser tab after you upload new files. Browsers cache favicons aggressively, so clear the browser cache, close and reopen the tab, or use a private window to verify the deployed icon. The tool prepares the assets and markup; it does not modify your website, upload files, or confirm production cache behavior, so a quick visual check after deployment is part of the workflow.
Related reading: Image Color Extractor Alternative: A Local Browser Tool.