What favicon sizes do I actually need?

For most sites: a favicon.ico containing 16, 32 and 48 px, a 32x32 PNG, a 180x180 Apple Touch icon, and 192x192 plus 512x512 icons referenced from a web manifest. That is exactly what this package contains.

Where do I put the favicon files?

In the public root of your site, so that /favicon.ico resolves. The snippet uses root paths like /favicon-32x32.png . If you place the files in a subfolder, update the paths in the snippet and in site.webmanifest .

Can I make a favicon from a PNG with a transparent background?

Yes. Keep the background set to transparent and the transparency is preserved in the ICO and all PNG files. Consider a solid color for the Apple Touch icon, since iOS usually fills transparent areas with black.

Why does my favicon look blurry?

Either the source image is smaller than the output sizes, or the logo has details too fine for 16 or 32 pixels. Use a source of at least 512x512 and, for the smallest sizes, a simplified version of your mark.

Do I have to change the web manifest?

You should. It ships with placeholder name and short_name values and white colors. Edit them so that Android shows your site's name under the home screen icon.

Is my logo uploaded anywhere?

No. Everything runs locally through WebAssembly. Nothing is sent, stored or logged on a server.

Favicon Generator: ICO, PNG and Apple Touch Icon

A favicon is no longer a single 16x16 file. Browsers read favicon.ico for tabs and bookmarks, iOS looks for a 180x180 apple-touch-icon.png when someone adds your site to the home screen, and Android and installable web apps read 192x192 and 512x512 icons from a web manifest. This favicon generator builds every one of those files from a single source image and packs them into one ZIP, together with the HTML tags that reference them.

What the favicon package contains

Each generated ZIP holds nine files. File names follow common conventions, so they usually drop into your site root without renaming.

favicon.ico: one ICO file with three frames (16x16, 32x32 and 48x48), stored as PNG-compressed frames. Legacy browsers and Windows shortcuts pick the frame that fits.
favicon-16x16.png, favicon-32x32.png, favicon-48x48.png: the same sizes as standalone PNG files, referenced by the 16 and 32 px link tags.
apple-touch-icon.png: 180x180, the size iOS and iPadOS use for home screen shortcuts.
android-chrome-192x192.png and android-chrome-512x512.png: the two sizes listed in the web manifest for Android home screens and installable web apps.
site.webmanifest: a JSON manifest that lists the two Android icons, with white theme and background colors and standalone display mode.
favicon-snippet.html: five <link> tags (ICO, 32 px PNG, 16 px PNG, Apple Touch icon, manifest) to paste into your page's <head>.

Before you publish, open site.webmanifest and replace the placeholder name and short_name values with your own site name, and adjust theme_color if white does not suit your brand.

How to create a favicon from an image

Drop a PNG, JPG, WebP, BMP, TIFF or AVIF image onto the tool. A square logo of at least 512x512 pixels gives the cleanest result, since 512 px is the largest icon generated.
Choose a fit mode: Contain or Cover (explained below).
Set the background: leave transparent or type a hex color such as #FFFFFF.
Click Generate Favicon Package. A preview grid shows each PNG with its pixel size and file size, plus the size of the ICO file.
Download the ZIP, unzip it into your site's public root, and paste the snippet into your HTML head.

Contain or cover: choosing a fit mode

Favicons are square, but logos often are not. The fit mode decides what happens to a rectangular source.

Contain (default): the whole image is scaled to fit inside the square and centered. Nothing is cut off; the leftover space on two sides is filled with the background color, or left transparent. Use it for wide wordmarks or any logo whose edges matter.
Cover: the image is scaled until it fills the square, then the center is cropped. No empty bands, but the outer parts of a wide or tall image are lost. Use it for photos, avatars or a logo mark that already sits in the middle of a larger canvas.

Resizing uses a Lanczos3 filter, which keeps edges sharp when a large logo is scaled down to 16 pixels. At that size a simplified mark reads better than a full logo.

Background: transparent or solid

A transparent background lets the icon blend into light and dark browser tabs. A solid background is the safer choice for the Apple Touch icon, because iOS does not keep transparency in home screen icons and fills those areas with a solid color, usually black. The background field accepts the word transparent or a six-digit hex color (#RRGGBB); three-digit shorthand like #FFF is rejected. The same background applies to every size in the package, so if you need a transparent tab icon and a solid Apple icon, generate twice and take the files you need from each ZIP.

Generating icons for several sites at once

Drop several source images at once: each gets its own ZIP named after the source file (for example logo-favicon-package.zip), all bundled into one favicon-packages.zip. The same fit mode and background apply to every image.

Limits worth knowing

No SVG input: the generator accepts raster images only. If your logo is an SVG, render it to a large PNG first with the SVG to PNG converter, then use that PNG here.
No SVG favicon output: the package contains ICO and PNG files only, which every browser supports. Maskable icons and dark mode variants are not generated.
Small sources get upscaled: a 64x64 source stretched to 512x512 will look soft. Start from the largest version of your logo you have.
No cropping control: Cover always crops from the center. To frame a specific part of an image, crop it first with the crop, rotate and flip tool.

Compared with desktop tools and the command line

You can produce the same files with an image editor by exporting each size by hand, or with ImageMagick using one resize command per size and a separate command to assemble the ICO. Both work, but you still have to write the manifest and link tags yourself. This tool does the whole set in one step with consistent naming.

Private by design

The favicon generator runs entirely in your browser tab. The image is decoded, resized and packed into a ZIP by Rust code compiled to WebAssembly, and no request carries your file to a server. That matters for an unreleased brand or a client logo under NDA. You can confirm it in your browser's Network tab, or load the page and go offline before generating.

Frequently asked questions

What favicon sizes do I actually need?: For most sites: a favicon.ico containing 16, 32 and 48 px, a 32x32 PNG, a 180x180 Apple Touch icon, and 192x192 plus 512x512 icons referenced from a web manifest. That is exactly what this package contains.
Where do I put the favicon files?: In the public root of your site, so that /favicon.ico resolves. The snippet uses root paths like /favicon-32x32.png. If you place the files in a subfolder, update the paths in the snippet and in site.webmanifest.
Can I make a favicon from a PNG with a transparent background?: Yes. Keep the background set to transparent and the transparency is preserved in the ICO and all PNG files. Consider a solid color for the Apple Touch icon, since iOS usually fills transparent areas with black.
Why does my favicon look blurry?: Either the source image is smaller than the output sizes, or the logo has details too fine for 16 or 32 pixels. Use a source of at least 512x512 and, for the smallest sizes, a simplified version of your mark.
Do I have to change the web manifest?: You should. It ships with placeholder name and short_name values and white colors. Edit them so that Android shows your site's name under the home screen icon.
Is my logo uploaded anywhere?: No. Everything runs locally through WebAssembly. Nothing is sent, stored or logged on a server.

If you are picking brand colors for the background field, the color palette extractor pulls the exact HEX values out of your existing logo.