File

Favicon Generator

Turn a single image into a complete favicon set — favicon.ico, PNG icons, Apple touch icon, Android Chrome icons, and a web app manifest — entirely in your browser. Upload a logo or square image, tune background, padding, and rounded corners, then copy the ready-to-paste HTML.

  • Generate favicon.ico plus 16, 32, 48, 180, 192, and 512 px PNG icons in one step
  • Drop in PNG, JPG, WebP, SVG, or GIF and preview at real favicon sizes
  • Set a background color, padding, and rounded corners with a live preview
  • Produce a site.webmanifest with app name, short name, and theme color
  • Copy the HTML <link> snippet or download everything as a single ZIP
tools/Favicon Generator

Drop an image here, or click to pick a file

A square image of 512×512 or larger gives the sharpest icons.

PNG, JPG, WebP, SVG, and GIF are supported.

0%
0%

These fields only fill the site.webmanifest, used when your site is installed as an app (PWA). They do not change the icon images.

0 files
Upload an image to generate the favicon set. Previews and files will appear here.
Command

Overview

One source image becomes every icon a modern site is expected to serve — and the markup that wires them up.

  1. 01

    Every size browsers ask for

    Generates 16 px (tab and bookmark), 32 px (high-DPI tabs and the Windows taskbar), 48 px (Windows site icons), 180 px (iOS home screen), and 192 / 512 px (Android and PWA install).

  2. 02

    Multi-frame favicon.ico

    Browsers still request /favicon.ico by default. The generated .ico packs 16, 32, and 48 px frames into one file so the browser picks the right one instead of scaling a single bitmap.

  3. 03

    Background, padding, and corners

    Keep transparency or fill a solid color, add padding so the mark breathes inside Android and iOS masks, and round the corners — every change re-renders instantly across all sizes.

  4. 04

    Installable web app manifest

    Writes a valid site.webmanifest with name, short_name, theme_color, and the 192 / 512 px icon entries Chrome and Android use for the "Add to Home screen" install prompt and splash screen.

  5. 05

    Markup that matches the files

    Outputs the exact <link rel="icon">, apple-touch-icon, and manifest tags — filenames already line up, so it is paste-and-go.

  6. 06

    100% local, no upload

    Decoding, resizing, and .ico assembly all run in your browser via the Canvas API. Logos and brand assets never touch a server.

How to use

From a raw logo to wired-up icons in five steps.

  1. 01

    Upload a square source — a logo or mark at 512×512 or larger keeps the small sizes crisp.

  2. 02

    Choose transparent or a solid background; iOS fills transparency with black, so pick a color if the icon targets Apple home screens.

  3. 03

    Add a little padding (so adaptive masks do not clip the mark) and round the corners if you want a fixed shape.

  4. 04

    Set name, short name, and theme color — the site.webmanifest preview updates as you type.

  5. 05

    Download the ZIP, drop the files at your site root, and paste the HTML snippet into <head> on every page.

Details

The full bundle, matched to how each platform actually loads icons.

  • favicon.ico with embedded 16 / 32 / 48 px frames for tabs, bookmarks, and the Windows taskbar
  • Standalone PNGs at 16, 32, and 48 px for modern <link rel="icon"> declarations
  • apple-touch-icon.png at 180 px for the iOS and iPadOS home screen
  • android-chrome 192 and 512 px icons referenced by the manifest for install and splash
  • site.webmanifest with name, short_name, theme_color, background_color, and icon entries
  • Transparent or solid background with adjustable padding and corner radius, applied to every size
  • PNG, JPG, WebP, SVG, and GIF input — SVG is rasterized crisply at each target size
  • One-click ZIP plus copy-ready HTML and a live manifest preview

Use cases

Anywhere a project needs to look finished in the tab bar and on the home screen.

  1. Shipping a new site

    Replace the lone 16 px favicon a build tool left behind with a full set that stays sharp on Retina tabs and pinned tiles.

  2. Making a site installable

    Get the 192 / 512 px icons and manifest a PWA needs so Chrome shows the install prompt and Android renders a proper home-screen icon and splash.

  3. Rebranding in one pass

    Drop in the new logo and regenerate the entire icon set in seconds — no hunting down every size by hand.

  4. Internal tools and dashboards

    Give an admin panel or side project a recognizable tab icon so it stops getting lost among twenty open tabs.

  5. Framework projects

    Fill the public/ (Astro, Vite, SvelteKit) or app/ (Next.js) folder with a complete set instead of the framework default.

  6. Handing off to a developer

    Deliver one ZIP plus the exact <head> markup so anyone can wire it up without guessing filenames or sizes.

See also

If your source is in a format you would rather normalize first, run it through Image Converter to get a clean PNG. To shrink an oversized logo before generating icons, try Image Compressor so the source stays light without losing the detail the small sizes depend on.

Best practices

At 16 px there is no room to hide — these habits keep the icon readable everywhere.

  • Start from a square, high-resolution source (512×512 or larger); the tool can shrink detail but cannot invent it.
  • Simplify the mark: drop taglines and hairline strokes that collapse into mush below 32 px.
  • For Apple home screens use a solid background — iOS replaces transparency with black and does not round for you.
  • Leave roughly 10–15% padding so Android adaptive masks (circle, squircle, rounded square) never crop the logo.
  • Match theme_color to your brand and background_color to the icon so the PWA splash screen looks intentional.
  • Verify in a real tab, a pinned tab, and a phone "Add to Home screen" before you call it done.

Limitations

The generator handles resizing and packaging; a few things still come down to the source and the platform.

  • Upscaling a tiny source adds pixels, not detail — small icons will still look soft.
  • Animated GIFs are flattened to their first static frame.
  • SVGs are rasterized per size; effects like filters or external fonts may render differently than in an editor.
  • Rounded corners are baked into the PNGs, so platforms that apply their own mask can round a second time — leave radius at 0 if the OS already shapes icons.
  • The manifest covers the everyday fields; maskable icons, screenshots, and shortcuts for advanced PWAs are added by hand.
  • Browsers cache favicons aggressively — a hard refresh or a version query may be needed to see an update.

FAQ

Formats, sizes, the manifest, installation, and the usual caching gotcha.

What files does this generate?

A favicon.ico (16/32/48 px frames), PNG icons at 16, 32, 48, 180, 192, and 512 px, and a site.webmanifest — plus a copy-ready HTML snippet and a live manifest preview.

What size should my source image be?

A square image of at least 512×512. Larger square sources downscale cleanly to every size; anything smaller than 512 will look soft once Android and PWA request the big icons.

Can I use an SVG?

Yes — SVG, PNG, JPG, WebP, and GIF all work. SVG is rasterized to a crisp PNG at each target size, which is ideal because it scales without quality loss.

Should the background be transparent or solid?

Transparent is fine for browser tabs. But iOS fills transparency with black on the home screen, so choose a solid background if your icon targets apple-touch-icon.

Is my image uploaded anywhere?

No. All decoding, resizing, and .ico assembly happen locally in your browser with the Canvas API. The image never leaves your device.

Where do I put the files?

At your site root — the same level as index.html (public/ in most frameworks). Then paste the HTML snippet into the <head> of every page.

Do I still need favicon.ico?

Yes. Browsers auto-request /favicon.ico, and Windows leans on it for taskbar and pinned tiles. The snippet references it alongside the PNG icons for full coverage.

I updated the icon but the browser shows the old one?

Favicons are cached hard. Hard-refresh (Ctrl/Cmd+Shift+R), reopen the tab, or append a version query like favicon.ico?v=2 to force browsers to fetch the new file.

Related tools

Pair this with image conversion and compression to prepare clean source assets for your icons.