Favicon Generator — ICO, PNG and Apple Touch Icon
Drop in a logo, or type a letter and pick two colors. You get a genuine multi-size favicon.ico, the PNGs that phones and browsers ask for, and the four lines of HTML that tie them together. The files are built on your device, so nothing is uploaded and nothing is stored.
Drop a logo here or browse
PNG, JPG, WebP or SVG · square works best · nothing is uploaded
Icons are square. A wide logo has to lose its edges or shrink into the middle.
A little breathing room helps a dense logo at 16 px. Too much makes it disappear.
A transparent icon vanishes against a matching browser theme. A solid square never does.
One character reads best. Three is a smear at 16 px.
The web app manifest, if you want one
Save this as manifest.webmanifest beside the icons. Android uses it when someone adds your site to their home screen.
The files a site actually needs
The list has shrunk a lot. A few years ago the standard advice ran to a dozen files and twenty lines of markup. Four files cover essentially everything in use today.
- favicon.ico — still the workhorse. Browsers request
/favicon.icofrom the site root on their own, without any HTML telling them to, so it catches every case where your markup is missing or not parsed. This one holds 16, 32 and 48 px versions. - apple-touch-icon.png at 180 × 180 — what Safari on iOS uses when someone adds your site to their home screen. iOS rounds the corners itself, so supply a full square.
- icon-192.png and icon-512.png — referenced from the web app manifest and used by Android when a site is installed or pinned.
- icon.svg — optional and only produced here in letter mode. Modern browsers accept an SVG favicon and it stays sharp at any size.
Why an ICO holds more than one image
ICO is not really an image format, it is a container. Six bytes of header, then a sixteen-byte directory entry for each image saying how big it is and where in the file it starts, then the image data itself. Since Windows Vista those entries are allowed to be complete PNG files rather than raw bitmaps, which is what this tool writes. The operating system or browser then picks whichever embedded size suits the place it is drawing: 16 px in a tab, 32 px in a bookmark bar, 48 px on a desktop shortcut.
One quirk of the format is visible in the code: a dimension is stored in a single byte, and 256 is written as zero. That is the format's hard ceiling, and the reason large icons live in PNG files instead.
Why your logo will not survive at 16 pixels
A 16 × 16 icon is 256 pixels in total. A wordmark becomes texture, a one-pixel outline disappears entirely, and anything with more than two or three shapes turns to mud. The logos that work as favicons are the ones that were already simple: a single letter, a symbol, a silhouette.
Resizing helps only so much. Browsers resample in one step, which is fast and produces soft, aliased edges; this tool halves the image repeatedly until it is close to the target size and does the last step from there, which holds edges together noticeably better. It still cannot compete with a 16 px icon drawn by hand, pixel by pixel, with strokes aligned to the grid. If your favicon really matters, draw the small one separately and use this tool for the rest.
What this tool does not do
There is no zip download. Every file here is one click, and bundling them would mean shipping a compression library to your browser so it could immediately be un-shipped at the other end.
The SVG option exists only in letter mode, and it references a system font by name. That means it can render with a different typeface on someone else's machine. For anything beyond a placeholder, open it in a vector editor and convert the text to outlines.
It also does not generate the monochrome mask icon that older versions of Safari used for pinned tabs, and it does not write anything to your server. You still have to upload the files, to the site root, and reference them with absolute paths as the snippet does.
One more limitation worth knowing: an SVG source without a width and height attribute has no intrinsic size, and browsers disagree about what to assume. If your SVG logo comes out cropped or tiny, open it, add explicit dimensions to the root element, and try again.
Why the new favicon is not showing up
Because it is cached, almost every time. Browsers cache favicons aggressively and in a store separate from the normal page cache, so a hard reload of the page often leaves the old icon in place. Load /favicon.ico directly in a tab and reload that, or try a private window to confirm the new file is really being served.
The other common surprise is dark mode. A dark logo on a transparent background is invisible against a dark browser theme, and browsers will not swap icons for you. Two fixes: give the icon a solid background so it never blends in, or use an SVG favicon with a prefers-color-scheme media query inside it, which current desktop browsers honour.
Frequently asked questions
What size should a favicon be?
There is no single size. Put 16, 32 and 48 px inside favicon.ico, add a 180 px apple-touch-icon for iOS, and 192 and 512 px PNGs for Android. This tool produces all of them from one source.
Do I still need a favicon.ico file?
Yes, and it is the one file to keep if you keep only one. Browsers ask for /favicon.ico at the site root by themselves, so it works even when the HTML link tags are missing, cached oddly or stripped by a feed reader.
Why has my favicon not changed?
Favicon caching is separate from page caching and unusually stubborn. Open the icon file directly by URL and reload it, or check in a private window. If the file itself is correct there, the page will catch up.
Can I make a favicon from a JPG?
Yes. Drop it in and the output is PNG and ICO regardless of the source. Remember that a JPG has no transparency, so you will get a solid rectangle unless you crop it yourself first.
Are my files uploaded anywhere?
No. Everything is drawn with the canvas element in your browser, including the ICO container, which is assembled byte by byte in JavaScript. You can disconnect from the internet after the page loads and it still works.
Last updated September 19, 2026