Image & Photo

Favicon Generator

Drop in one image and get every favicon size a modern site needs — favicon.ico, PNG sizes for browsers, Apple, and Android, plus paste-ready HTML and manifest snippets.

Drop your logo or icon

or click to browse — PNG, JPG, WebP, or SVG up to 10 MB. A square 512×512+ source gives the cleanest result.

Private by design. Your source image is decoded and resized entirely in your browser using the Canvas API. The .ico is assembled in memory. Nothing is uploaded.

What is a favicon generator?

A favicon generator turns one source image into the family of icon files a modern website needs — the legacy .ico file that browsers fetch automatically, the small PNG sizes shown in tabs and bookmarks, the 180-pixel apple-touch-icon used when an iPhone user adds your site to their home screen, and the 192/512-pixel images Android pulls from the web manifest. Doing this by hand means opening an image editor, exporting seven separate files, and writing a long block of <link> tags in your HTML. This generator runs the entire pipeline in your browser: drop one image, get every size, and copy the matching HTML and manifest snippet. Your image never leaves the page.

How to generate a favicon set

1
Start with a square source
Upload a PNG, JPG, WebP, or SVG that is square and at least 512×512 pixels. A non-square source is letterboxed onto a square canvas so the logo is never cropped, but small details look sharpest when the source is already square.
2
Pick a background
Leave it transparent if your logo reads on both light and dark browser chrome. Switch to a solid color if your icon has a light foreground that would disappear against a white tab — most enterprise tabs are still very light.
3
Review every size
Look at the 16- and 32-pixel previews carefully. Most logos lose detail at that size. If the result is a smudge, simplify the source — fewer colors, thicker strokes, less fine type — and re-upload.
4
Download the bundle
Use Download all to grab favicon.ico plus the six PNG sizes. Place them at the root of your site. The .ico contains 16, 32, and 48 px PNGs internally, which is what current Chrome, Firefox, and Edge expect.
5
Paste the HTML and manifest
Copy the HTML snippet into the <head> of every page. Save the site.webmanifest snippet alongside the icons so Android shows the correct home-screen image when someone adds your site.

How the favicon set is built

1. Decode the uploaded image using the browser's native image loader.
2. For each target size (16, 32, 48, 180, 192, 512), draw onto a square canvas.
3. Letterbox the source so the longer side fits the canvas — never crop, never stretch.
4. Re-encode the canvas as a PNG via canvas.toBlob('image/png').
5. For favicon.ico, assemble the 16/32/48 PNGs into an ICONDIR + ICONDIRENTRY structure.
6. Concatenate the PNG bytes after the 16-byte directory entries — this is a valid multi-resolution .ico.

Modern browsers and Apple devices accept PNG bytes embedded inside an .ico container — there is no need to encode the antiquated BMP-with-AND-mask format that originally shipped with Windows 95. The container is just a six-byte header (reserved + type + count), one 16-byte directory entry per included image (size + bit depth + offset + length), and the PNG payloads concatenated. That is what this tool produces, and it is what Chrome, Firefox, Safari, and Edge fetch when they request /favicon.ico from your server.

Reference: Wikipedia — ICO file format

What works and what doesn't

Source image	What to expect
Bold square logo, 1024×1024 PNG, transparent background	Crisp at every size. The 16 and 32 px previews still read clearly. Drop straight into a production site. The ideal input.
Wide horizontal wordmark, 2000×400	Letterboxed onto a square canvas with empty bands top and bottom. The wordmark is still readable at 192 and 512 but illegible at 16 and 32 — the text is too small. Crop to a square mark before uploading.
Photographic logo with a thin gradient outline	The gradient and outline disappear at 16 and 32 px. Use a simplified, high-contrast version of the same logo for icon-sized assets. Detail loss is a source problem, not an export problem.
SVG with no explicit width or height	Renders at the default 300×150 the browser assigns SVGs without a viewBox-derived size. Add width/height attributes or a viewBox to the source SVG before uploading. SVG edge case — fix the source.

When to use a favicon generator

Launching a new site or product page and you need every favicon size in one go.
Refreshing a brand and replacing icons across an existing site without firing up Photoshop.
Spinning up an internal tool, dashboard, or admin panel that needs a recognizable tab icon.
Building a static documentation site (Docusaurus, Astro, Next.js) where the framework expects favicons at specific paths.
Generating a PWA-ready icon set so the site can be installed to a phone's home screen.
Replacing a vendor's default favicon on a SaaS subdomain you control.
Quickly testing how a candidate logo reads at 16 px before committing to it.

Related tools

Background Remover

Cut out the subject from any photo with on-device AI — no upload required.

Image Compressor

Shrink JPG, PNG, or WebP files in your browser with an interactive quality slider.

Photo Editor

Adjust, filter, rotate and crop photos in the browser — no uploads, no watermark.

Meme Maker

Compose memes and screenshot collages with real layers — paste, drag, crop, caption, export.

Frequently asked questions

Why so many sizes?

Different platforms request different sizes. Browsers fetch /favicon.ico (which contains 16, 32, and 48 px). iOS uses apple-touch-icon at 180 px when a user saves your site to their home screen. Android pulls 192 and 512 px from the web manifest for its home-screen and splash-screen icons. Shipping all of them avoids any client falling back to a blurry up-scaled small icon.

Is my image uploaded anywhere?

No. Decoding, resizing, and the .ico assembly all happen in your browser using the Canvas API and a small in-page binary writer. Nothing is sent to a server — you can verify in your browser's network tab that there is no upload after the page loads.

Why is .ico still a thing in 2026?

Browsers automatically fetch /favicon.ico when no other icon is declared, so it remains the default fallback. Modern .ico files contain PNG bytes (not the legacy BMP format), so they're roughly the same size as a single PNG while covering three sizes in one request.

Should I use a transparent or solid background?

Transparent is best when your logo's silhouette reads clearly on both white and dark tabs. Use a solid color if your logo has a light foreground that would vanish against a white browser tab. Most large brands use a solid color (often the brand color) for exactly this reason.

My logo looks fine at 512 but blurry at 16 — why?

That's a source-design problem, not an export problem. At 16 px, you have 256 pixels total to depict the entire logo. Thin strokes, gradients, fine type, and inner detail all collapse. Many brands ship a separate, simplified mark for icon use — usually a single bold letter or shape.

Where do I put these files?

Drop favicon.ico and all six PNGs at the root of your site (so they're served from /favicon.ico, /favicon-16x16.png, etc.). Save the manifest as site.webmanifest at the same root. Then paste the HTML snippet into the <head> of every page or the shared layout/template.

Do I need every size in 2026?

Strictly, you can get away with a single high-resolution PNG and let the browser scale, but the result is visibly soft at 16 px. The full set is only seven small files (under 30 KB total for typical logos) and gives you the sharpest result on every device.

Last updated 2026-04-28

What is a favicon generator?

How to generate a favicon set

Start with a square source

Upload a PNG, JPG, WebP, or SVG that is square and at least 512×512 pixels. A non-square source is letterboxed onto a square canvas so the logo is never cropped, but small details look sharpest when the source is already square.

Pick a background

Leave it transparent if your logo reads on both light and dark browser chrome. Switch to a solid color if your icon has a light foreground that would disappear against a white tab — most enterprise tabs are still very light.

Review every size

Look at the 16- and 32-pixel previews carefully. Most logos lose detail at that size. If the result is a smudge, simplify the source — fewer colors, thicker strokes, less fine type — and re-upload.

Download the bundle

Use Download all to grab favicon.ico plus the six PNG sizes. Place them at the root of your site. The .ico contains 16, 32, and 48 px PNGs internally, which is what current Chrome, Firefox, and Edge expect.

Paste the HTML and manifest

Copy the HTML snippet into the <head> of every page. Save the site.webmanifest snippet alongside the icons so Android shows the correct home-screen image when someone adds your site.

How the favicon set is built

1. Decode the uploaded image using the browser's native image loader.
2. For each target size (16, 32, 48, 180, 192, 512), draw onto a square canvas.
3. Letterbox the source so the longer side fits the canvas — never crop, never stretch.
4. Re-encode the canvas as a PNG via canvas.toBlob('image/png').
5. For favicon.ico, assemble the 16/32/48 PNGs into an ICONDIR + ICONDIRENTRY structure.
6. Concatenate the PNG bytes after the 16-byte directory entries — this is a valid multi-resolution .ico.

What works and what doesn't

Source image	What to expect
Bold square logo, 1024×1024 PNG, transparent background	Crisp at every size. The 16 and 32 px previews still read clearly. Drop straight into a production site. The ideal input.
Wide horizontal wordmark, 2000×400	Letterboxed onto a square canvas with empty bands top and bottom. The wordmark is still readable at 192 and 512 but illegible at 16 and 32 — the text is too small. Crop to a square mark before uploading.
Photographic logo with a thin gradient outline	The gradient and outline disappear at 16 and 32 px. Use a simplified, high-contrast version of the same logo for icon-sized assets. Detail loss is a source problem, not an export problem.
SVG with no explicit width or height	Renders at the default 300×150 the browser assigns SVGs without a viewBox-derived size. Add width/height attributes or a viewBox to the source SVG before uploading. SVG edge case — fix the source.

When to use a favicon generator

Launching a new site or product page and you need every favicon size in one go.

Refreshing a brand and replacing icons across an existing site without firing up Photoshop.

Spinning up an internal tool, dashboard, or admin panel that needs a recognizable tab icon.

Building a static documentation site (Docusaurus, Astro, Next.js) where the framework expects favicons at specific paths.

Generating a PWA-ready icon set so the site can be installed to a phone's home screen.

Replacing a vendor's default favicon on a SaaS subdomain you control.

Quickly testing how a candidate logo reads at 16 px before committing to it.