Favicon Generator: Create ICO & PNG

What Is Favicon Generator?

Favicon Generator is a free browser-based tool that takes any image and produces all nine standard favicon sizes required by modern browsers, operating systems, and mobile platforms. Setting up favicons for a new website means generating a specific set of PNG files at exact pixel dimensions — 16×16 for browser tabs, 180×180 for Apple Touch icons, 192×192 and 512×512 for Android Chrome — plus several intermediate sizes. Doing this manually requires resizing in an image editor nine times. This tool does all nine in one click, shows a labeled preview of every size, and lets you download them individually or all at once. Everything runs in your browser using the Canvas API — no image leaves your device.

Key Features

• Generate multiple favicon sizes — Produces all 9 sizes defined in the FAVICON_SIZES array: 16, 32, 48, 64, 96, 128, 180, 192, and 512 pixels square. Each is rendered by drawing the original image onto a canvas at the target dimensions.
• Create ICO, PNG, and WebP formats — All generated favicons are PNG (via canvas.toDataURL('image/png')). The individual filenames follow web standards: favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, and so on.
• Apple Touch icon support — The 180×180px output is named apple-touch-icon.png, the filename iOS Safari looks for when a user adds a site to their home screen.
• Android Chrome icon support — The 192×192px output is named android-chrome-192x192.png and the 512×512px output is named android-chrome-512x512.png, matching the names specified in a standard manifest.json Web App Manifest.
• Preview all generated sizes — After generating, a grid shows every size with a labeled preview image on a transparency-grid background, the filename, exact pixel dimensions, and a description of the use case (e.g., "Browser tab icon", "Apple Touch Icon", "Chrome Web Store icon").
• Download as individual files or all as ZIP — Each size has its own download button. The "Download All" button packages all generated files — 9 PNG favicons, a favicon.ico (containing 16, 32, and 48px sizes), and a site.webmanifest — into a single favicons.zip archive for convenient download.
• Automatic favicon.ico generation — The tool builds a proper ICO container file embedding the 16, 32, and 48px PNGs using the PNG-in-ICO technique, ready for <link rel="icon" type="image/x-icon" href="/favicon.ico">.
• site.webmanifest generation — A ready-to-use Web App Manifest file referencing the 192 and 512px Android Chrome icons is included in the Download All ZIP archive.
• 100% client-side processing — The canvas resize operations run entirely in your browser. Your source image is read using FileReader and never transmitted to any server.
• Works with any image format — The file input accepts image/*, and the <img> element decodes the file. JPEG, PNG, SVG, WebP, GIF, and AVIF all work as source images.

How to Use Favicon Generator

Step 1: Upload Your Source Image

Click the upload drop zone or drag your image onto it. For best results, use a square image — the tool scales your image to fill each favicon canvas using ctx.drawImage(originalImage, 0, 0, size, size), which stretches non-square inputs. A 512×512px or larger square PNG with a transparent background is the ideal source. After the image loads, a preview showing the original dimensions (e.g., 512 x 512px) appears.

Step 2: Generate All Sizes

Click "Generate Favicons". The tool iterates through all 9 sizes in sequence: for each size, it sets the hidden canvas to that dimension, clears it, draws your image scaled to fill the canvas, and stores the resulting data URL. After the loop completes, a success toast confirms all sizes were generated.

Step 3: Preview the Results

A grid appears showing all 9 generated favicons side by side. Each item displays:

• A preview image rendered on a transparency-grid background (the preview image is capped at 64×64px display size even for larger outputs like 512×512)
• The filename (e.g., android-chrome-512x512.png)
• The exact pixel dimensions (e.g., 512x512px)
• A description of where it is used (e.g., Android Chrome splash)

This lets you visually confirm the icon looks correct at small sizes like 16×16 before downloading.

Step 4: Download Individual Files or All as ZIP

Click the download button next to any individual favicon to save that specific file. You can also download the favicon.ico separately — it contains the 16, 32, and 48px sizes in a single ICO container. To download everything at once, click "Download All" in the header of the generated favicons card. This creates a favicons.zip archive containing all 9 PNG files, the favicon.ico, and a site.webmanifest file.

Step 5: Add the Favicons to Your Website

Place the downloaded PNG files in your project's public root directory. Add the following tags to your HTML <head>:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

For Android Chrome PWA support, reference the 192×192 and 512×512 files in your manifest.json:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Practical Examples

New Website Setup

Scenario: You are launching a personal portfolio site built with Next.js and need all standard favicon sizes from your logo SVG.

Input: A 512×512px square PNG export of your logo (transparent background).

What the tool produces: Nine PNG files: favicon-16x16.png through android-chrome-512x512.png, all named and sized to match what browsers and mobile platforms expect.

Why this is useful: Setting up favicons manually requires 9 separate export operations. One click here replaces that entire step.

Chrome Web Store Icon

Scenario: You are submitting a Chrome extension and need a 128×128px icon as required by the Chrome Web Store listing guidelines.

Input: Your extension's icon artwork at any size.

What the tool produces: favicon-128x128.png labeled as "Chrome Web Store icon" — the exact file the Chrome Web Store requires.

Why this is useful: The 128×128px size is a specific requirement that many favicon generators skip. This tool includes it with the correct standard filename.

PWA Setup for a Web App

Scenario: You are adding Progressive Web App (PWA) support to a React app and need the manifest icons.

Input: A 512×512px app icon PNG.

What the tool produces: android-chrome-192x192.png (192×192px) and android-chrome-512x512.png (512×512px) — the two sizes specified in the Web App Manifest spec for Android Chrome.

Why this is useful: Android Chrome requires both sizes for proper home screen icon display and splash screen. Having them pre-named with the standard filenames avoids configuration errors.

Tips and Best Practices

Start with a square image at 512×512px or larger. The tool scales your input down to each target size using ctx.drawImage. Starting with a larger square image means more detail is available at each scale, reducing artifacts at small sizes like 16×16.

Use a transparent PNG as input for icons with shaped logos. If your logo has a non-rectangular shape (a circle, shield, or custom outline), supply a PNG with a transparent background. The transparent areas carry through to each favicon, which looks correct in browser tabs and on iOS home screens.

Preview at 16×16 before downloading. The grid shows each size at display scale. The 16×16 preview is often the most important — if your logo text is unreadable at 16px, consider a simpler mark-only version for the smallest sizes.

The "Download All" function creates a ZIP archive. All generated files — the 9 PNG favicons, the favicon.ico, and the site.webmanifest — are packaged into a single favicons.zip file for convenient download. This avoids browser download limits and keeps all files organized in one archive.

JPEG input works but transparent areas become black. If your source image is a JPEG with no transparency, the output favicons will have the same background. For icons that need a transparent background, supply a PNG source.

Check your browser's download behavior. Some browsers prompt for each file individually when "Download All" fires. If you see 9 download prompts, accept each one. In Chrome with automatic download enabled, all 9 files land in your downloads folder without prompts.

Common Issues and Troubleshooting

"Load error" toast when uploading. This fires from the img.onerror handler when the browser cannot decode the uploaded file as an image. Ensure you are uploading a valid image file (JPEG, PNG, WebP, SVG, etc.). Corrupted files or files with incorrect extensions will trigger this error.

Generated favicons look blurry at 16×16. The tool draws the full source image scaled down to 16×16 pixels using bilinear interpolation (the browser default). If your source is a detailed illustration or contains text, the 16×16 result will be blurry. This is a fundamental limitation of scaling complex artwork to small sizes — design a simplified mark for the 16×16 and 32×32 targets.

"Download All" does not start. The Download All function creates a ZIP archive using JavaScript. If the download does not trigger, check that pop-ups and downloads are allowed for the site. You can also download individual files one at a time using their respective download buttons.

Favicons are not updating in the browser after deployment. Browser favicon caching is aggressive. After deploying new favicons, force-refresh the tab (Ctrl+Shift+R or Cmd+Shift+R on Mac) or clear the browser cache. Changing the favicon filename with a cache-busting query string (e.g., href="/favicon-32x32.png?v=2") also forces refresh.

The 512×512 preview image in the grid is capped at 64px. The grid preview caps display at Math.min(size, 64) pixels to keep the grid compact. The downloaded file is the correct full 512×512px PNG — the small display size is only the preview.

Privacy and Security

Favicon Generator runs entirely in your browser. Your source image is loaded into a JavaScript Image object using FileReader.readAsDataURL, then drawn onto a hidden canvas element. No image data is sent to any external server. All nine output favicons are generated from canvas.toDataURL('image/png') locally. This is safe for proprietary logos, unreleased branding, and confidential visual assets. The tool works fully offline once the page has loaded.

Frequently Asked Questions

Is Favicon Generator free to use?

Yes, entirely free. No account is required, no watermark is added to the output, and there is no limit on how many times you can generate favicons. The Canvas API used for processing has no server-side cost.

Does Favicon Generator work offline?

Yes. After the page loads, all processing uses browser-native Canvas API and FileReader. No network calls are made during image loading, favicon generation, or downloading. It works without an internet connection.

Is my data safe with Favicon Generator?

Yes. Your image is read via FileReader into browser memory and drawn onto a canvas element. No image data leaves your browser. This is safe for unreleased logos, confidential brand assets, and proprietary iconography.

What sizes does the tool generate?

The tool generates 9 sizes: 16×16, 32×32, 48×48, 64×64, 96×96, 128×128, 180×180, 192×192, and 512×512 pixels. Each is saved as PNG with the standard filename for its use case.

What are the standard filenames for each size?

The filenames match web standards: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png, favicon-96x96.png, favicon-128x128.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, and android-chrome-512x512.png.

Does the tool generate an .ico file?

Yes. The tool automatically generates a favicon.ico file containing the 16, 32, and 48px sizes embedded as PNGs inside an ICO container. This is ready for deployment with <link rel="icon" type="image/x-icon" href="/favicon.ico">. The ICO file can be downloaded individually or is included in the "Download All" ZIP archive.

What is the 96×96 size used for?

The 96×96 favicon-96x96.png is labeled "Google TV icon" in the tool's description array. It was historically used for Google TV app icons and is included for completeness in a comprehensive favicon package.

Can I use an SVG as the source image?

Yes. The file input accepts image/* and modern browsers can decode SVG using the <img> element. The SVG is rasterized by the browser when drawn onto the canvas. The output will be a rasterized PNG — not a vector SVG favicon — which is appropriate for most use cases.

Should I use a transparent background in my source image?

Yes, if your icon has a shaped outline. Transparent backgrounds carry through to the PNG output. For icons placed on iOS home screens (apple-touch-icon.png), iOS adds rounded corners automatically, so a transparent background looks correct. For browser tab favicons, the browser's tab background shows through transparent areas.

What does the "Download All" button do exactly?

It packages all generated files into a single favicons.zip archive: the 9 PNG favicons, the favicon.ico (containing 16, 32, and 48px sizes), and a site.webmanifest file. The ZIP is generated in your browser and downloaded as one file.

Related Tools

• SVG to PNG — Convert your SVG logo to a high-resolution PNG before feeding it into the Favicon Generator.
• Image Resizer — Resize your source artwork to a square 512×512px before generating favicons for the cleanest output.
• Placeholder Generator — Generate placeholder images while you wait for final brand assets to be delivered.
• Image Converter — Convert the generated PNG favicons to WebP or other formats if your deployment requires them.

Try Favicon Generator now: Glyph Widgets Favicon Generator