Why generate so many sizes?

A single 32×32 PNG used to be enough, but modern browsers and OSes each want a different size: Chrome and Firefox tabs are 16×16, retina tabs are 32×32, iOS Safari pins want 180×180 apple-touch-icon, and Android Chrome / PWA installs reach for 512×512 from the web manifest. Shipping a single size means one platform will downscale yours and look fuzzy. The four sizes this tool exports cover every place a favicon actually shows up in 2026 without bloating your ` `.

The `.ico` container is from 1995 and was useful when IE 6 was the only browser that read it. Every browser shipping today — including IE 11 in compatibility mode — happily loads a PNG declared via ` `. PNG also compresses small icons better than ICO and supports full alpha. Skipping ICO keeps the tool 100% canvas-based and dependency-free; if you specifically need `favicon.ico` for a legacy enterprise stack, take the 32×32 PNG and run it through a one-off ICO converter — but for the public web you don't need to.

What's apple-touch-icon for?

When a user taps "Add to Home Screen" on iOS Safari, the system grabs the URL in ` ` and uses it as the home-screen icon. iOS automatically rounds the corners and adds the icon-style shine, so feed it a flat square — that's exactly what the 180×180 output of this tool gives you. The same file doubles as the icon on iPadOS bookmarks and several non-Apple PWA install prompts.

Will Safari pick this up?

Yes. Safari reads ` ` and ` ` exactly like Chrome and Firefox; the snippet this tool generates includes both, and there's nothing Safari-specific you need to add. If you're serving from `/` and you upload `favicon-32x32.png` and `apple-touch-icon.png` at the site root with the filenames shown, Safari will find them on the next refresh — no manifest required.

Should I embed an SVG favicon?

You can — ` ` works in Chrome, Firefox, Safari 16+, and Edge — and SVG is one file that scales perfectly. But: SVG favicons don't work on iOS home-screen pins, don't show up in some bookmarks UIs, and don't help with the Android 512×512 manifest icon. The safe production setup is "SVG plus PNG fallbacks", and this tool generates the PNG half. Drop the line ` ` above the PNG lines in the snippet if you have an SVG ready.

Shipping a side project and the tab still shows the framework default

You finished a Next.js or Vite app but the browser tab still has the generic globe or the Vite lightning bolt. Type the first two letters of your product, pick a brand-color background, hit download, and drop the four PNGs plus the snippet into your public folder. The tab reads as yours in under two minutes, no Photoshop and no .ico converter.

An iOS user pins your PWA and the home-screen icon looks blank

Without an apple-touch-icon, iOS Safari screenshots your page and shrinks it into a fuzzy thumbnail on the home screen. Upload your 512px logo, grab the 180x180 apple-touch-icon.png the tool emits, and add the rel="apple-touch-icon" line. Next time someone taps Add to Home Screen they get a crisp square that iOS rounds for you, matching native apps sitting beside it.

A 200-page docs site needs one consistent icon, no design tool open

For internal tools or docs you rarely want to open a design app for a 16px square. Pick your two-letter monogram, set a 25 percent corner radius and a dark background, and you have a clean favicon that reads at 16x16 in a crowded tab strip. The same monogram set covers the Android 512px manifest icon, so the install prompt stays on-brand too.

Replacing a logo across an existing site without touching servers

Marketing hands you a new SVG logo at 4pm and the old favicon is everywhere. Drop the SVG in, let the tool cover-crop it to all four sizes, and replace the files at the same paths your snippet uses. Because the filenames match what you already reference, you swap bytes only, no HTML edits, and the new mark shows on the next hard refresh.

Favicon Generator — text or image, 16/32/180/512 PNG in one go

Generate favicon set — text or upload, output 16x16 / 32x32 / 180x180 / 512x512 PNG.

Runs locally
Category Image
Best for Getting images to the right size, format, or weight before publishing.

Letters (1-3)

Background

Text color

Weight

Corner radius: 22%

Preview

16x16

32x32

180x180

512x512

HTML snippet

Drop these tags into your site head.

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">
<meta name="theme-color" content="#06e6d7">

What this tool does

A 100% client-side favicon generator. Either type 1–3 letters and pick a background, foreground, weight, and corner radius — or drop in a PNG / JPG / SVG / WebP and let the tool resize it. Output is always the same canonical set every modern site ships: 16×16 and 32×32 for browser tabs, 180×180 apple-touch-icon for iOS home screen, and 512×512 for Android Chrome and PWA manifests. Below the previews you get the exact `<link rel="icon">` snippet to paste straight into your `<head>`, with the same filenames the Download buttons produce so the references line up on first try. No upload, no server, no waiting on a third-party converter that might be down — the bytes never leave your tab; the only network hit is the file save you trigger yourself.

Tool details

Input: Files + Text + Numbers; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy + Download; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: No account required; Open the page and use it; whether results survive refresh depends on the tool.
Performance budget: Initial JS <= 16 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Image · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How Favicon Generator fits into your work

Use it while preparing images for websites, stores, social posts, forms, or handoff packages.

Image jobs

Getting images to the right size, format, or weight before publishing.
Checking privacy-sensitive EXIF and metadata before sharing a photo.
Creating publish-ready variants without uploading private assets.

Image checks

Resize to the real display size before compressing.
Review transparency, animation, and color profile changes after conversion.
Strip or review metadata when the image contains private context.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Shipping a side project and the tab still shows the framework default
You finished a Next.js or Vite app but the browser tab still has the generic globe or the Vite lightning bolt. Type the first two letters of your product, pick a brand-color background, hit download, and drop the four PNGs plus the snippet into your public folder. The tab reads as yours in under two minutes, no Photoshop and no .ico converter.
An iOS user pins your PWA and the home-screen icon looks blank
Without an apple-touch-icon, iOS Safari screenshots your page and shrinks it into a fuzzy thumbnail on the home screen. Upload your 512px logo, grab the 180x180 apple-touch-icon.png the tool emits, and add the rel="apple-touch-icon" line. Next time someone taps Add to Home Screen they get a crisp square that iOS rounds for you, matching native apps sitting beside it.
A 200-page docs site needs one consistent icon, no design tool open
For internal tools or docs you rarely want to open a design app for a 16px square. Pick your two-letter monogram, set a 25 percent corner radius and a dark background, and you have a clean favicon that reads at 16x16 in a crowded tab strip. The same monogram set covers the Android 512px manifest icon, so the install prompt stays on-brand too.
Replacing a logo across an existing site without touching servers
Marketing hands you a new SVG logo at 4pm and the old favicon is everywhere. Drop the SVG in, let the tool cover-crop it to all four sizes, and replace the files at the same paths your snippet uses. Because the filenames match what you already reference, you swap bytes only, no HTML edits, and the new mark shows on the next hard refresh.

Common pitfalls

Shipping only a 32x32 PNG. Android and iOS then upscale it and the home-screen icon looks blurry; export the 180 and 512 sizes too, which this tool does in one pass.
Uploading a logo with tight edge text. At 16x16 the text turns to mush, so feed a bold mark or a one-to-three letter monogram, not a full wordmark.
Forgetting to match filenames. If your snippet says apple-touch-icon.png but you save apple-touch-icon-180.png, iOS gets a 404; keep the exact names the Download buttons produce.

Privacy

Everything runs in your browser on a canvas element. The letters you type, the colors you pick, and any image you upload never leave the tab and are not sent to any server. The only network request is the file save you trigger yourself when you click Download. Nothing here is written to a URL, so even sharing the page link reveals none of your inputs.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

Favicon Generator — text or image, 16/32/180/512 PNG in one go

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How Favicon Generator fits into your work

Image jobs

Image checks

Good next steps

Real-world use cases

Shipping a side project and the tab still shows the framework default

An iOS user pins your PWA and the home-screen icon looks blank

A 200-page docs site needs one consistent icon, no design tool open

Replacing a logo across an existing site without touching servers

Common pitfalls

Privacy

FAQ

Placeholder Image Generator

CSS Gradient Generator

Color Converter

Image to ASCII Art

Avatar Generator

CSS Clip-Path Generator

CSS Box Shadow Generator

CSS Loaders Generator

Aspect Ratio Calculator

Base64 Image Converter

Code Screenshot Generator

CSS Shadow Generator Pro