Favicon Generator
Upload your logo and download a complete favicon package including the ICO, all PNG sizes, Apple Touch Icon, web manifest, and HTML snippet. Nothing is uploaded.
Drop your image here
PNG, JPG, SVG or WebP · Any size · Square recommended
Options
Applied to favicon.ico and non-transparent sizes.
Add white space around the logo.
What's in the package
Preview updates when you upload an image.
Copy into your <head>
From image to favicon in four steps
No account required. Everything runs in your browser and never touches a server.
Upload your image
PNG, JPG, SVG, or WebP. A square image at 512x512px gives the sharpest results at every size.
Adjust background and padding
Choose a fill colour or enable transparency. Add padding if your logo needs breathing room inside the icon bounds.
Check the preview grid
See exactly how your icon renders at 16x16, 32x32, 180x180, 512x512, and every size in between before you download.
Download and paste the snippet
One ZIP with every file you need. The included HTML snippet is ready to paste straight into your <head>.
Where each icon size actually goes
Browsers, phones, and apps all request different sizes. Here is what uses what.
Browser tabs
16x16 and 32x32
These are what appears in the browser tab and bookmarks bar on both standard and high-DPI displays. The ICO file bundles both in one.
iPhone and iPad
180x180
When someone adds your site to their iOS home screen, Safari requests the Apple Touch Icon at exactly 180px.
Android and PWAs
192x192 and 512x512
Android Chrome uses 192px for the launcher. PWA install prompts and splash screens use 512px. Both are referenced in site.webmanifest.
What actually makes a good favicon?
Most people upload a full logo and wonder why it looks muddy in the browser tab. Here is what to do instead.
Design tips
- Use a simplified mark or initial, not your full logo wordmark.
- High contrast between icon and background makes it readable at 16px.
- Start with a 512x512px square source for the cleanest downscaling.
- SVG sources scale perfectly and produce the sharpest output.
Common mistakes
- Uploading a wide banner logo that gets squashed into a square.
- Low-contrast colours that disappear on dark mode browser tabs.
- Only linking favicon.ico and skipping Apple Touch and manifest.
- Not hard-reloading after updating, since browsers cache favicons aggressively.
Frequently Asked Questions
What files are included in the download?
The ZIP contains: favicon.ico (with 16x16 and 32x32 embedded), nine PNG files at 16, 32, 48, 64, 96, 128, 180, 192, and 512px, an Apple Touch Icon, a site.webmanifest for Android and PWAs, and a README.html with a ready-to-paste HTML snippet for your page's head section.
What image format should I upload?
A square PNG with a transparent background works best, ideally 512x512px. The tool also accepts JPEG, SVG, and WebP. Square images avoid cropping. If your image is not square, it will be letterboxed with your chosen background colour.
Is my image uploaded to a server?
No. All processing uses the Canvas API and JSZip entirely within your browser. Your image is never sent to any server. The ZIP is assembled locally and downloaded directly to your device.
Why do I need so many different sizes?
Different devices request different sizes. Desktop browsers show 16x16 or 32x32px in the tab. iPhones request a 180x180px Apple Touch Icon when users add your site to their home screen. Android Chrome and Progressive Web Apps use 192x192 and 512x512px for the launcher icon and splash screen. Providing all sizes ensures your icon looks sharp on every device without the browser scaling it up or down.
I updated my favicon but the old one still shows in my browser. What do I do?
Browsers cache favicons aggressively, sometimes for days. To force a refresh, open your site, then do a hard reload with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac). In Chrome you can also open DevTools, right-click the reload button, and choose "Empty Cache and Hard Reload". If the old icon still appears in the tab, try closing and reopening the browser completely.