liminfoFavicon Generator
Free web tool: Favicon Generator
Drop a file here, or
Choose filePNG, JPG, SVG image files (max 50MB)
Recommended Favicon Size Guide
| File | Size | Usage |
|---|---|---|
| favicon.ico | 16×16, 32×32 | Browser tab & bookmarks |
| apple-touch-icon.png | 180×180 | iOS home screen icon |
| icon-192.png | 192×192 | Android / PWA Manifest |
| icon-512.png | 512×512 | PWA splash / install icon |
About Favicon Generator
The Favicon Generator converts any raster or vector image into browser-ready favicon files entirely inside your web browser. Upload a PNG, JPG, or SVG source image (up to 50 MB), choose between ICO or PNG output, and click Generate — the tool renders your image to every required size using the browser's Canvas API and packages the results for immediate download. For ICO output it produces a single multi-resolution .ico file containing six embedded images at 16, 32, 48, 64, 128, and 256 pixels. For PNG output it generates eight separate files covering the full range from 16 × 16 to 512 × 512 pixels.
Web designers and front-end developers use favicons in multiple contexts: the classic 16 × 16 and 32 × 32 browser tab icons, the 48 × 64 px taskbar and bookmark icons on Windows, the 180 × 180 Apple Touch Icon for iOS home screens, and the 192 × 192 and 512 × 512 icons declared in a Web App Manifest for Progressive Web Apps. This tool generates all of them in a single pass, eliminating the need to manually resize images in a separate editor.
Because all processing happens in the browser using the Canvas API, your source image is never uploaded to any server. The ICO file is assembled directly in JavaScript using the ICONDIR/ICONDIRENTRY binary format, with each embedded image stored as a PNG stream inside the ICO container. This approach guarantees privacy, works offline, and produces output that is identical to server-side tools that use ImageMagick or similar libraries.
Key Features
- ICO output: single .ico file containing 6 sizes (16, 32, 48, 64, 128, 256 px) in one download
- PNG output: 8 individual PNG files (16, 32, 48, 64, 128, 180, 192, 512 px) with per-file download
- Accepts PNG, JPG, GIF, WebP, SVG, and any other browser-displayable image format
- Canvas API rendering — nearest-neighbor and bilinear scaling with no quality loss at small sizes
- ICO binary assembled in-browser: correct ICONDIR header, ICONDIRENTRY offsets, PNG stream embedding
- Live preview grid showing all generated sizes before downloading
- 100% client-side — source image never leaves your device, no server, no account required
- Dark mode support and mobile-friendly file drop zone with drag-and-drop or click-to-select
Frequently Asked Questions
What image formats can I use as input?
You can upload any image format that the browser can render: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, and TIFF. SVG files work especially well because they are resolution-independent — the Canvas API will rasterize them cleanly at every favicon size.
What is the difference between ICO and PNG output?
ICO output produces a single .ico file that bundles multiple image sizes in one container — this is the traditional favicon format recognized by all browsers and operating systems. PNG output produces separate image files for each size, which is required for Apple Touch Icons (180 px), Web App Manifest icons (192 and 512 px), and other platform-specific icon declarations.
Which sizes should I use for a complete favicon setup?
For full coverage, use the ICO file (16–256 px) as your main favicon.ico, add a 180 × 180 PNG as the Apple Touch Icon in your HTML <link rel="apple-touch-icon">, and declare 192 × 192 and 512 × 512 PNGs in your Web App Manifest. The PNG output set from this tool covers all of these sizes.
Is my image uploaded to a server?
No. The entire conversion happens inside your browser using the Canvas API and the File API. Your image is read locally via FileReader, drawn onto an off-screen <canvas> element at each target size, and exported as a PNG blob — all without any network request. The assembled ICO binary is also created in JavaScript memory using ArrayBuffer and DataView.
Why does my favicon look blurry at 16 × 16?
Very small favicons often look blurry because fine details from the original image cannot be represented at 16 pixels. For best results, start with a simple, high-contrast logo or icon — ideally a square SVG — and avoid thin lines or small text. Consider creating a simplified version of your logo specifically for small sizes.
How do I add the favicon to my website?
Place the downloaded favicon.ico in your website's root directory. Add <link rel="icon" href="/favicon.ico"> to your HTML <head>. For PNG favicons, add <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">. For the Apple Touch Icon, add <link rel="apple-touch-icon" href="/favicon-180x180.png">.
What is the recommended source image size?
Use a square image of at least 512 × 512 pixels as your source. Larger source images (1024 × 1024 or more) give the Canvas API more detail to work with when downscaling, which generally produces sharper results at all sizes. Rectangular images will be stretched to a square — crop to a square first for best quality.
Can I generate favicons for a Progressive Web App (PWA)?
Yes. Select PNG output to get individual files at 192 × 192 and 512 × 512 pixels. Reference these in your Web App Manifest's icons array with the appropriate purpose values ("maskable any") to satisfy PWA installability requirements across Chrome, Firefox, and Safari.