Favicon Generator

NewTrending 🔥

Generate all favicon sizes from a single image

Image Tools

How to Use Favicon Generator

  1. 1Upload a square image (PNG recommended)
  2. 2The tool generates all standard favicon sizes automatically
  3. 3Download individual sizes or a ZIP of all files
  4. 4Copy the HTML snippet to add favicons to your website

About Favicon Generator

Upload a single image and generate all standard favicon sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) plus an ICO file, ready for use in any website.

Key Features of Favicon Generator

  • Generates six standard sizes: 16x16, 32x32, 48x48, 96x96, 180x180, and 512x512
  • Includes the 180x180 Apple Touch Icon for iOS home screen bookmarks
  • Individual download button for each size
  • Ready-made HTML link tag snippet for every generated size
  • PNG output with transparency preserved from source image
  • Instant browser-based generation — no upload required
  • Works best with square source images at 512x512 or larger
  • One-click copy for the full HTML snippet block

Supported Formats

Input Formats

PNGJPGWEBPSVGGIFBMP

Output Formats

PNG (all sizes)

A square source image at 512x512 pixels or larger is strongly recommended for sharp results at all sizes.

Examples

Add favicon to a new website

Upload the logo, click Generate Favicons, download all sizes, and paste the HTML snippet into your document head.

Input

512x512 square logo PNG

Output

Six PNG files (16 to 512px) plus HTML snippet

Generate Apple Touch Icon for PWA

Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.

Input

New brand logo PNG

Output

Fresh set of all standard favicon sizes

Generate Apple Touch Icon for PWA

Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.

Input

App icon PNG

Output

180x180 Apple Touch Icon PNG

Common Use Cases

  • Adding a complete favicon set to a new website project
  • Updating an outdated favicon with a refreshed brand logo
  • Generating the Apple Touch Icon for iOS home screen bookmarks
  • Creating all required icon sizes for a Progressive Web App manifest
  • Providing multiple favicon sizes for better browser and OS compatibility
  • Ensuring brand consistency with a matching favicon across all browsers

Troubleshooting

Favicon appears blurry at small sizes (16x16, 32x32)

Solution

Start with a source image of at least 512x512 pixels. The downscaling algorithm needs enough detail to produce a sharp small icon.

Favicon is not showing in the browser tab

Solution

Clear the browser cache and hard-reload the page. Browsers aggressively cache favicons — even after updating the HTML, the old icon may persist for minutes.

Non-square source image appears distorted in output

Solution

Crop your source image to a square first using the Crop Image tool, then generate the favicons from the square version.

Frequently Asked Questions

What image size should I upload?

At least 512x512 pixels for best results.

What formats are generated?

PNG files for all sizes plus a multi-size ICO file.

Can I generate a .ico file?

Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.

How do I use the generated favicons in a React or Next.js app?

Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.

How do I add the favicons to my website?

Download the generated PNG files and place them in your website root or an assets folder. Then paste the provided HTML link tag snippet into the head section of your HTML file.

Why is my favicon not showing after adding the HTML snippet?

Browsers cache favicons aggressively. After updating your site, perform a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache to see the new favicon.

Can I generate a .ico file?

Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.

How do I use the generated favicons in a React or Next.js app?

Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.