You Might Also Like
Favicon Generator
About this tool
Generate Every Favicon Size From Any Image
A favicon is the small icon displayed in browser tabs, bookmarks, history lists, and address bars. It is often the first brand touchpoint a visitor sees — and a missing or blurry favicon signals an unpolished site. This Favicon Generator creates every size and format you need for complete cross-browser, cross-platform favicon coverage.
Upload any image — PNG, JPEG, WebP, SVG, or GIF — and the tool instantly renders all eight standard sizes: 16×16, 32×32, 48×48, 64×64, 96×96, 180×180, 192×192, and 512×512 pixels. It also builds a proper multi-size favicon.ico file (containing 16, 32, and 48px streams) and a site.webmanifest ready for PWA installation. Everything is packaged in a single ZIP download.
All processing happens 100% in your browser — your image is never uploaded to any server.
Features
- 8 PNG sizes — 16, 32, 48, 64, 96, 180, 192, 512px generated in parallel
- favicon.ico — multi-size ICO file (16/32/48px) built using embedded PNG streams
- site.webmanifest — ready-to-use PWA manifest included in the ZIP
- HTML snippet — copy-paste
<link>tags with one click from the HTML tab - Three shape modes — Square, Rounded (20% radius), or Circle clip mask
- Transparent background — preserve alpha channel across all output files
- Background color picker — fill transparent areas with any custom color
- Padding control — 0–25% padding slider to add breathing room around the icon
- Fit vs Crop — letterbox (show full image) or center-crop to fill the square
- Download ZIP — all PNGs + ICO + manifest in one click, assembled client-side
- Individual download — download any single size separately
- 100% client-side — no uploads, no server, works offline after page load
How to Use
Step 1 — Upload your image Drag and drop your logo or icon onto the upload area, or click "Browse file" to select it. PNG with transparency works best. SVG files are also fully supported and rasterize crisply at every size.
Step 2 — Choose your shape Select Square (standard), Rounded (app-icon style with 20% corner radius), or Circle. The shape mask is applied to all generated sizes including the ICO file.
Step 3 — Set background and padding If your image has transparency, either leave it transparent or pick a background fill color. Use the Padding slider to add whitespace around the icon — useful if your logo touches the edges. Choose Fit mode to show the full image letterboxed, or Crop to center-crop it square.
Step 4 — Download
Click "Download ZIP" in the header to get a favicon-package.zip containing all 8 PNGs, favicon.ico, and site.webmanifest. Or click the ↓ button on any individual row to download just that size.
Step 5 — Add the HTML tags
Click the HTML tab to get the ready-to-paste <link> tags. Copy them into your HTML <head>. Place the downloaded files in your website's root directory (same level as index.html). That's it — your favicon is live.
Common Use Cases
Frequently Asked Questions
A complete favicon setup requires: favicon.ico (multi-size: 16×16, 32×32, 48×48) for classic browser support, favicon-16x16.png and favicon-32x32.png for modern browsers, apple-touch-icon.png (180×180) for iOS home screen bookmarks, android-chrome-192x192.png and android-chrome-512x512.png for Android PWAs and Chrome. This tool generates all of these plus a site.webmanifest in one click.
favicon.ico is the original browser tab icon format, introduced in Internet Explorer 5. It can contain multiple image sizes (16, 32, 48px) in a single file so the browser picks the best resolution. Modern browsers also read PNG favicons via <link> tags, but favicon.ico in the root of your domain provides a universal fallback — including for older browsers, RSS readers, and desktop shortcuts. This tool generates a proper multi-size favicon.ico using embedded PNG streams.
site.webmanifest (or manifest.json) is a JSON file that describes your web app for Progressive Web App (PWA) features — including the icons shown when a user adds your site to their home screen on Android. It specifies app name, theme color, display mode, and icon paths. You need it if you want Android users to see your icon correctly or if you are building a PWA. This tool generates a ready-to-use webmanifest with the 192×192 and 512×512 Android icons already wired up.
You can upload PNG, JPEG, WebP, SVG, and GIF images. PNG with a transparent background is recommended for the best results — the tool will handle transparency correctly when generating PNG favicons. For ICO output, JPEG sources are automatically composited onto a white background. SVG images are rasterized at the target size, so they stay sharp at all resolutions.
Fit mode (letterbox) preserves the full image within the square canvas — if your image is not square, empty space is filled with the background color or left transparent. This ensures nothing is cropped out. Crop mode center-crops the image to fill the entire square without any padding. Use Fit for logos with important edges, and Crop for photos or images where the subject is centered.
Click the HTML tab in the tool to get the ready-to-paste <link> tags. Place them inside the <head> section of your HTML document. The snippet includes: a universal favicon.ico reference, PNG favicons for 16 and 32px, the Apple Touch Icon for iOS, and a manifest reference for Android PWA support. Copy the snippet and paste it before the closing </head> tag.
Yes. Check the "Transparent" option in the Background section and all generated PNG files will preserve transparency. Note that favicon.ico also supports transparency when using PNG streams (this tool uses that approach). However, some operating systems and browsers may render transparent favicons with a white or dark fill behind them depending on the current theme — so test your favicon in both light and dark browser modes.
The shape option clips your image into the selected shape before rendering all sizes. Square produces a standard square favicon — the most universally compatible option. Rounded clips the image with rounded corners (20% border radius) — popular for app icons that mimic iOS/Android launcher styles. Circle clips the image into a perfect circle — useful for profile-style logos or avatars. All PNG and ICO files in the download package use the selected shape.
No. This favicon generator runs entirely in your browser using the Canvas API. Your image never leaves your device — it is processed in JavaScript locally and the generated files are created client-side. The ZIP download is also assembled in-browser without any server round-trip. This means it works offline after the page has loaded and is completely private.
The Padding slider (0–25%) adds whitespace between the edge of the favicon canvas and your image. For example, 10% padding on a 512×512 favicon leaves 51px of space on each side, shrinking the visible image area. This is useful if your logo has elements very close to the edges, or if you want to give your favicon a bit of breathing room inside a colored background circle.