What image formats are supported for favicon generation?

This tool accepts PNG, JPG/JPEG, and SVG files up to 10 MB. SVG is the recommended source format because it is resolution-independent and produces the sharpest favicon at every size, especially at 16×16 and 32×32.

What is the Apple Touch Icon and what size should it be?

The Apple Touch Icon (apple-touch-icon.png) is the image iOS and macOS Safari display when a user saves your website to their iPhone or iPad home screen. The standard size is 180×180 pixels. Safari automatically applies rounded corners and other visual effects.

Do I need a favicon.ico file in addition to PNG favicons?

Modern browsers (Chrome, Firefox, Safari, Edge) all support PNG favicons via . You only need favicon.ico for Internet Explorer 11 compatibility. Place a favicon.ico in your site root and browsers will pick it up as a fallback automatically.

What favicon sizes are needed for a PWA?

Progressive Web Apps require at minimum a 192×192 and a 512×512 PNG icon declared in your site.webmanifest file. The 512×512 icon is also used for splash screens on Android and iOS.

Favicon Generator — Convert PNG/JPG/SVG to All Favicon Sizes

You have a logo in SVG. Your site needs favicon.ico for legacy browsers, a 32×32 PNG for modern tabs, a 180×180 PNG for Apple touch icons, and a 512×512 PNG for the web manifest. That’s 8+ sizes from one source image — and if you skip the Apple touch icon, iOS shows a screenshot thumbnail instead of your logo. You need a tool that takes one image and outputs every size with the correct <link> tags.

Why This Generator (Not RealFaviconGenerator or Photoshop)

RealFaviconGenerator is thorough but requires uploading your image to their server and generates a complex set of files you may not need. Photoshop can resize but doesn’t generate the HTML tags. This tool processes your image entirely in your browser — upload a PNG, JPG, or SVG, get all standard sizes (16×16 through 512×512) as downloadable PNGs, plus the exact <link> tags to paste into your <head>. Your image never leaves your device.

What Is a Favicon?

A favicon (short for “favorites icon”) is the small image that appears in browser tabs, bookmarks, browser history, and on the home screen when a user saves your site as a shortcut on iOS or Android. It was first introduced by Internet Explorer 5 in 1999 and is now a standard part of every modern browser.

A favicon is one of the first visual elements users see when they open a tab to your site. A clear, sharp favicon makes your site look professional, helps users quickly locate your tab among dozens of open ones, and is a small but meaningful part of brand recognition online.

Standard Favicon Sizes and Their Uses

Different browsers, operating systems, and devices request different favicon sizes. Providing multiple sizes ensures your icon looks sharp everywhere — from a tiny 16×16 browser tab to a high-resolution 512×512 PWA splash screen.

Size	File name	Where it appears
16×16	`favicon.png`	Browser tab (standard)
32×32	`favicon-32x32.png`	Retina browser tab, Windows taskbar
48×48	`favicon-48x48.png`	Windows desktop shortcut
64×64	`favicon-64x64.png`	Windows taskbar (high DPI)
128×128	`favicon-128x128.png`	Chrome Web Store listings
180×180	`apple-touch-icon.png`	iPhone/iPad home screen (Apple Touch Icon)
192×192	`android-chrome-192x192.png`	Android Chrome / Web App Manifest
512×512	`android-chrome-512x512.png`	PWA splash screen, maskable icon

How to Add a Favicon to Your Website

After generating and downloading your favicon PNGs, place them in your site’s root directory and add the following tags inside the <head> element of every page:

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

<!-- Apple Touch Icon (iOS home screen) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Web App Manifest (PWA / Android Chrome) -->
<link rel="manifest" href="/site.webmanifest">

The tool generates the exact HTML snippet based on the sizes you selected, so you can copy it directly into your project.

Web App Manifest for Android and PWA

For Progressive Web Apps (PWA) and Android Chrome, favicons are declared inside a site.webmanifest JSON file rather than HTML link tags. Create a file called site.webmanifest in your root directory with the following content:

{
  "name": "Your App Name",
  "short_name": "App",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#ffffff"
}

The 512×512 icon is also used for splash screens on iOS and Android when the app is loading. For PWA icons, consider creating a maskable variant — an icon with extra padding around the logo so Android can safely round the corners or crop it into a circle.

Best Practices for Favicon Design

Use a square image as your source. Favicons are always square. If your source image is not square, the canvas resizer will squish it to fit. Crop your logo to a square before uploading, or use transparent padding to center it on a square canvas.

SVG is the best source format. An SVG image is infinitely scalable, so resizing to 16×16 or 512×512 produces the sharpest possible result. PNG at 512×512 or larger is a good second choice. Avoid small raster images as the source since upscaling causes blurriness.

Keep it simple. At 16×16 pixels you have only 256 pixels to work with. Intricate logos become unrecognizable at that scale. Consider a simplified monogram or icon rather than your full logo.

Check your icon against light and dark backgrounds. Modern browsers support both light and dark modes. If your icon has a white or transparent background, ensure it is legible against a dark browser tab background, and vice versa.

Use transparent backgrounds for PNG favicons. Unlike ICO files, PNG favicons support full transparency. This lets the browser’s tab background show through, making your icon look clean in both light and dark themes.

ICO vs PNG Favicons

Historically, favicons used the .ico format, which bundles multiple resolutions into a single file. Modern browsers (Chrome, Firefox, Safari, Edge) all support PNG favicons via <link rel="icon" type="image/png">. The only remaining reason to use ICO is compatibility with Internet Explorer 11 and very old browsers.

To cover IE11 without breaking modern browsers, you can place a favicon.ico file in your site root (browsers request it automatically without a link tag) while also providing PNG variants via link tags for all other sizes.

Frequently Asked Questions

What file types are supported as input? This tool accepts PNG, JPG/JPEG, and SVG files up to 10 MB. SVG input produces the sharpest results because it is resolution-independent.

Is my image uploaded to a server? No. All processing happens entirely in your browser using the HTML Canvas API. Your image is never sent to a server.

Why does my favicon look blurry at 16×16? Downscaling a complex, detailed image to 16×16 always loses detail. Use the simplest version of your logo and test with the browser tab preview in a real browser after deployment.

Do I need the ICO format? For modern sites targeting Chrome, Firefox, Safari, and Edge, PNG favicons are sufficient. Add a favicon.ico only if you need Internet Explorer 11 support.

What is apple-touch-icon.png? It is the image iOS and macOS Safari use when a user saves your site to their home screen. The standard size is 180×180. Safari applies rounded corners and visual effects automatically.

What size should I use for the PWA maskable icon? The 512×512 icon should be your highest-quality source. For maskable icons, keep your logo within the central 80% of the canvas (the “safe zone”) and fill the outer 20% with a solid background color so Android can safely crop it.

Favicon Generator

Output Sizes