You can generate a working favicon.ico setup in your browser by exporting exact-size PNG icons and adding the standard HTML tags—modern browsers treat this as a full replacement for the legacy .ico container. The classic favicon.ico was a single multi-resolution Windows icon file placed at the site root, and it is still recognized by every browser that ships today, but those same browsers also accept a PNG declared with rel="icon" in the document head. That shift means you do not actually need an ICO container at all if you publish the right PNG sizes with the correct link snippets. The Favicon Generator handles that exact workflow: it decodes a local image in your browser tab, center-crops it to a square, renders each size you pick as its own image/png file, and writes the matching HTML link element with the correct sizes token. The whole pipeline runs locally, your source file is never uploaded, and the output filename pattern is predictable so the markup and the asset stay aligned on disk. The rest of this guide walks through the prep work, the click-by-click steps, and the small set of publishing checks that prevent a stale icon from lingering after deployment.
Why a PNG Set Replaces the Legacy .ico Container
Internet Explorer 5 and the original favicon specification required a single .ico file containing 16×16, 32×32, and 48×48 images packed into one Windows icon container. Browsers still fetch /favicon.ico by convention, which is why that filename appears in almost every older tutorial. Modern browsers, however, accept a PNG declared with rel="icon" in the document head, and a single square PNG is often smaller than a multi-resolution .ico at the same visual quality. The WHATWG HTML Standard lists rel="icon" as the relationship used to link an external resource representing a favicon, and the MDN rel icon reference confirms that browsers choose an appropriate resource from any number of rel="icon" links you provide.
That is why a PNG-based workflow produces a complete favicon.ico replacement: a browser that finds explicit tags in the head ignores its implicit /favicon.ico request and serves one of your named PNGs instead. Browser behavior varies across surfaces and the tool does not promise which size any specific browser, bookmark surface, or operating system will display. The remaining caveat is platform-specific assets—Apple touch icons, Android manifest icons, pinned-tab SVGs, and packaged app icons—because those use separate metadata files that are deliberately outside the scope of a browser-only PNG favicon generator.
Prepare a Source Image That Reads at 16 Pixels
A favicon is rendered as small as 16×16 pixels in browser tabs and bookmark bars, which leaves far less room than most logos assume. Start with an image whose main subject sits near the center of the frame and whose silhouette holds up at thumbnail size: a single letter, a simple symbol, a geometric mark, or a high-contrast illustration. The generator applies a centered cover crop: it takes the largest possible square from the middle of the source, then resizes that square to each requested output. A landscape picture loses equal portions from its left and right edges, a portrait picture loses equal portions from the top and bottom, and a square source is not cropped at all. The rule is the same every run, which is useful for predictable logos but limiting when the subject is intentionally off-center.
If your subject sits to one side of the frame, crop it to a centered square in advance before loading the file, because the tool is not an interactive crop editor. Transparent or pale edges also matter because the tool does not remove or add a background automatically: PNG and WebP sources can preserve their existing transparency, JPEG sources begin with no transparent pixels at all, and the resulting icon should be reviewed against both light and dark backgrounds before publishing. The input must be a static PNG, JPEG, or WebP file up to 25 MB, with a post-decode pixel budget of 40 million pixels. Animated inputs and SVG are excluded by design to avoid scriptable vector content and ambiguous frame selection, so a rejected source must first be converted to a supported static raster format.
Generate the Favicon Files in Order
- Open the Favicon Generator in your current browser tab; nothing is installed and no account is required.
- Choose a PNG, JPEG, or WebP source file whose main subject sits near the center of the frame.
- Select the square pixel sizes you need from the available checkboxes: 16, 32, 48, 64, 128, 256, and 512.
- Generate the icons. Each selected size is rendered independently at its exact natural dimensions and is exported as an image/png Blob with a filename such as favicon-32x32.png.
- Inspect the smallest previews first—open the 16 and 32 pixel files at 100 percent zoom and confirm the subject is recognizable and not cut off by the center crop.
- Download each icon you want to publish. The preview is only a visual convenience; the downloaded file is always the exact dimensions named by that link.
- Copy the HTML link snippets for the sizes you actually downloaded. Each snippet uses the standard rel="icon" relationship, an image/png type, a square sizes token, and a root-relative filename.
- Upload the PNG files to the matching paths on your site (or edit each href to your real asset directory), then paste the chosen link lines into the document head.
- Reload the deployed page, view source to confirm the new tags, and clear the browser cache if an old icon still appears.
Output Sizes and Where Each One Is Used
The generator exposes a fixed list of selectable square sizes. Each one is rendered from the same decoded source at its own natural dimensions, not reused from a single scaled preview, so the published file is always the size named by the download link.
| Square size (px) | Typical display surface |
|---|---|
| 16 | Browser tab, address-bar bookmark text |
| 32 | Taskbar shortcut, high-DPI tab, bookmark bar icon on retina screens |
| 48 | Windows site shortcut, legacy desktop tile |
| 64 | Dense bookmark menus and side panels |
| 128 | Web store style surfaces and larger bookmark tiles |
| 256 | macOS Dock previews and large shortcut surfaces |
| 512 | High-resolution shortcut tiles and large reference renders |
Most small sites ship only 16 and 32 because those cover tabs and high-DPI tabs. Larger sets help on Windows and macOS surfaces where 48, 64, or 256 pixel tiles show up, and the 512 export doubles as a sharp master asset you can downscale later if your design needs to change.
Reading the HTML Snippet the Tool Gives You
Every size you select produces a link line of the same shape. The rel, type, sizes, and href attributes follow the WHATWG HTML Standard's rel="icon" relationship and are mirrored by the MDN rel icon reference, so the markup is portable across browsers without modification.
| Attribute | Value in the snippet | Purpose |
|---|---|---|
| rel | icon | Declares the resource as a favicon |
| type | image/png | Tells the browser the MIME type of the linked file |
| sizes | 16x16, 32x32, … | Square dimensions of that specific file, matching its filename |
| href | /favicon-32x32.png | Root-relative path to the asset; edit it if you store icons elsewhere |
Copy only the lines for files you actually placed on the site, paste them into the head of every page that should display the icon, and keep each href aligned with the real upload path. Multiple icon links let the browser pick the best resource, but the final pick is browser behavior—do not assume a specific operating system or bookmark surface will use a specific size.
Deployment Checklist Before You Go Live
Treat the Favicon Generator as the asset and markup stage of a wider workflow, then run a short checklist before publishing. Confirm that every downloaded PNG is openable on its own and renders correctly at 100 percent zoom, especially the 16 and 32 pixel files. Match each link line to a file you actually uploaded, and edit the href of every snippet if you store icons outside the site root—relative or absolute paths both work as long as the file is reachable. Reload the deployed page, open view-source, and confirm the new link rel="icon" tags are present in the head with the correct sizes token. If an old icon still shows in the browser tab or bookmark bar, clear site data and the browser cache; browsers aggressively cache favicons and ignore fresh files until that cache is cleared. Finally, preview the icon on both light and dark browser chrome, because pale or transparent edges behave differently against each.
Why a Favicon Can Look Blurry or Stay Cached
Two issues account for most post-deployment confusion. The first is downscaling: browsers smooth pixels during resize, so very small icons soften thin lines and tiny lettering even when the source is sharp. The fix is upstream—use a high-contrast mark with chunky shapes and open the 16 pixel export at 100 percent zoom before publishing. The second is caching: browsers persist favicons aggressively, often across restarts, so a freshly deployed icon does not appear until site data is cleared or a hard reload is performed. Test in a private window or hard-refresh with the cache disabled to confirm the new asset is reaching the browser. The tool itself does not modify your website, upload any files, or control production cache behavior—it prepares assets and markup, and the publishing step is yours to complete.