Favicon Generator

What it's for

Make the set of icons a website needs from one picture: the small favicon.ico for browser tabs, the icon iPhones and iPads use when a page is added to the home screen, the icons Android and installed web apps use, and the web app manifest that lists them.

For example, when you launch a small site and want a proper icon in tabs, bookmarks and on phones, make the whole set here from your logo.

How to use it

Choose a picture, or drop it on the page: a square PNG or SVG of 512 pixels or more works best. Previews show every icon. The background fills the Apple and maskable icons (iOS turns transparency black, and Android crops the maskable one to a circle or rounded square), and padding keeps the picture clear of those edges; the maskable icon always gets at least 10%. Both settings are remembered in this browser.

Save the icons downloads favicons.zip with favicon.ico (16, 32 and 48 pixels inside), apple-touch-icon.png (180), icon-192.png, icon-512.png, icon-mask.png, manifest.webmanifest (named from Site name), an icon.svg when you started from an SVG, and the tags for each page’s <head>, which are also shown to copy.

Example

Choose a 600 × 600 PNG logo and press Save the icons.

The message says Saved favicons.zip: 7 files. The tags to copy are:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Good to know

A picture that isn’t square is centred in a square, and a small one is enlarged, which looks blurry; detail that works at 512 pixels may vanish at 16, so a simpler version of a logo often makes a better favicon. The files are meant for the top folder of the site, as the tags and manifest assume.