What sizes are generated?

The tool generates PNG files at 16, 32, 48, 64, 128, 192, and 512 pixels, plus HTML link tags for the browser and Android icons.

What input formats are accepted?

PNG, JPEG, WebP, and SVG files are accepted. For best results, use a square image with a transparent background.

How do I install the favicon?

Place the generated files in your website's root directory and add the provided HTML link tags to the of your page.

Why do I need multiple sizes?

Different browsers and devices use different favicon sizes: browsers use 16/32px, while Android Chrome and progressive web apps commonly use 192/512px.

Are my images uploaded?

Yes. Images are decoded and resized with the browser Canvas API. The source image and generated icons stay on your device.

What image works best for a favicon?

Use a square source image with the important artwork centered and enough contrast to remain recognizable at 16×16 pixels. Transparent PNG or SVG sources usually produce the cleanest result.

Where do I add the generated files?

Copy the generated tags into your page's , then place each downloaded PNG at the matching path in your public website assets. Update href values if you choose another folder.

Does this generator create favicon.ico?

This tool exports PNG files for modern browsers and devices. It does not create a binary favicon.ico file; use the generated PNG tags or create an ICO separately when legacy software requires it.

What happens to a non-square image?

The browser canvas scales the source image to a square output. Non-square images are stretched, so crop or pad them to a square before generating icons.

Image Tools

Favicon Generator

Generate favicons in 7 sizes (16×16 to 512×512) as PNG from any image. Download individual sizes and get ready-to-paste HTML link tags for your site.

7 Sizes: 16px–512px
PNG Output
HTML Link Tags
Browser-only

Source image

What is a favicon?

A favicon identifies a website in browser tabs, bookmarks, desktop shortcuts, search results, and mobile launchers. One image is not enough for every platform: browser tabs commonly use 16×16 or 32×32 pixels, while touch icons and progressive web apps use larger files.

This favicon generator resizes one image into seven PNG files in your browser. It uses the Canvas API, so the source file is not uploaded to a server.

Generated favicon sizes

Output	Common use	Download name
16×16, 32×32	Browser tabs and bookmarks	`favicon-16x16.png`, `favicon-32x32.png`
48×48, 64×64, 128×128	Desktop and legacy browser contexts	`favicon-48x48.png`, `favicon-64x64.png`, `favicon-128x128.png`
192×192, 512×512	Android Chrome and PWA icons	`favicon-192x192.png`, `favicon-512x512.png`

The generator exports PNG files rather than a binary favicon.ico. PNG is supported by current browsers and keeps transparency intact. If a legacy integration specifically requires ICO, convert one of the generated PNG files with an ICO-specific tool.

Preparing a source image

Use a square PNG or SVG with the main artwork centered, minimal fine detail, and strong contrast. A favicon may be displayed at only 16 pixels, so thin lines and small lettering can disappear. For a non-square source, crop or pad it before uploading; this tool scales the full image into a square and does not add padding.

Add favicon tags to a website

Download the generated files into your public assets directory, then paste the provided tags inside the document <head>:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

Keep each href aligned with its downloaded filename. If assets live under /images/icons/, change the paths accordingly. Clear browser cache or use a private window when testing a replacement favicon.

Use favicon metadata in a web app

For a progressive web app, reference the larger files from manifest.json:

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

In a React or Next.js app, the same files can be placed in the public directory and referenced from metadata:

export const metadata = {
  icons: {
    icon: [
      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/favicon-192x192.png", sizes: "192x192", type: "image/png" }
    ]
  }
};

Common questions

Why are several sizes needed?

Browsers, operating systems, and launchers request different dimensions. Providing a matching file avoids unnecessary scaling and keeps edges sharper.

Are generated files stored online?

No. Image decoding, resizing, and PNG export happen locally in the browser. Downloaded files remain available through the generated data URLs until the page is refreshed.

Frequently Asked Questions

What sizes are generated?: The tool generates PNG files at 16, 32, 48, 64, 128, 192, and 512 pixels, plus HTML link tags for the browser and Android icons.
What input formats are accepted?: PNG, JPEG, WebP, and SVG files are accepted. For best results, use a square image with a transparent background.
How do I install the favicon?: Place the generated files in your website's root directory and add the provided HTML link tags to the <head> of your page.
Why do I need multiple sizes?: Different browsers and devices use different favicon sizes: browsers use 16/32px, while Android Chrome and progressive web apps commonly use 192/512px.
Are my images uploaded?: Yes. Images are decoded and resized with the browser Canvas API. The source image and generated icons stay on your device.
What image works best for a favicon?: Use a square source image with the important artwork centered and enough contrast to remain recognizable at 16×16 pixels. Transparent PNG or SVG sources usually produce the cleanest result.
Where do I add the generated files?: Copy the generated tags into your page's <head>, then place each downloaded PNG at the matching path in your public website assets. Update href values if you choose another folder.
Does this generator create favicon.ico?: This tool exports PNG files for modern browsers and devices. It does not create a binary favicon.ico file; use the generated PNG tags or create an ICO separately when legacy software requires it.
What happens to a non-square image?: The browser canvas scales the source image to a square output. Non-square images are stretched, so crop or pad them to a square before generating icons.

Disclaimer

This tool is provided for general informational and utility purposes only. Results may be inaccurate, incomplete, outdated, or contain errors. Always verify results before relying on or using them.

Some tools may use AI, automated processing, third-party services, or server-side processing. Do not rely on these tools as a substitute for professional advice.

Use at your own risk. BestToolOnline makes no guarantees regarding the accuracy, reliability, completeness, availability, or suitability of results, to the maximum extent permitted by applicable law.

See our Terms of Service and Privacy Policy for complete details.

Loading tool...