Favicon Maker

Generate favicons in all standard sizes from any image. Upload your logo and download favicons for browser tabs, bookmarks, mobile devices, and PWAs.

No upload. Runs 100% in your browser.

Drag & drop your logo or image here

PNG, JPG, SVG, or WebP (max 10MB)

Generate favicon.ico and PNG Icons

favicon.ico
16+32
Browser tab
16x16.png
16px
Standard tab
32x32.png
32px
Retina tab
apple-touch
180px
iOS home
android-192
192px
Android icon
android-512
512px
PWA splash

How to Use

1
Upload your logo (PNG, JPG, SVG)
2
Add background color if needed
3
Generate all favicon sizes
4
Download as ZIP file
5
Add HTML to your site

Tips for Best Results

  • Use a square image
  • Simple designs work better at small sizes
  • PNG with transparency for logos
  • Test at small sizes before finalizing

Favicon Sizes for Browsers, iOS, Android, and PWA

Modern websites need multiple favicon sizes to display correctly across all platforms. Browser tabs use 16x16 and 32x32 pixels. iOS devices require a 180x180 Apple Touch Icon for home screen bookmarks. Android Chrome and Progressive Web Apps (PWAs) need 192x192 and 512x512 icons for app-like experiences and splash screens.

This generator creates all required sizes in one click: favicon.ico (bundled 16x16 + 32x32), individual PNG files for each size, and the larger icons needed for mobile platforms. Download everything as a ZIP file ready to deploy.

What Favicon Sizes Do I Need?

Essential (all websites): favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180x180)

For PWAs: android-chrome-192x192.png, android-chrome-512x512.png, plus a site.webmanifest file

Optional: favicon-48x48.png for Windows tiles, mstile-150x150.png for Windows 8/10 pinned sites

The favicon.ico format bundles multiple sizes (16x16 and 32x32) in a single file, ensuring compatibility with older browsers while PNG files provide better quality for modern browsers.

How to Add a Favicon to Your Website

HTML (any website):

Place favicon files in your root folder and add link tags to your <head> section. The generator provides ready-to-use HTML code.

Next.js / React:

Put favicons in your public/ folder. Next.js automatically serves files from public at the root URL. Add the link tags to your layout or _document file.

WordPress:

Go to Appearance → Customize → Site Identity and upload your icon. WordPress handles the rest. For more control, manually add link tags to your theme's header.php.

All processing happens locally in your browser. Your images are never uploaded to any server.