Favicon Generator

Site icon set and favicon.ico

Choose a file

Drop a file hereTap to choose a fileDrop it hereA near-square image of 512px or larger works best.A near-square image of 512px or larger works best.

Icons you will get

Choose an image to see the result.

16×16
Browser tab and bookmarks
32×32
Browser tab and bookmarks
48×48
Browser tab and bookmarks
180×180
iPhone and iPad home screen
192×192
Android home screen and web manifest
512×512
Android home screen and web manifest
favicon.ico
16×16 · 32×32 · 48×48

HTML to paste into your site

Put the downloaded files in your site root, then add these lines inside <head>.

<link rel="icon" href="/favicon.ico" sizes="any">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Everything happens in your browser. Your image is never uploaded or stored. The saved file carries no EXIF data from the original — no capture date, GPS location or camera details.

How to use

Turns one picture into a complete site icon set: 16, 32 and 48px for browser tabs, 180px for the iPhone home screen, 192 and 512px for Android, plus a favicon.ico — and the HTML to paste into your `<head>`. Everything is built in your browser; nothing is uploaded.

When to use it

  • Adding a tab icon to a new site or blog.
  • Regenerating the set after a logo change.
  • Covering the icon that appears when someone adds your site to a phone home screen.

How to use it

  1. Choose a source image — ideally square and at least 512px (48px minimum).
  2. Every size is previewed, with a note on where that size is used.
  3. Take the whole set as a ZIP, or just the favicon.ico.
  4. Unzip into the root folder of your site and paste the included HTML into `<head>`.

Good to know

  • The favicon.ico contains 16, 32 and 48px together — old browsers and Windows Explorer look for that file.
  • A non-square source is never cropped: it is centred and the remaining space is left transparent, because a cut-off logo is the worse outcome.
  • Sizes larger than your source are enlarged and may look soft. The tool names those sizes on screen.
  • At 16px, thin lines and lettering turn to mush. The simpler the mark, the better it survives.
  • Everything is generated locally — your logo is never uploaded.

Frequently asked questions

Do I need the .ico as well as the PNGs?

Keeping both is safest. Modern browsers read the PNGs, while older ones and Windows Explorer look for favicon.ico. The ZIP contains both and the supplied HTML links them correctly.

I replaced the icon but the old one still shows.

Browsers cache icons for a long time. Force-reload (Ctrl+Shift+R), or change the URL by appending something like ?v=2 to the file name.

What happens with a non-square image?

It is centred rather than cropped, with transparent space around it, so the whole logo stays visible. If you want it to fill the square, crop it to 1:1 first with the image cropper.

Can the icon have a transparent background?

Yes, if your source PNG is transparent. Bear in mind that a dark logo can disappear against a dark browser theme, so a solid backdrop is often the safer choice.