What is Favicon Generator?

This favicon generator creates every favicon size your website needs — from an uploaded image, typed initials, or an emoji. Pick a source and get ICO files with 16×16, 32×32, and 48×48 sizes, a scalable SVG, plus PNG versions for Apple Touch icons and Android home screens, ready to drop into your project.

Start from an image, type one to three letters with a font and shape, or pick an emoji — then the tool renders six PNGs (16, 32, 48, 180, 192, 512 pixels), a crisp SVG, and a multi-resolution ICO holding the three small sizes Windows tabs still expect. Everything bundles into a ZIP with a site.webmanifest and the exact link tags to paste into your page head. A square SVG or PNG source gives the cleanest scaling.

How to use

1. Choose a source: upload a square image (PNG, JPG, or SVG, ideally 512×512 or larger), type initials with a font and shape, or pick an emoji.
2. Preview the generated favicons at all standard sizes (16px, 32px, 48px, 180px, 192px, 512px).
3. Download the complete favicon package as a ZIP file, including the ICO file, all PNG sizes, and the HTML link tags to paste into your page head.

When to use

• Adding tab and home-screen icons to a new website or web app.
• Refreshing brand identity across an existing site after a logo redesign.
• Generating PWA icons that match the manifest spec for Add-to-Home-Screen.

Result

A developer uploads their startup's 1024×1024 logo. The tool generates a complete favicon set including favicon.ico (16/32/48), apple-touch-icon.png (180×180), and Android icons (192/512), plus the HTML meta tags.

FAQ

Why do I need so many different favicon sizes?

Each platform requests a specific size. Chrome tabs use 32 pixels, browser bookmarks 16, iOS home screens 180, Android home screens 192, and PWA splash screens 512. Shipping every size means your icon stays crisp wherever it appears.

Should I upload a PNG, an SVG, or a JPG?

SVG is best because it scales without loss to every output size. A 512 by 512 PNG is the next best option. JPG works but the lossy compression can leave halos around the edges of the icon, especially at 16 and 32 pixels.

What goes inside the ICO file?

ICO is a container format. The one this tool builds holds three bitmap layers (16, 32, and 48 pixels) so Windows picks the right one automatically depending on where the icon is shown: taskbar, file list, or browser tab.

Where do I drop the files in my project?

Unzip the package into your site's public root next to index.html. The provided link tags reference root paths (/favicon.ico, /apple-touch-icon.png), so no further config is needed for plain HTML or most frameworks like Next.js, Astro, and Vite.

My favicon updated but the browser still shows the old one. Why?

Browsers cache favicons aggressively. Hard-refresh the page (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac), or append a query string to the link tag like /favicon.ico?v=2 to force a fresh fetch. The cache usually clears within a day on its own.

Related Tools