How we know →

This project is still in development. Contributions are welcome: see the project on GitHub and the contributing guide.

Favicon generator GitHub

Favicon generator

Make every favicon and web app icon a site needs from one picture, with the HTML to use them.

Files

Settings

How it works
  1. Add one picture or SVG. A square one with some space around the edges works best.
  2. Move the square box to choose the part to use.
  3. Enter your site name, a short name and a theme colour.
  4. Press Create icons. Download the ZIP, put the files in the root folder of your site, and copy the lines into the head of your pages.

FAQ
What is in the ZIP?
favicon.ico with 16, 32 and 48 pixel versions, PNG icons at 16 and 32 pixels, an Apple touch icon at 180 pixels, icons at 192 and 512 pixels for installed web apps, site.webmanifest, and favicon.svg when you started from an SVG.
Where do the files go?
In the top folder of your website, so that /favicon.ico and the other paths in the HTML snippet work. If you put them elsewhere, change the paths in the snippet and in the manifest.
Why is the Apple touch icon not transparent?
iPhones draw black behind a transparent icon. It is placed on white instead. Other icons keep their transparency.
Should I use an SVG?
If you can, yes. An SVG favicon is sharp at every size, and browsers that support it prefer it. The PNG and ICO files cover the rest. The SVG is cut to the box you chose.
What is the theme colour?
Mobile browsers use it to colour their address bar, and installed web apps use it for their window. Pick the main colour of your brand.