Generating a favicon from a PNG means turning one local image into a set of square PNG files at the exact pixel sizes browsers expect — typically 16, 32, 48, 64, 128, 256, and 512 pixels — and shipping each one with a matching rel="icon" HTML link element. The Favicon Generator does exactly that in your current browser tab: it decodes the source locally, draws each output at its requested natural dimensions, and exports an image/png Blob with a filename like favicon-32x32.png. Because everything happens client-side, the original PNG never leaves your computer, which matters when the source is a private logo or an unreleased product mark. PNG is also a natural format for this job: it preserves an alpha channel, so transparency already present in the source carries through to the smallest 16-pixel icon and keeps the favicon from getting a solid white box when it sits on a colored browser tab.
What the Favicon Generator Accepts and Produces
The tool reads PNG, JPEG, and WebP files straight from your device. Source files are capped at 25 MB before decode and rejected after decode if they expose more than 40 million pixels, a safety limit that protects the browser from running out of memory on unusually large or malformed images. SVG and animated inputs are intentionally excluded, because vector content could carry script and a frame sequence has no obvious "main" frame to pick. If a source is rejected, the practical workaround is to convert it to a supported static raster format and try again.
After a valid source is decoded, the generator takes the largest centered square it can fit inside the natural source dimensions and uses that square for every output. A square source is not cropped at all. A landscape source loses equal amounts from its left and right edges. A portrait source loses equal amounts from its top and bottom edges. This rule is fixed and predictable, which is exactly why it works for centered logos, monograms, and circular badges but poorly for subjects parked in a corner of the frame.
For each size you select, the generator allocates its own offscreen canvas, draws the cropped source at high quality, and exports a fresh image/png Blob. The on-screen preview is a convenience; the file you actually download is the exact pixel size named by that download link, not a magnification of the preview. The tool also writes a set of HTML link elements that mirror those filenames, so the markup you paste into your page head and the files you upload cannot drift apart.
The scope of what comes out is narrow and worth stating up front.
| Asset or Markup | Included in This Tool |
|---|---|
| Square PNG favicon files at 16, 32, 48, 64, 128, 256, and 512 pixels | Yes |
| Standard rel="icon" HTML link lines with matching sizes and filenames | Yes |
| ICO container file | No |
| SVG favicon | No |
| Apple touch icon | No |
| Android Chrome web app manifest | No |
| Pinned-tab SVG (single color) | No |
| Automatic background removal or transparency added to an opaque source | No |
Preparing a PNG Source for a Clean Favicon
A favicon has very little room for detail, so the composition of the source matters more than the resolution. Pick an image whose main subject sits within the central area that the center crop will keep. Logos drawn inside an imaginary central square — initials, monograms, badge marks, simplified wordmarks — survive the resize far better than busy photographs or scenes with text in the corners.
If the subject is intentionally off-center, pre-crop the PNG so the important part lands inside the central square before you feed it to the generator. A tool like Image Cropper runs in the same local browser workflow and lets you reposition the crop box by eye. Running the crop step first makes the favicon result predictable instead of surprising.
High contrast also helps. At 16 pixels, thin strokes collapse and pale-on-pale lettering turns into a smudge. Aim for bold silhouettes, two-tone marks, or shapes that read at a glance. If the PNG already has transparency, keep it: the alpha channel is preserved through the resize, and a transparent favicon adapts cleanly to both light and dark browser themes. If the source has a white or pale background, plan to check the result on a dark browser tab to make sure the icon does not visually disappear.
How to Generate a Favicon from a PNG
- Open the Favicon Generator in your browser. No sign-up, no upload, no server hop.
- Click the file input and choose a PNG from your computer. JPEG and WebP also work, but PNG is the recommended source when you want the result to keep transparency.
- Confirm the loaded source visually. If the main subject sits well inside the central area, leave it as is. If the subject is offset toward an edge, crop the PNG first and reload.
- Tick the square sizes you actually want: 16, 32, 48, 64, 128, 256, and 512 pixels are all available. Most sites only need 16 and 32, but the larger sizes help on high-DPI screens and OS-level pinned surfaces.
- Generate the favicons. The tool renders each selected size independently from the decoded source at its natural dimensions, not by upscaling a single small preview.
- Open each downloaded PNG at 100 percent zoom, especially the 16 and 32 pixel files. Confirm the subject is recognizable and that nothing important was cut off by the center crop.
- Copy the matching HTML link snippets from the tool. Paste only the lines for the files you will actually ship.
- Upload the chosen PNG files to your site, then edit each href so it points to the real location of the file on your server.
Reading the Generated HTML Snippets
Every snippet the generator emits follows the same shape, and understanding the four attributes makes the rest of the publishing step straightforward.
The rel="icon" relationship is the standard hook a browser uses to discover favicons, as defined in the WHATWG HTML Standard for the link type "icon". The type="image/png" attribute matches the MIME type of the file the generator actually exports, which is image/png for every output. The sizes="32x32" attribute tells the browser the exact pixel dimensions of the resource it is looking at, so the browser can pick the closest match for the surface it is rendering. The href defaults to a root-relative path such as favicon-32x32.png, which you can edit freely to match wherever the file actually lives on your site.
Multiple link elements are normal and useful. Listing 16, 32, and 48 pixel files lets a browser pick whichever size fits the surface it is rendering, while the final display decision still belongs to the browser. For background on the attribute, the MDN reference for rel="icon" documents the same shape and lists the values browsers accept.
What a PNG Source Gets You That Other Formats Do Not
PNG is the most forgiving input format for this job for one specific reason: it can carry an alpha channel. A logo exported as a transparent PNG keeps that transparency all the way down to the 16-pixel file, so the favicon does not need a colored box behind it to look correct on either a light or dark browser tab. JPEG sources begin with no transparent pixels at all — JPEG simply cannot encode an alpha channel — so the resulting favicons are fully opaque rectangles. WebP can also be transparent when the encoding includes an alpha channel, and the generator preserves that transparency the same way it does for PNG. Review the result against both light and dark backgrounds if the original has transparent or pale edges.
The generator has no way to add transparency that was not already in the source. If your logo has a solid white background and you want a transparent favicon, remove that background in an editor before running the generator. For the broader question of when to pick PNG, JPEG, or WebP for any image task, the JPEG vs PNG vs WebP guide walks through the trade-offs across formats.
You can choose any combination of the seven available output sizes. Common pairings are 16 and 32 for a minimal setup, or 16, 32, and 48 when you also want a sharp Windows site icon.
| Output Size | Typical Use |
|---|---|
| 16 x 16 | Smallest browser tab and low-DPI bookmark surfaces |
| 32 x 32 | Standard browser tab and most taskbar shortcuts |
| 48 x 48 | Windows site icons and larger bookmark surfaces |
| 64 x 64 | Higher-density tab icons and pinned surfaces |
| 128 x 128 | macOS-style dock icons and in-page iconography |
| 256 x 256 | Modern high-DPI displays and large OS surfaces |
| 512 x 512 | Largest available output for very high-DPI surfaces |
Common PNG-to-Favicon Problems and How to Spot Them
The most common complaint is a blurry 16-pixel icon. The cause is almost always the source: thin strokes and tiny lettering do not survive a downscale to 16 pixels no matter how good the resizer is, because browsers smooth pixels during resizing and very small icons cannot preserve fine detail. Open the downloaded file at 100 percent zoom and look at the actual pixels, not the screen-rendered preview. If the subject smears, redraw the source with thicker strokes or pick a simpler mark, then regenerate.
The second most common complaint is "the favicon did not update." Browsers cache favicons aggressively, and a hard refresh of the page is often not enough. Clear the browser cache or open the deployed page in a private window to confirm the new file is actually being served. Stale asynchronous render jobs from earlier selections cannot replace a newer one inside the tool either, which is useful when iterating on a source.
The third complaint is "my subject got cut off." That is the center crop doing its job. A wide source with the logo on the left third will lose the left third of the logo. Crop the PNG first so the subject sits inside the central square before you run the generator, because the favicon tool is not an interactive crop editor.
The fourth complaint is "my transparent PNG now has a colored box." That usually means the rendered favicon is being shown on a browser theme where the original PNG transparency was actually flat against the same color, so the box you see is the browser surface itself, not an artifact of the generator.
Publishing Checklist
- Inspect the 16 and 32 pixel downloads at 100 percent zoom before uploading anything.
- Check the result on both a light and a dark browser tab if the source PNG is transparent.
- Upload only the PNG files you actually want to ship.
- Edit each href in the copied snippets to match the real path of the file on your server.
- Paste the edited snippets into the head of every page template that should show the favicon.
- Clear the browser cache or open a private window to verify the deployed file is actually being served.