Favicon Generator from Image
Favicon Generator turns any image into a complete favicon package, right in
your browser. Drop in a logo or picture and get a favicon.ico, every PNG size,
the Apple touch icon, a site.webmanifest, and a ready-to-paste HTML snippet — all
in one ZIP. There is no sign up and nothing is uploaded: your image is
processed entirely on your own device.
Drop a logo or image on the box above, fine-tune the padding and background colour if you like, then tap Download. You get a ZIP with favicon.ico, every PNG size, the Apple touch icon, a web manifest, and the HTML tags. Everything is built on your device — nothing is uploaded.
Got a logo that needs to be a favicon? Generate the full set in a few seconds.
Use the free Favicon Generator →What's in the Favicon Package?
One download gives you everything a modern site needs to generate a favicon in all sizes. The ZIP contains:
- favicon.ico — a multi-resolution icon holding the 16x16, 32x32, and 48x48 images.
- favicon-16x16.png and favicon-32x32.png — the browser-tab icons.
- favicon-48x48.png — the size Google asks for when it shows your icon in search results.
- apple-touch-icon.png — 180x180, for when someone adds your site to an iPhone or iPad home screen.
- icon-192.png and icon-512.png — Android and PWA home-screen icons.
- site.webmanifest — the small JSON file that points browsers at those PWA icons.
- favicon-tags.html — the exact
<head>snippet linking it all together.
How to Generate Your Favicon
- Open capsuletools.app/favicon-generator in any browser.
- Drag in your image, or tap to choose it — a square logo works best for crisp results.
- Watch the live preview update in a mock browser tab and on a mock home screen.
- Open Adjustments to add padding, or set a background colour that fills every icon — leave it transparent for see-through favicons.
- Tap Download favicon package — the complete ZIP downloads automatically.
The whole thing runs on your device using your browser's built-in Canvas engine. Many favicon tools upload your image to a server to resize it; this one never does, so there is nothing to wait for and your logo stays private.
Supported Image Formats
You can make a favicon from a PNG, JPG, or SVG, and WebP and GIF work too:
- PNG — the most common choice; keeps transparency, which carries into the favicon.
- SVG — a vector source, rasterized crisply at every output size.
- JPG — fine for photographic logos, though it has no transparency.
- WebP & GIF — both accepted; the first frame of a GIF is used.
For the sharpest result, start from a square image at least 256x256 pixels. If your source isn't square, the tool centres it and you can add padding so it doesn't crowd the edges.
How to Add the Favicon to Your Website
After you download the ZIP, unzip it and copy the files into your website's root
folder (the same place as your home page). Then open favicon-tags.html,
copy the snippet inside, and paste it into the <head> of your pages:
- Upload
favicon.icoand the PNG files to your site root. - Paste the
<link>tags fromfavicon-tags.htmlinto your<head>. - Reload your site — browsers may cache the old icon, so try a hard refresh if you don't see it right away.
What Is a site.webmanifest and Why Does It Matter?
A site.webmanifest is a small JSON file that tells browsers how your site behaves
when it's installed to a home screen — including which icons to use. Chrome reads it to offer
Add to Home Screen and to show your 192x192 and 512x512 icons as a proper app
tile. This favicon generator with manifest support writes a ready-made
site.webmanifest pointing at the generated icons, so progressive-web-app basics
work out of the box.
Does It Work on iPhone and iPad?
Yes. The package includes a 180x180 Apple touch icon, which iOS Safari uses when someone saves your site to their home screen. Because iOS icons can't be transparent, this one is always filled — with the background colour you pick in the Adjustments panel, or white if you leave the background transparent — so it looks solid and deliberate rather than see-through.
Your Files Never Leave Your Browser
Every size is rendered locally with the Canvas API, the .ico is assembled in your
browser, and the ZIP is packaged on your device — your image is never uploaded, stored, or seen
by anyone else. There is no sign up and no account, no email capture, and no
watermark. It works the same on phone, tablet, or desktop, and you can install it to your home
screen and use it offline.
Working with images in other ways too? You can convert between image formats, compress an image to shrink its size, or remove a background to a transparent PNG with the other free, private tools on Capsule Tools.
Frequently Asked Questions
Can I generate a favicon from a PNG file?
Yes. Drop a PNG onto the tool and it generates the whole favicon package — favicon.ico, the PNG sizes, the Apple touch icon, and the HTML tags. PNG is the most common source because it keeps transparency, which carries through to the favicon. A square PNG of at least 256x256 gives the sharpest result at every size.
What size should a favicon be?
There is no single size — modern sites use several. This tool exports the standard set: 16x16 and 32x32 for browser tabs, 48x48 (which Google asks for in search results), 180x180 for the Apple touch icon, and 192x192 and 512x512 for Android and PWA home screens. The 16 and 32 are also packed into a multi-resolution favicon.ico.
How do I make a favicon for my website for free?
Choose your logo or image, optionally adjust the padding and background colour, then download the ZIP. Unzip the files into your website's root folder and paste the included favicon-tags.html snippet into the <head> of your pages. It is completely free, with no account and no upload.
What is a favicon.ico file?
A favicon.ico is the classic favicon format — a single file that can hold several icon sizes at once. Browsers have requested /favicon.ico from a site's root for decades, so it is still the most reliable fallback. This tool builds a multi-resolution .ico containing the 16x16, 32x32, and 48x48 images.
Can I use an SVG as a favicon?
Yes — you can upload an SVG as your source image, and because it is a vector it is rasterized crisply at every output size. The generated package itself uses ICO and PNG files, which every browser supports, so you do not need to worry about SVG favicon compatibility.
Does this favicon generator work on iPhone?
Yes. The package includes a 180x180 Apple touch icon, which iOS Safari uses when someone adds your site to their home screen. Because iOS icons cannot be transparent, the tool fills the background with the colour you choose in the Adjustments panel — so the icon looks solid and intentional, not see-through.
What's the difference between favicon.ico and PNG favicons?
favicon.ico is one file holding multiple sizes and is the oldest, most universally supported format. PNG favicons are separate files for each size, referenced explicitly in your HTML, and give browsers sharper, modern results. You want both — that is why this tool generates the .ico and the PNG sizes together and links them all in the HTML snippet.
What is a site.webmanifest file?
A site.webmanifest is a small JSON file that tells browsers how your site should behave when installed to a home screen — including which icons (192x192 and 512x512) to use. Chrome looks for it to enable Add to Home Screen. The tool includes a ready-made site.webmanifest pointing at the generated icons, so you just drop it in your site root.
Use the free Favicon Generator →
