What does a favicon generator do?
A favicon generator takes one square image and produces the several files a modern site needs for its icon. That set is a multi-size .ico for legacy requests, a run of PNGs at the sizes browsers and operating systems ask for, a 180-pixel Apple touch icon for a home screen, a web manifest that points at the larger PNGs, and the HTML to reference them. Upload one image, get the whole set as a ZIP.
The interesting part is the .ico file, which is not an image format so much as a container. It holds several images of different sizes in a single file with a short directory at the front, so a browser can pick the one that fits the space it has — 16 pixels in a tab, 32 in a bookmark bar, larger on a desktop shortcut. Older tools wrote bare bitmap data into it; modern versions of the format accept PNG payloads, which keeps transparency without a separate encoder, and that is what this tool writes.
Everything runs locally. The image is drawn into a canvas at each size, the canvas is read back as a PNG, and the ICO is assembled byte by byte in your browser. Nothing is uploaded, which matters because the source is usually a client's brand mark or a draft logo that has not been announced.
How to make a favicon
- Choose a square image at least 512 × 512 px. A wide logo will be letterboxed inside the square, so crop it first if the mark does not fill the frame.
- Set the padding if the mark should have breathing room. A few percent reads better in a browser tab, where the icon sits beside other sites.
- Pick a background: transparent keeps the mark as it is, and a solid colour helps an icon that was drawn for a white page.
- Press Generate the icon set. Every size is rendered locally and a preview grid appears.
- Download favicons.zip, then copy the .ico, the PNGs, the Apple touch icon and the manifest to your site root.
- Paste the provided link tags into your head, reload with a hard refresh, and confirm the tab icon changed.
Favicon Generator limits and rules
| Item | Limit |
|---|---|
| Input | PNG, JPG, WebP, GIF or SVG, up to 10 MB, ideally 512 × 512 or larger |
| ICO contents | 16, 32, 48 and 64 pixel PNGs inside one file |
| PNG set | 16, 32, 48, 64, 96, 128, 180, 192 and 512 pixels |
| Apple touch icon | 180 × 180, the size iOS asks for |
| Manifest | 192 and 512 pixel entries, standalone display, placeholder name and theme colour |
| Live-preview | Padding from 0 to 30 percent, transparent or a solid colour |
| SVG input | Accepted, but it must carry a fixed width and height — export to PNG if it does not |
| Not included | A maskable icon safe zone, Safari pinned-tab SVG and Windows tile images |
When to use it
- Giving a new site a full icon set from the logo you already have as a PNG.
- Replacing a favicon that looks blurry in a browser tab, which is nearly always a large image scaled down by the browser rather than a properly rendered 16-pixel icon.
- Adding a home-screen icon so the site installs tidily as a web app on a phone.
- Producing the manifest and head tags as a starting point rather than hunting down the current recommended list.
- Checking what a mark looks like at 16 pixels before committing to it, since detail that reads at full size often disappears entirely.
Is it private?
The image is decoded and redrawn in this page, and the icon files are assembled in memory. Nothing is uploaded and nothing is stored, so an unreleased brand mark stays on your machine. Closing the tab discards the source and every generated file.
Frequently asked questions
Square and at least 512 × 512 pixels — the largest icon in the set is 512, and upscaling loses detail, so starting larger is better than starting exact. A non-square image is centred inside the square canvas and letterboxed, which is rarely what you want, so crop to square first. A vector source is ideal in principle, but the .ico still needs a raster image, so export the SVG at 512 or larger and upload that.
Because favicons are cached aggressively, independently of the page, and often for weeks. Browsers also request a shared /favicon.ico path, so the file is being replaced under a URL the browser already has an answer for. A hard refresh usually fixes it, and if it does not, opening the icon URL directly in a tab and reloading that does. Renaming the file to something like favicon-v2.ico and updating the link tag is the reliable fix.
Fewer than the set provides, in practice. A minimum that covers everything is the .ico with 16 and 32 inside it, a 180-pixel Apple touch icon, and 192 and 512 PNGs for the manifest. The rest are there because some contexts ask for them and the cost is a few kilobytes. What matters more than the count is that each size is rendered from the large source rather than scaled by the browser, since a browser downscaling a 512-pixel icon to 16 produces a mushier result than a purpose-rendered one.
A manifest icon whose artwork sits inside a safe zone, so a launcher can crop it to a circle, a squircle or a rounded square without cutting the mark. Android uses it for installed web apps. This generator does not produce one, because it needs its own artwork decisions: the interesting content should fit within about eighty percent of the frame, with the outer edge as bleed. If you install sites to a home screen and the icon is being clipped, adding a maskable entry with a purpose field is the fix.
Mostly, yes. A browser that finds no link tag falls back to asking for /favicon.ico, and it is also what many feed readers, bookmark sync services and older Windows contexts expect. Every current browser also accepts PNG favicons through a link tag, so the .ico is the compatibility layer rather than the main event. It costs a few kilobytes, it needs no configuration, and leaving it out is the usual reason a tab icon shows a blank page glyph on one machine and not another.
At the site root, so they answer at https://example.com/favicon.ico and so on, and the link tags go in the head element of every page — which normally means the shared layout rather than each page. The manifest is referenced with a link tag as well. If the site is served from a subdirectory, both the file locations and the paths inside the manifest need the prefix added, since those paths are resolved from the site root rather than from the page.
Related tools
Written and maintained by Md. Nur Hossain Repon.