A favicon for your logo is just a small square PNG icon that browsers display in tabs, bookmarks, and history lists, and the easiest way to make one is to convert your logo locally into the pixel sizes you need. The Favicon Generator accepts a PNG, JPEG, or WebP file from your computer, decodes it in your current browser tab, center-crops the largest possible square from the image, and exports each requested size as its own image/png Blob with a clean filename such as favicon-32x32.png. Because every output is rendered independently at its exact natural dimensions, the 16-pixel download is genuinely 16 by 16 pixels rather than a scaled-up preview, so the smallest icon stays sharp when you inspect it at 100 percent zoom. The tool also writes the standard rel="icon" HTML link lines that match each file, so the markup and the filenames stay aligned and you can paste them straight into your document head. Nothing leaves your machine: the source image is never uploaded to a processing server, which keeps private brand assets on your computer while you prepare the website's smallest visual asset.
What the Favicon Generator Actually Does to Your Logo
The Favicon Generator is built around one narrow job: turning a single local image into a set of square PNG icons that you can attach to a website with standard HTML. After you pick a file, the browser decodes it under safety limits (up to 25 MB on disk, and up to 40 million pixels once decoded), then the generator calculates a centered cover crop. That rule takes the largest possible square from the middle of the image: a landscape picture loses equal portions from its left and right edges, a portrait picture loses equal portions from its top and bottom, and a square source is left untouched. Each selected pixel size is then drawn onto its own offscreen Canvas at full natural dimensions, exported as an image/png Blob, and named favicon-16x16.png, favicon-32x32.png, and so on. The HTML snippets that accompany each file use the rel="icon" relationship, an image/png type attribute, a square sizes token, and a root-relative href, which matches the MDN rel icon reference.
Generate a Favicon from Your Logo (Step by Step)
- Open the Favicon Generator in your current browser tab. No account or upload step is needed.
- Click the file input and choose a PNG, JPEG, or WebP version of your logo whose main subject is already near the center of the frame.
- Tick the square pixel sizes you want to ship: 16, 32, 48, 64, 128, 256, or 512. Tick only what your site actually needs.
- Wait for each preview to render. The previews are a visual sanity check; the downloads are independent renders at full natural dimensions.
- Click the download link for each chosen size. Each link delivers an image/png Blob named favicon-SIZExSIZE.png at exactly the dimensions named in the filename.
- Copy the matching HTML icon lines into the <head> of your site. Each line points at the file you just downloaded and uses the correct type and sizes attributes.
- Place the PNG files at the matching root paths, or edit each href so it points at your real asset directory if you serve icons from /assets/ or /public/.
- Open the smallest files (especially 16 and 32 pixel) at 100 percent zoom in an image viewer to confirm the subject is still recognizable.
- Clear site data and browser caches, then reload the deployed page and inspect the document head and network requests to confirm the new icon is being served.
Logo Sizes Worth Generating and Where They Appear
The tool exposes seven fixed pixel sizes. Most sites only need two or three, and which sizes matter depends on where you expect the icon to show up.
| Pixel size | Typical browser or platform surface |
|---|---|
| 16×16 | Browser tab favicon at standard display density |
| 32×32 | Browser tab favicon on high-DPI displays and bookmark bars |
| 48×48 | Windows site icon tile and dense bookmark surfaces |
| 64×64 | Higher-density bookmark panels and pinned-tab tiles |
| 128×128 | Larger browser surfaces and shortcut dialogs |
| 256×256 | macOS drag-to-desktop shortcut icons and detail panels |
| 512×512 | Maximum-size browser-side coverage and crispness reserves |
Picking more sizes gives the browser more options to choose from, but it does not force a specific icon to appear on a specific surface; the final pick is still up to each browser, bookmark surface, and operating system.
Why the Center Crop Matters for Logo Files
A favicon has very little room for detail, so the source composition matters more than the resize quality. Because the generator always uses a centered cover crop, the rule of thumb is simple: if your logo's main subject is already near the middle of the image, it will survive the crop unchanged. If your logo is intentionally offset, the crop will slice through it. In that case, run the file through an Image Cropper first so the brand mark sits squarely in the center before you generate the favicon set. The center crop also means that horizontal banners lose equal slices from the left and right, and tall vertical marks lose equal slices from the top and bottom. Plan for that when you choose which logo variant to feed in: a wide wordmark will probably not survive a square crop, but a square monogram, a centered icon, or initials in a circle usually will.
Deploying Your Favicon Files and HTML Snippets
The HTML snippets the tool generates are intentionally minimal. Each line follows the standard pattern: a rel="icon" relationship, a type="image/png" MIME hint, a sizes="WxH" token that matches the file's real dimensions, and an href pointing at the file. The WHATWG HTML Standard defines rel="icon" as the way to associate a document with an icon resource, and the MDN reference confirms that modern browsers expect a type attribute and prefer an explicit sizes value. Copy only the lines for files you actually uploaded. If you serve favicons from a folder other than the site root, edit each href so it points at the real path, such as /assets/icons/favicon-32x32.png. Then verify two things in production: open the page in a fresh browser tab and look at the document head, and watch the network panel to confirm each favicon URL returns a 200 response with an image/png content type.
Browsers also keep an old icon in their cache and site data, so a freshly deployed favicon sometimes takes a hard refresh, a cache clear, or a tab close-and-reopen before it shows up. If your old icon is still visible after deployment, clear site data and reload.
Limitations to Plan Around
The Favicon Generator's scope is deliberately narrow. It produces PNG browser favicons and matching HTML icon links; it does not produce an ICO container, an SVG icon, an Apple touch icon, an Android icon set, a pinned-tab asset, a web app manifest, or any platform-specific package. If your site needs an ICO, an Apple-touch-icon link, or a manifest.json, generate the PNGs here and then handle those formats and tags separately.
The tool also does not edit your source image beyond the centered square crop. It will not add transparency to an opaque JPEG, and it will not strip a background out of a PNG. PNG and WebP sources can carry their existing transparency through to the output, but JPEG sources begin with no transparent pixels, so the resulting favicons will be opaque rectangles on top of whatever background the browser tab uses. Inspect the smallest outputs against both light and dark browser themes if the logo has transparent or pale edges.
Finally, accept only static raster inputs. SVG, GIF, animated PNG, and animated WebP are intentionally excluded because they introduce scriptable vector content or ambiguous frame selection. If your brand mark is an SVG, export it to PNG first, then feed the PNG into the generator. Animated favicons, ICO containers, and Apple touch icons are out of scope and have to be handled with other tools.