Favicon generator
Turn one image into a full favicon package: a multi-resolution favicon.ico, the PNG sizes, an apple-touch-icon, a site.webmanifest, and the exact HTML snippet to paste into your site. All of it built in your browser and zipped. Your image never leaves your device: no upload, no account, no tracking.
Drop an image here, paste, or
PNG, JPEG, or WebP. A square image at least 512 px works best. Generated in your browser, nothing uploaded.
The apple-touch-icon is drawn on a solid background, because Apple does not show transparency.
What this tool does
A favicon is the smallest thing on your website and one of the most looked at. It sits in the browser tab, the bookmark bar, the history list, and a phone home screen if anyone saves you there.
Producing one is fussier than it should be. Old browsers want a .ico. Current ones prefer PNGs at specific sizes. iOS wants its own icon at 180 pixels and ignores transparency. Android wants a manifest pointing at 192 and 512. Nine files and a block of markup.
Drop in one PNG, JPEG, or WebP and this page builds all of it.
The constraint worth knowing before you start: a 16 by 16 favicon is 256 pixels. That is the entire budget.
Thin strokes vanish. Text becomes texture. A mark with three elements becomes a smudge with a hint of your brand color. A logo that reads well on a business card usually needs simplifying before it works in a tab: one letter or one shape, heavier lines, more contrast, no wordmark.
This tool will not do that simplifying for you. What it does is refuse to hide the problem: the previews render at 16, 32, and 180 actual pixels beside a mock browser tab, so you find out here rather than after you deploy.
Squaring, fitting, and shrinking
Favicons are square, so a source that is not square has to be squared. Your image is never stretched to get there.
Pad, the default, centres the whole image on a square and leaves the margins transparent, or fills them with a background color you pick. Crop trims to a centred square instead, keeping more detail but losing the edges.
The shrinking happens in steps. Your image is drawn onto a square canvas at its native resolution, halved repeatedly until it is close to the target, then drawn once at exactly that size. A single draw from 1000 pixels straight down to 16 aliases badly, discarding whole rows of your logo and keeping others. Halving averages instead, which is why the 16 pixel preview looks like a small logo rather than a broken one.
There is no equivalent trick in the other direction. If the short side of your source is under 512 pixels, the largest icons are upscaled and will look soft. The page says so when you load an image that small.
Transparency survives into the PNGs and the .ico; the previews sit on a checkerboard so you can see it. The exception is the apple-touch-icon: iOS composites home screen icons onto an opaque tile, so that file is always drawn on a solid background, white unless you pick a color.
What is in the ZIP, and where to put it
Nine files, packed as favicon-package.zip.
favicon.ico holding 16, 32, and 48 pixel versions in one file. Standalone PNGs at 16, 32, 48, 192, and 512. An apple-touch-icon.png at 180. A site.webmanifest carrying your site name, theme color, and the two large icons. And favicon-snippet.html, the six tags to paste into your page.
The ICO is assembled here byte by byte, because a browser canvas can write PNG and JPEG but has never been able to write .ico. The format is a six byte header, a sixteen byte directory entry per size, then each size's PNG data appended in order. The encoder is about thirty lines.
To install, unzip everything into your site's root folder, then paste the contents of favicon-snippet.html into your <head>. No build step, no plugin. Old browsers take the .ico, current ones prefer the PNGs, and the manifest handles install prompts and the Android home screen.
Nothing is uploaded
Your image is decoded, squared, resized, PNG-encoded, packed into an ICO, and zipped, all inside your browser. It is never sent anywhere.
One thing this page fetches after it has loaded is worth naming exactly. When you press Download package, and only then, it pulls in a ZIP library of roughly 97 KB from this same address, which builds the archive locally. Your image is not part of that request.
You can see the shape of that in the failure case. Go offline, press Download package for the first time, and the button tells you the ZIP library could not load. Everything before that point, previews and settings included, keeps working with no network at all.
For the rest, open your browser's DevTools Network tab while you work. Your image never appears in the list.
SVG sources are not supported yet, so export your logo to PNG first, ideally at 512 pixels or larger. The full source is public on GitHub under the AGPL-3.0 licence, and the privacy page puts that one download in writing.
Questions
Is there a free favicon generator online?
Yes. This page is one.
Drop in a PNG, JPEG, or WebP and it builds a multi-resolution favicon.ico, the standalone PNG sizes, an apple-touch-icon, a web manifest, and the HTML snippet, then hands them over as one ZIP. It is a free online favicon generator with no upload, no install, and no account.
Can I make a favicon without uploading my image?
Yes.
Decoding, squaring, resizing, ICO assembly, and zipping all happen on your device. Your image is never sent to a server.
Open your browser's DevTools Network tab while you work. The one request you will see is the roughly 97 KB ZIP library, loaded from this site when you press Download package. Your image is not in it.
Can I make a favicon.ico from a PNG or JPEG?
Yes, and it is a real multi-resolution ICO rather than a renamed PNG.
The file holds 16, 32, and 48 pixel icons, each rendered independently from your source rather than scaled from one another. Windows and older browsers take whichever size they need out of it.
What favicon sizes do I actually need?
The practical modern set, which is what you get.
16, 32, and 48 inside favicon.ico, for legacy browsers and Windows shortcuts. The same 16 and 32 as standalone PNGs, which is what current browsers reach for first, plus a standalone 48 in case something wants it.
180 for the apple-touch-icon, used when someone adds your site to an iOS home screen. 192 and 512 for the web manifest, which drive Android home screen icons and install prompts.
My logo turns into a smudge at 16 pixels. What do I do?
Simplify the source, then come back.
The usual fixes: drop the wordmark and keep the symbol, or drop the symbol and keep one letter. Thicken the strokes. Raise the contrast against the background. Remove anything smaller than about a tenth of the width, because it will land on one or two pixels.
Switching Fit from Pad to Crop helps too, since padding spends pixels on empty margin. On a 16 pixel icon, a tenth of the width in margin costs you a pixel and a half at every edge.
Judge it in the tab mock, not in the 180 pixel preview. The 180 always looks fine.
How do I install the favicon on my site?
Unzip the package into your site's root folder, the same directory as your home page, then paste the contents of favicon-snippet.html into your <head>.
The snippet references /favicon.ico, the 16 and 32 pixel PNGs, the apple-touch-icon, /site.webmanifest, and your theme color. If your site lives in a subfolder, adjust the leading slashes to match.
Browsers cache favicons stubbornly, so a hard refresh or a private window is usually what it takes to see the new one.
Does it support transparency?
Yes, with one exception.
Leave Background set to Transparent and the padded margins stay transparent, in the standalone PNGs and inside the .ico alike.
The exception is apple-touch-icon.png. iOS draws home screen icons on its own opaque tile and will not honour transparency there, so that one file is always rendered on a solid background: white by default, or whatever background color you set.
Related tools
Crop Image | square a logo before you generate icons. Resize Image | change pixel dimensions to an exact size. Compress images | shrink file size without changing dimensions. Photo Editor | crop, redact, remove backgrounds, and batch-edit images.