CodesBeautify

Favicon Generator

One logo in, the whole favicon package out: favicon.ico, PNG sizes, Apple touch icon, Android icons, a web app manifest and the tags to paste, previewed in a browser tab, a Google result and on a phone home screen.

Logo or source image

Drop a file here, paste from the clipboard, or choose one

PNG, JPG, GIF, WebP, SVG, BMP, processed in this tab

Favicon package
Runs locally in your browser

About the Favicon Generator

A favicon stopped being a single file years ago. A site today is asked for a favicon.ico by old browsers and bookmark bars, a 16 and 32 pixel PNG by tabs on ordinary and high density screens, a 180 pixel apple-touch-icon when someone adds the page to an iPhone home screen, 192 and 512 pixel PNGs listed in a web app manifest for Android and installable web apps, and ideally an SVG that stays sharp at any size. This generator produces every one of those from a single source image on a canvas in your browser, packs them into a zip with a manifest, a README and the exact link tags, and shows each icon in the place it will be used before you download anything.

The previews are the useful part. A logo that reads well at 512 pixels can turn into a smudge at 16, and a transparent mark can vanish against a dark tab bar, so the page mocks up a light and a dark browser tab, a light and a dark Google result with the 32 pixel icon centred on its circle, and an iOS and an Android home screen with your icon among a few grey neighbours. Touch icons are always rendered on a solid colour because iOS and Android paint transparent pixels black; the background option controls that colour, and padding pulls the artwork inward so it is not clipped by the rounded mask.

The zip is ready to drop into the root of a site, or into any folder if you change the path, which also rewrites the manifest and the tags. Everything is generated with the Canvas API and a small ICO and ZIP writer that ship with this page, so the logo never leaves the tab.

How to use

  1. Drop a square logo, ideally 512 pixels or larger, as PNG or SVG.
  2. Pick a background for the touch icons and a little padding if the mark touches the edges.
  3. Fill in the app name, theme colour and the folder the files will live in.
  4. Check the tab, Google and home screen previews, then press Download for the zip.
  5. Copy the files to your site and paste the tags from snippet.html into the head of every page.

Common questions

What is in the zip?
favicon.ico with 16, 32 and 48 pixel frames, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest, snippet.html with the link tags, a README, and favicon.svg when the source was an SVG.
Why do the phone icons have a solid background?
iOS fills transparent areas of a touch icon with black and Android does the same on most launchers, which usually looks wrong. The generator paints the background colour you chose (white by default) behind the 180, 192 and 512 pixel icons only; the tab icons keep their transparency.
Which tags do I need?
The snippet at the bottom of the result is the complete set: the ico and PNG links, the apple-touch-icon, the manifest, the app title and the theme colour. Paste it into the head of every page, or into your layout template.
Can I keep the files in a subfolder?
Yes. Set Path to something like /assets/icons/ and the manifest, the tags and the README all point there. favicon.ico is still worth copying to the root as well, because some tools request it there without reading the HTML.
My logo is not square.
It is cropped from the centre to a square before anything else, so put the important part in the middle, or crop it to a square in any editor first.