favicon.ico
Used for: Legacy browser fallback and default root favicon requests.
Why it matters: Still worth shipping even if the rest of your favicon set is PNG or SVG.
Favicon & App Icon Generator
Upload a PNG and generate all standard sizes for favicons and app icons.
Generated sizes
16×16 favicon (classic)
32×32 favicon (retina)
48×48 Windows pinned
180×180 Apple touch icon
192×192 Android / PWA
512×512 PWA splash / store
Drop a PNG image here (square recommended)
PNG, JPG, WebP supported
What a usable favicon package actually includes
icon-32x32.png
Used for: Modern browser tab icons and desktop shortcuts.
Why it matters: This is the file most people visually recognize first because browser tabs surface it constantly.
apple-touch-icon.png
Used for: iOS home screen bookmarks and pinned site icons.
Why it matters: Needs a clean silhouette and generous padding because Apple displays it at small sizes with rounded treatment.
icon-192x192.png and icon-512x512.png
Used for: PWA manifests, install prompts, and Android shortcuts.
Why it matters: These matter less for browser tabs but more for app-like install flows and platform validation.
Favicon generation workflow
Generate all standard favicon and app icon sizes from a single high-resolution image. The tool produces a complete set ready to deploy — browser tab icons, Apple Touch Icons, and PWA manifest icons.
How to use this tool
- Prepare a square PNG image of your logo or icon. A 512×512 or larger source image produces the sharpest results at small sizes.
- Upload the image using the drop zone.
- The tool generates all standard sizes: 16×16, 32×32, and 48×48 for browser tabs and taskbars; 180×180 for iOS home screen; 192×192 and 512×512 for PWA icons.
- Review the previews — pay particular attention to the 16×16 and 32×32 sizes, where fine details may become unreadable.
- Download the icon package as a ZIP containing all generated sizes.
- Add the HTML snippet to your <head> element to wire up each icon size for the appropriate browser and platform.
Best-practice tips
- Use at least a 512×512 source image for best downscaling quality. The Canvas API scales down using high-quality interpolation.
- Avoid thin strokes, small text, and intricate details — they disappear at 16×16. Use a simplified, high-contrast version of your logo.
- Test your favicon in an actual browser tab, not just in the preview. What looks good at 512px may not be recognizable at 16px.
- iOS does not apply a rounded corner to Apple Touch Icons automatically if you add one yourself — let the OS handle corners and use a square source image.
- For SVG favicons (sharp at any resolution), use the <a href="/svg-ico">SVG/PNG/ICO Converter</a>.
Privacy note
ImageLab processes files locally in your browser. Files are not uploaded to our servers, which is useful for sensitive screenshots, internal product images, and personal photos.
Common questions
What favicon sizes does this tool generate?
The tool generates six standard sizes: 16×16 and 32×32 (browser tabs), 48×48 (Windows shortcuts), 180×180 (Apple Touch Icon for iOS), 192×192 (Android/Chrome PWA home screen icon), and 512×512 (PWA splash screen). All sizes are exported as PNG.
Do I also need a favicon.ico file?
A .ico file provides backward compatibility with older browsers that do not support PNG favicons. Use the SVG/PNG/ICO Converter to generate a multi-size .ico file (16, 32, 48px) from a PNG. Place it in your site root as favicon.ico.
What HTML do I need to add?
At minimum, add: <link rel="icon" type="image/png" href="/favicon-32.png" sizes="32x32"> and <link rel="apple-touch-icon" href="/apple-touch-icon.png">. For a full implementation, see the Favicon Size Guide.
Should my source image have a transparent background?
It depends on the platform. Browser favicons display over a tab background, so transparency works fine. Apple Touch Icons and PWA icons are displayed on colored backgrounds, so a solid background color in your source image often produces better results on those platforms.