Favicon Generator
Upload an image and get a complete favicon set — favicon.ico, apple-touch-icon, and Android/PWA icons — plus the exact HTML to use them.
Favicons generated below — scroll down to download.
Preview
Downloads
HTML to add to your <head>
About this favicon generator
One image in, a complete icon set out: a classic multi-resolution favicon.ico (16, 32, and 48 pixels bundled into one file, the format browser tabs and bookmarks expect), a 180×180 apple-touch-icon.png for iOS home screens, and 192×192 and 512×512 PNGs for Android and installable web-app icons. All of it is generated using your browser's built-in canvas drawing, resized and cropped on your device — your image is never uploaded anywhere to be processed.
If your source image isn't already square, "cover" crops it to fill the square frame completely (centered, trimming the longer dimension), which is usually right for photos or logos that already fill their frame. "Contain" instead shrinks the image to fit entirely inside the square, adding padding around the shorter dimension — better for a logo with important detail near the edges that "cover" might crop away. The background behind that padding (or behind any transparent areas in your source image) can be left transparent, set to white, or any custom color you pick.
Browsers actually only export images as PNG, JPEG, or WebP — there's no native way to save a .ico file directly. This tool builds the ICO container itself: a small header describing how many images are inside, a directory entry per size, and then the PNG image data for each size, all assembled according to the standard (and very stable, decades-old) ICO file format. The result is a real, valid favicon.ico that works exactly like one made by any other tool.
The HTML snippet below the previews lists every tag in the order browsers expect, ready to paste into your site's <head> — the exact thing most people have to look up every single time they set up a new site's favicons.
Every byte of the generated ICO file was checked against the documented format during development — header fields, each image's directory entry, and the exact position of each embedded PNG's data — so the file this tool produces is a properly structured favicon.ico, not an approximation.
Frequently asked questions
What sizes are actually included in favicon.ico?
16×16, 32×32, and 48×48, bundled into a single .ico file. Browsers pick whichever size fits best for a given context (browser tab, bookmark bar, and so on) automatically.
What's the difference between "cover" and "contain"?
"Cover" crops a non-square image to completely fill the square icon, centered. "Contain" shrinks the image to fit entirely within the square instead, adding padding around the shorter side rather than cropping anything away.
Do I need all of these files, or just favicon.ico?
favicon.ico alone covers most browsers, but apple-touch-icon.png matters for anyone who adds your site to their iOS home screen, and the Android/PWA sizes matter if your site can be installed as an app. Including all of them covers every common case.
Is my image uploaded anywhere?
No. Every resize, crop, and file (including the .ico file itself) is generated locally in your browser using canvas drawing; your image never leaves your device.
Where do I actually put these files on my site?
Typically in your site's root folder (alongside index.html), with the exact filenames shown here (favicon.ico, apple-touch-icon.png, and so on), referenced using the HTML snippet this tool generates.