Zero uploads · 100% in-browser No sign-up · No watermarks · Free forever

Generate a favicon set

Drop one square image and get the whole set: a favicon.ico, the PNG sizes browsers and phones actually use, a web app manifest, and the exact link tags to paste into your head. Built in your browser.

Runs in your browser All sizes + ICO + manifest Copy-paste link tags

Drop a square image (PNG / SVG / JPG)

Best results with a 512 by 512 PNG or SVG, sharp edges, minimal detail

How to use it

One logo in, a whole favicon set out

Drop a square logo, click generate, and download the pack. The screenshot below is a real run: one 512px logo turned into every size a browser or phone asks for.

1

Drop a square logo

A 512 by 512 PNG or an SVG works best, with bold shapes and minimal detail. Set a background colour for the non-transparent sizes, add padding if the logo sits tight, and keep the iOS rounding on to match Apple's mask.

2

Generate and download the pack

Click Generate and the tool renders every size fresh from your source, shows a preview of each, and writes the exact HTML link tags for you. Download the ZIP and drop the files into your site root.

The favicon generator showing one logo rendered at 16, 32, 180, 192 and 512 pixels, plus the ready-to-paste HTML link tags and a download pack button
One logo, rendered at five sizes, with the HTML snippet ready to paste.
The sizes

What each size is for

A favicon is not one file any more. Each place that shows your icon wants its own size, and the tool builds all of them:

  • 16 and 32 pixels are the browser tab and bookmark icons. This is the one people see most, and it is small enough that fine detail disappears, so keep the logo simple.
  • 48 pixels is what Windows and several browsers reach for in shortcuts and site lists. It also goes into the favicon.ico alongside 16 and 32, so one file covers every raster request.
  • 180 pixels is the Apple touch icon, used when someone adds your site to their iPhone home screen. Rounding the corners here matches how iOS masks it.
  • 192 pixels is the Android home screen icon.
  • 512 pixels is what an installed web app or PWA uses for its splash and launcher icon.

Ship only a single tiny icon and most of these fall back to a blurry upscale or a generic globe. Providing each size is what makes your site look finished on every device.

The wiring

The HTML tags, written for you

Generating the images is only half the job; the browser still needs to be told they exist. The tool writes the link tags for you, so you paste them into your page head and you are done:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Drop the downloaded files into your site root folder so those paths resolve, and the correct icon appears everywhere automatically.

Honest limits

What this tool will not do

It cannot rescue a busy or detailed logo

At 16 pixels, fine lines, small text and gradients turn to mush. The tool renders your source faithfully, but a favicon needs a bold, simple shape to read at that size. Simplify the logo first if it looks muddy.

It is not a logo designer

It resizes and packages the image you give it. If you do not have a logo yet, you need to make one first; this tool turns an existing square graphic into a favicon set.

A rectangular source gets awkward results

Favicons are square. Feed it a wide or tall image and it fits it into a square frame, which rarely looks right. Crop to a square first with the crop tool for a clean icon.

FAQ

Frequently asked questions

Why not just one favicon?

Because different places pull different sizes: the browser tab uses 16 or 32, Windows and some browsers reach for 48, the iPhone home screen wants 180, Android uses 192, and an installed web app uses 512. Ship only one tiny icon and most of those end up blurry or fall back to a generic globe. This tool builds all six in one go, plus a multi-size favicon.ico.

What source image works best?

A square image, 512 by 512 or larger, with bold simple shapes and no fine detail, because detail vanishes at 16 pixels. An SVG is ideal because each size is rendered fresh and stays crisp. A busy photo makes a poor favicon at any size.

Where do the files go?

In your site root folder. The tool also shows you an install snippet with the exact link tags to paste into your page head, so you are not guessing which files to reference.

Do I need the manifest?

Only if you want the site to be installable as a web app on Android or as a PWA. A normal static site can ignore it, but it does no harm to include it.

Can I add padding or round the corners?

Yes. There is a padding slider for logos that sit too tight to the edge, and a checkbox to round the corners on the iOS icon so it matches Apple's own mask.

Are my images uploaded anywhere?

No. The whole set is built in your browser with the Canvas API and JSZip. The image never leaves your device, and it works offline once the page has loaded.

Related tools

Other tools you might need

Image Crop

Crop a logo to a clean square before making the favicon.

Open tool

Image Resizer

Resize a source graphic to 512px first.

Open tool

Profile Pic Cropper

Make a round avatar to match your icon.

Open tool

Background Remover

Drop the background so the icon sits on any tab colour.

Open tool

Image Converter

Convert a logo to PNG for the cleanest source.

Open tool

Image Compressor

Shrink other site images once the icon is done.

Open tool

Add Watermark

Brand full-size images to match your icon.

Open tool

Color Palette

Pull your brand colour for the icon background.

Open tool
View all 23 tools
Related guides

Learn the why behind the results

View all guides