Favicon Generator
A favicon is the small icon a browser shows in a tab, a bookmark list or a history entry, and modern sites need more than the classic favicon.ico: the home screen icon Apple's iOS uses, the install icons Android and Chrome use, and a web app manifest describing them all each expect their own file at their own size. The Favicon Generator builds every one of them from a single image and packages the result as a Complete Favicon Pack in one ZIP.
Upload a JPG or PNG, choose how it should fit into a square, add padding or a background color if Contain mode needs one, then generate. Every output size is rendered from the same square master image, so the crop and placement stay consistent across the whole pack. The image you upload is processed on your own device and is never sent anywhere.
Runs in your browser. Favicon Generator processes your input on your own device. Nothing you enter or upload is sent to a server.
Did this tool help you? ☕
WebzTools is free to use. If this tool saved you some time, you can support the project with a coffee and help us keep improving the tools.
(opens in a new tab)How to use the Favicon Generator
- Drop a JPG or PNG onto the upload area, or click it to choose a file.
- Pick Contain to keep the whole image inside the square, or Cover to crop it so it fills the square. Contain also offers a background color and padding.
- Optionally add a site name, short name, theme color and background color for the web app manifest.
- Select Generate Favicon Pack and check the previews at each size.
- Select Download Favicon Pack (.zip), or download any of the 8 files individually, then copy the HTML tags into your site's head.
Supported formats: JPG, JPEG and PNG input. Output is favicon-pack.zip, containing favicon.ico, five PNG icons and site.webmanifest.
What is in the favicon pack
Every file is rendered from the same 512 by 512 master image, so the crop, padding and background you choose stay identical across the whole pack. The ZIP always contains exactly these 8 files, no more and no fewer.
| File | Size | Purpose |
|---|---|---|
| favicon.ico | 16, 32 and 48 px in one file | The classic favicon that older and non-browser contexts still look for first |
| favicon-16x16.png | 16 × 16 px | Browser tab icon on standard displays |
| favicon-32x32.png | 32 × 32 px | Browser tab and taskbar icon on higher-density displays |
| favicon-96x96.png | 96 × 96 px | Desktop shortcuts and some Android launchers |
| apple-touch-icon.png | 180 × 180 px | Home screen icon on iPhone and iPad |
| android-chrome-192x192.png | 192 × 192 px | Home screen and app list icon on Android |
| android-chrome-512x512.png | 512 × 512 px | Splash screens and install prompts on Android |
| site.webmanifest | Text file | Tells the browser which icon to use at which size |
Contain or Cover
Contain keeps the entire image visible: it scales the source to fit inside the square, centers it, and fills any leftover space with the background you choose. Nothing is ever cropped, so use it when the whole mark matters.
Cover scales the source up until it fills the square completely, then keeps only the centered portion, trimming whatever does not fit. Nothing is stretched, but the edges of a non-square image are cut off, so use it for photos or artwork where losing the exact edges does not matter.
Contain
Input
1200 × 800 logo, Contain mode, 10% padding, white background
Output
Centered inside every square output with a white margin around it, nothing cropped
Cover
Input
1200 × 800 photo, Cover mode
Output
Scaled up and center-cropped to fill the square, left and right edges trimmed, nothing stretched
A real favicon.ico, not a renamed PNG
favicon.ico is assembled in your browser as a genuine ICO container: a real ICONDIR header followed by 16, 32 and 48 pixel PNG images with their own directory entries, not a single image saved with a different file extension.
The PNG files are plain, standalone images at one exact size each, and site.webmanifest is a small JSON file naming the two Android icons, their sizes and your chosen theme and background colors. This tool builds the manifest for favicon purposes only. It is not a full Progressive Web App configuration: it does not add fields like start_url, scope or display, and it does not generate maskable icons, so none of its manifest icons declare a purpose beyond the default.
Backgrounds and padding
- A square source image needs no cropping or padding decisions; Contain and Cover produce the same result.
- Padding only applies in Contain mode. It insets the scaled image inside the square without distorting it; Cover mode fills the square completely, so padding has nothing to add there.
- Transparent backgrounds are kept only where the source image itself already has transparency. A fully opaque source stays opaque; this tool cannot invent transparency that was never in the original file.
- Apple does not render a transparent apple-touch-icon.png consistently, since iOS composites it onto a background of its own choosing. A solid background color is usually the safer choice, even if you keep the rest of the pack transparent.
Things worth knowing
- A 16 × 16 or 32 × 32 favicon has very little room for detail. Complex logos and small text often become unreadable at that size, regardless of how the source image is prepared.
- Enlarging a small source image cannot add detail it never had; the output will look soft, not sharper.
- This tool does not generate maskable icons: every manifest icon is listed without a purpose field, so Android will not crop them into a different shape.
- This is a favicon and icon generator, not a full Progressive Web App setup. The manifest covers icons, a theme color and a background color only.
- One image at a time. There is no batch favicon generation.
Frequently asked questions
What size should my favicon actually be?
There is no single size any more. This tool generates the common set a modern site is expected to provide: a multi-size favicon.ico, four square PNGs (16, 32, 96 and 180 pixels, the last one specifically for Apple), two larger Android icons (192 and 512 pixels), and a manifest that tells browsers which one to use where.
Do I need both favicon.ico and the PNG files?
Practically, yes. Older and some non-browser contexts still look for favicon.ico by convention, while modern browsers, Apple's home screen and Android's app install prompt each read a specific PNG. Using the whole pack and the HTML tags this tool gives you covers all of them.
Can I use a JPG or a PNG?
Yes, both. There is no SVG support in this tool; convert a vector logo to PNG first with SVG to PNG.
What happens if my image is not square?
You choose. Contain mode scales the whole image to fit inside the square and centers it, filling any leftover space with a transparent or solid background. Cover mode scales the image up and crops its center to fill the square completely. Neither mode stretches or distorts the image.
What is apple-touch-icon.png for?
It is the icon iOS and iPadOS use when someone adds your site to their home screen. It is always 180 by 180 pixels, and because iOS composites a transparent icon onto its own background in a way you cannot control, a solid background color is usually safer than transparent for that one file.
What are the Android 192 and 512 pixel icons for?
Android, Chrome and other apps that read site.webmanifest use android-chrome-192x192.png and android-chrome-512x512.png for the home screen icon and the install or splash screen prompt.
What does site.webmanifest do here?
It is a small text file listing the two Android icon files, their sizes and your chosen theme and background colors, so Android and Chrome know which icon to show and what color to use while a page loads. This tool generates it for favicon purposes only.
Is this a complete Progressive Web App generator?
No. The manifest only covers icons, a theme color and a background color. It does not add fields like start_url, scope or display, which a real PWA needs and which this tool has no way to set accurately on your behalf.
Is my image uploaded anywhere?
No. Every step, from decoding the image to building the ZIP, runs in your browser using canvas and JavaScript. The file never leaves your device.
Can the favicon have a transparent background?
Where your source image already has transparency and you choose Transparent in Contain mode, yes, it is kept. A source image with no transparency stays opaque; this tool cannot add transparency that was never there, and Cover mode fills the whole square with image content, so background choice has no visible effect.
Where do I put the downloaded files?
Usually at the root of your site, alongside your homepage, so the paths in the copyable HTML tags (such as /favicon.ico) resolve correctly. Paste those tags into your site's head.
Why does my favicon look blurry or unreadable at 16 pixels?
A 16 by 16 pixel square has very little room for detail. Complex logos and small text that look sharp at full size often blur together at that size, and enlarging a small source image cannot add detail it never had. Simpler marks tend to survive the smallest size better.