What image should I upload?

A square PNG, JPG, WebP, or SVG works, and a square source gives the cleanest result. Non-square images are scaled to fit and centered on a transparent square rather than cropped, so a wide logo ends up with transparent bars instead of chopped ends.

Why so many files instead of just favicon.ico?

Different surfaces want different icons: desktop tabs pick between the 16/32/48px sizes inside favicon.ico, iOS home screens use the 180px apple-touch-icon, and PWA installs use icon-192 and icon-512. Shipping only one file leaves some of them blurry or blank.

Where do the files go?

Put every file from the ZIP into your site's root directory, then paste the included four-line snippet into your page's . The manifest and link tags reference the icons by root-relative paths like /favicon.ico and /icon-512.png.

I updated my favicon but the browser still shows the old one.

Browsers cache favicons aggressively. A hard refresh, clearing the cache, or opening the /favicon.ico URL directly usually forces the new icon to load; it also updates on its own once the cache expires.

Does it keep transparency?

Yes — icons are rendered on a transparent square, so a logo with a transparent background stays transparent in the tab. Be aware iOS often places the apple-touch-icon on a solid tile, so give that icon its own background if a transparent one looks wrong there.

Favicon Generator

Turn an image into a favicon.ico, apple-touch icon and manifest bundle.

Choose an image

A square PNG or SVG works best

App name (for manifest)

Generated locally — your image never leaves this browser.

What is Favicon Generator?

Favicon Generator turns one image into the complete icon set a modern site needs: a multi-size favicon.ico, apple-touch-icon, PWA icons, web manifest, and the HTML snippet to paste into your head. Create a favicon from an image for free — everything is generated in your browser and downloaded as a ZIP.

Key features

favicon.ico with embedded 16, 32, and 48px icons
180px apple-touch-icon for iOS home screens
192px and 512px PNG icons for PWA installs
site.webmanifest generated with your app name
Ready-to-paste HTML link tag snippet

Favicon Generator — favicon.ico, Apple icon & manifest

A favicon stopped being a single 16×16 file years ago. A browser tab, a pinned bookmark, a retina display, an iOS home-screen shortcut, and an installable PWA each want a different icon at a different size — and if you ship only one file, some of them fall back to a blurry upscale or show nothing at all. This tool takes one source image and builds the whole set in your browser, with no upload.

What's in the bundle

favicon.ico — a single .ico that embeds three PNGs at 16, 32, and 48px (PNG-in-ICO, which every current browser reads). One file, covering the sizes a desktop browser actually picks between.
apple-touch-icon.png — 180px, the icon iOS uses when someone adds your site to their home screen.
icon-192.png and icon-512.png — the two sizes a PWA install and Android expect.
site.webmanifest — a minimal web app manifest naming your app and pointing at the 192 and 512 icons, with display: standalone.
favicon-snippet.html — the four <link> tags that wire it all together.

How to use it

Upload an image. PNG, JPG, WebP, and SVG are accepted. A square source gives the cleanest result.
Set the app name (it defaults to "My App"). It's written into the manifest's name and short_name — the label shown under the icon once the site is installed.
Download the bundle (a ZIP named favicon). Drop the files into your site's root directory and paste the snippet into your page <head>.

Squares in, squares out — padding is preserved

Every icon is generated by containing your image inside a square canvas: it's scaled to fit and centered on a transparent background, never cropped. So a wide logo comes out with transparent space on the left and right rather than having its ends chopped off, and whatever padding you built into the source is kept. The flip side: feed it a tall or wide image and the artwork will look small inside a lot of empty space. Trim your source to a tight square first if you want it to fill the tab.

Details worth knowing

Transparency is kept. A logo on a transparent background stays transparent in the tab, which usually looks right. Note that iOS traditionally places the apple-touch-icon on a solid tile, so a design that relies on a transparent backdrop can look odd there — give that icon its own background if it matters.
Browsers cache favicons hard. After you deploy a new icon, a browser may keep showing the old one for a while. A forced refresh, or visiting the favicon.ico URL directly, usually clears it.
The manifest's theme_color and background_color default to white; edit site.webmanifest afterward if your brand needs different values.

Everything — the resizing, the .ico assembly, the manifest — is generated locally, so your image never leaves the browser.

Frequently asked questions

What image should I upload?: A square PNG, JPG, WebP, or SVG works, and a square source gives the cleanest result. Non-square images are scaled to fit and centered on a transparent square rather than cropped, so a wide logo ends up with transparent bars instead of chopped ends.
Why so many files instead of just favicon.ico?: Different surfaces want different icons: desktop tabs pick between the 16/32/48px sizes inside favicon.ico, iOS home screens use the 180px apple-touch-icon, and PWA installs use icon-192 and icon-512. Shipping only one file leaves some of them blurry or blank.
Where do the files go?: Put every file from the ZIP into your site's root directory, then paste the included four-line snippet into your page's <head>. The manifest and link tags reference the icons by root-relative paths like /favicon.ico and /icon-512.png.
I updated my favicon but the browser still shows the old one.: Browsers cache favicons aggressively. A hard refresh, clearing the cache, or opening the /favicon.ico URL directly usually forces the new icon to load; it also updates on its own once the cache expires.
Does it keep transparency?: Yes — icons are rendered on a transparent square, so a logo with a transparent background stays transparent in the tab. Be aware iOS often places the apple-touch-icon on a solid tile, so give that icon its own background if a transparent one looks wrong there.

Privacy

Generating every icon size from your source image is done locally in your browser; the image is never uploaded.