What This Tool Does
This favicon generator takes any square PNG and produces every favicon size modern browsers and devices need: 16×16, 32×32, 48×48 (browser tabs), 180×180 (Apple touch icon), 192×192 and 512×512 (Android / PWA), plus a site.webmanifest and the HTML tags ready to paste into your site's
.Inputs Explained
- Source Image: Square PNG recommended, at least 512×512 pixels for best quality.
- App Name: Optional — used in the web manifest for PWA installation.
- Theme Color: Optional — used for browser UI theming on mobile devices.
How It Works
The source image is drawn to Canvas elements at each target size using high-quality interpolation, then exported as PNG Blobs. The HTML snippet and web app manifest are generated with references to each size. All output files are bundled for download or individual save.
Formula / Logic Used
Favicon Generator
Upload one square PNG and get every favicon size plus the HTML snippet.
Step-by-Step Example
Generated files for any favicon:
favicon-16x16.png— browser tab (standard)favicon-32x32.png— browser tab (Retina)favicon-48x48.png— Windows shortcut, misc usesapple-touch-icon.png(180×180) — iOS home screenandroid-chrome-192x192.png— Android home screenandroid-chrome-512x512.png— Android splash screen / PWAsite.webmanifest— PWA metadata
Drop all files in your site root, paste the HTML snippet into every page's <head>.
Use Cases
- New website launch: Generate complete favicon set before going live. No more missing icons on Android or iOS.
- Rebranding: Swap all favicon sizes at once when updating your logo.
- PWA setup: Get the required 192×192 and 512×512 icons for Progressive Web App installability.
- iOS home screen: Apple touch icon (180×180) makes your site look polished when users add to home screen.
- SEO and branding: Proper favicons appear in Google search results, bookmarks, and browser tabs.
Assumptions and Limitations
- The tool generates PNG files, not the traditional .ico format. Modern browsers all accept PNG for favicons.
- For true .ico output (multi-size single file), use a dedicated tool — but .ico is largely obsolete in 2025.
- Source image should be square. Non-square sources will be distorted during resize.
- PNG sources with transparency work best. JPGs without transparency are fine but can't match dark browser UI as cleanly.
Frequently Asked Questions
Do I still need a .ico file?
No. Every modern browser (Chrome, Firefox, Safari, Edge) accepts PNG favicons via the tag. The old favicon.ico format is no longer necessary unless you need IE8 or older support.
What size should my source image be?
At least 512×512 pixels, square, PNG format. The tool downscales from your source, so higher resolution inputs produce sharper icons at every size. Avoid JPG sources for favicons — compression artifacts show at small sizes.
What is site.webmanifest for?
The web manifest is a JSON file that lets browsers install your site as a Progressive Web App (PWA). It includes icon references, theme color, and display mode. Even if you don't need PWA, including it helps mobile browsers show proper icons.
What's an Apple Touch Icon?
When iOS users 'Add to Home Screen,' Safari looks for apple-touch-icon.png (180×180). Without it, iOS generates a blurry screenshot thumbnail. Including this file makes your site look app-like on iPhones and iPads.
Where do I place the generated files?
Upload all PNG files and site.webmanifest to your site's root directory (same level as index.html). Then paste the HTML snippet into every page's
section, ideally from a shared layout template.Why are there different sizes for the same purpose?
Different contexts need different sizes: 16×16 for browser tabs, 32×32 for Retina tabs, 48×48 for Windows shortcuts, 180×180 for iOS, 192×192 and 512×512 for Android/PWA. Using one large icon would waste bandwidth on every page load.
Should my icon have a transparent background?
Generally yes for the light/dark theme compatibility. But iOS always shows icons on a rounded-rectangle white background — a fully transparent icon will look odd on iOS home screens. Test on multiple devices.
Is my image uploaded to a server?
No. Favicon generation happens entirely in your browser using Canvas. Your source image stays on your device throughout the process.
Sources and References
- MDN — Favicon — Browser favicon specification and formats.
- Web App Manifest — Reference for site.webmanifest format.
- Apple — Configuring Web Applications — Apple's guide to iOS touch icons.
- web.dev — Add a Web App Manifest — Google's PWA manifest guide.