Upload any image and instantly generate a complete favicon set — all standard PNG sizes plus a multi-resolution favicon.ico. Everything runs in your browser. Your image never leaves your device.
Drag & drop your image here
or
Supports PNG, JPG, WebP, GIF, SVG
Position & Crop
Live Preview
Drag the image to reposition. Scroll over the crop area or use the zoom slider to adjust scale. Use Fit to see the whole image, or Fill to crop-fill the square. When the preview looks right, click Generate.
Download files individually or grab everything as a ZIP.
A favicon (short for "favorite icon") is the small image displayed in browser tabs, bookmarks, browser history entries, and operating system shortcuts. At its most basic it's 16×16 pixels — roughly the size of a grain of rice on your screen — but modern browsers and devices request much larger versions for high-resolution displays, home screen icons, and progressive web apps.
Favicons are one of the most immediately noticeable signs of a professional site. When a visitor has a dozen tabs open, a distinctive favicon is often the only way they can spot yours at a glance. They also appear in bookmarks, reading lists, browser history, Windows taskbar shortcuts, macOS dock pins, and iOS/Android home screens when a user saves your page as a web app. Without a favicon, browsers display a generic grey placeholder, which signals an unfinished product.
Modern browser and device support requires files at several sizes. This generator covers all of them:
| File | Size | Primary Use |
|---|---|---|
favicon.ico |
16, 32, 48 px (multi) | Classic favicon — maximum browser compatibility including IE11 |
favicon-16x16.png |
16×16 | Standard browser tab icon |
favicon-32x32.png |
32×32 | HiDPI browser tabs, Windows taskbar shortcuts |
favicon-48x48.png |
48×48 | Windows site icon, legacy app launchers |
favicon-64x64.png |
64×64 | Larger OS shortcut slots, some browser contexts |
apple-touch-icon.png |
180×180 | iOS home screen icon when saved as a web app |
android-chrome-192x192.png |
192×192 | Android Chrome, PWA web app manifest |
android-chrome-512x512.png |
512×512 | PWA splash screens, high-resolution app icon slot |
Place the downloaded files in your site's root directory — the same folder as your index.html. Then add these lines inside the <head> tag on every page:
If you're using WordPress, Squarespace, Webflow, or Shopify, each platform has a dedicated favicon upload field in its settings — typically under Appearance or Site Settings. You'll usually only need the favicon.ico or a single PNG file for those platforms.
The most effective favicons are simple and bold. Detailed photography or complex logos become unreadable at 16×16 pixels. Common approaches that work well include a single letter or monogram from your brand name, a simplified version of your logo mark, or a distinctive geometric symbol. High contrast matters too — your favicon needs to be legible against both light and dark browser tab bars. If your source image looks good at thumbnail size, it will likely make a strong favicon.
The .ico format is a Microsoft-originated container that can embed multiple PNG images at different sizes in a single file. Modern browsers read the embedded PNGs directly. This tool generates a valid multi-resolution ICO file containing 16×16, 32×32, and 48×48 images, which covers all standard use cases. The encoding is done entirely in your browser using the Canvas API and a lightweight pure-JavaScript ICO builder — no server involved.
A: Not strictly. The minimum practical set is favicon.ico for legacy browser support, favicon-32x32.png for modern desktop browsers, and apple-touch-icon.png for iOS. The full set is recommended for the best cross-platform experience, including PWA and Android support.
A: No. This tool processes everything locally in your browser using the HTML5 Canvas API. Your image never leaves your device and no data is sent to any server.
A: PNG, JPG, WebP, GIF, and SVG. For the sharpest results, start with a square image at 512×512 pixels or larger. High-resolution source images produce cleaner output when downsampled to small favicon sizes.
A: Browsers aggressively cache favicons, sometimes for days. Try a hard refresh (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac) or open the page in a private/incognito window to see the updated icon immediately. Clearing your browser cache will also force it to reload.
A: Yes. If your source image has transparency (PNG with alpha channel), the output PNG files preserve that transparency. The ICO file also supports alpha transparency. On some OS themes, transparent areas may appear with a background color applied by the operating system.
A: The web app manifest is a small JSON file that tells Chrome and PWA-capable browsers how to install your site as an app. At minimum it needs name, icons (pointing to your 192×192 and 512×512 PNGs), theme_color, and background_color. Most site generators and frameworks create this file automatically.
Need to prepare your image before generating a favicon? The Image Resizer lets you crop to exact pixel dimensions, the Image Compressor reduces file size, and the Image Converter converts between PNG, JPG, and WebP formats.
Buy me a coffee