Favicon Generator
Generate favicons from an image
Drop an imageTap to choose an image
or click to browseor tap to choose
Generate a full favicon set from any image
Large files (over 50 MB) may take longer or run out of browser memory
About Favicon Generator
Generates a complete favicon package from one image: favicon.ico (16, 32 and 48 px), PNGs at 16, 32, 48, 180 (Apple touch icon), 192 and 512 (Android/PWA), a site.webmanifest, plus the HTML tags to paste into your site (including the manifest and the 192/512 icons). The Apple touch icon is always filled with the background colour (white by default).
Upload a square-ish image, choose how it fills the square (crop to fill or fit whole image), optionally add a background colour, then download the ZIP or individual files. Everything is processed in your browser.
Favicons are shown tiny, so a simple, high-contrast mark works best. Use "Fit whole image" with a background colour for logos that shouldn't be cropped.
Watch: Favicon Generator in Action
- Will a detailed logo work well as a favicon?
- Start with a simple, high-contrast source image — favicons are shown very small, so intricate details in a complex logo often just disappear at that size.
- Exactly which files are in the ZIP?
- Six PNGs, one ICO and two text files: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png (180 pixels), android-chrome-192x192.png, android-chrome-512x512.png and favicon.ico, plus site.webmanifest (which points at the 192 and 512 icons) and README.html-snippet.txt with the link tags. Unzip the bundle straight into your site folder, and set the name and short_name in site.webmanifest before use.
- What sizes are inside favicon.ico?
- Three: 16, 32 and 48 pixels. Each is stored as a PNG image inside the ICO container, which every current browser reads. Some very old programs that expect bitmap-style icon entries may not understand that arrangement.
- What is the difference between Crop to fill and Fit whole image?
- Crop to fill enlarges the picture until the square is covered and trims whatever sticks out, centered. Fit whole image shrinks it until everything is visible, leaving blank bands on the shorter side, which show your background color if one is on.
- Will the background stay transparent?
- Yes for most files, unless you tick Background. With it off, empty areas stay transparent in the ico and in every PNG except the Apple touch icon, which always gets a solid background (white if you pick no color), because iOS shows transparent icons on black. With it on, the chosen color fills the full square behind the image in all six PNGs and the ico.
- What do I paste into my site?
- The link tags in the box: the ico with sizes 48x48, PNGs at 32 and 16, the apple-touch-icon, the 192 and 512 Android icons and the manifest link. Put them in the head and upload the files to the site root, since the paths begin with a slash.
How to use Favicon Generator
Drop a logo or picture onto the upload area. Four previews appear at 16 px, 32 px, 48 px and the 180 px Apple size, drawn the way the real files will look. Under Fill, choose Crop to fill to scale the picture until it covers the square and trim the overflow, or Fit whole image to keep all of it and leave empty bands. Tick Background and pick a color if you want those bands, or the whole icon, painted solid; leave it unticked to keep transparency.
Download all (ZIP) delivers favicons.zip. favicon.ico only gives just that file. Copy tags copies the link lines for your page head, including the 192 and 512 icons and the manifest link.
When to use it
Use it when launching a site, web app or portfolio and you have one logo file but need the whole set of icon sizes that browsers, iPhones and Android home screens ask for. It also fixes the common situation of an old site that only has a single 16 pixel icon and looks blurry on modern tabs and bookmarks.
When not to use it
It builds a plain raster set from one image. If you want a separate hand-tuned design for 16 pixels, a vector SVG favicon or a maskable Android icon with a safe zone, you need a design tool. A detailed photo also turns to mush at 16 pixels, so choose a simple mark first.
Tips for best results
Start from a square image of at least 512 pixels, because the largest output is drawn at 512 pixels, and a smaller source gets enlarged and looks soft. If your logo is wide, use Fit whole image with a background color rather than letting it get cropped. Open site.webmanifest and fill in the name and short_name before you publish it; the pasted tags already link it and the 192 and 512 icons.
Limitations
The ZIP always contains the same fixed set: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png at 180, android-chrome-192x192.png, android-chrome-512x512.png, favicon.ico, a site.webmanifest that points at the 192 and 512 icons, and a text file with the tags. You cannot add or drop sizes. The ico holds the 16, 32 and 48 versions, stored as embedded PNG.
Privacy
The picture is read from your device, scaled onto in-page canvases and encoded to PNG there. The ICO container is assembled by a short routine in the page, and the ZIP is packed by a compression library that ships with the site, so no image is uploaded and no library is fetched while you work. A usage counter notes the tool name when you download.
More from Design & Color: