Your lid

Pin tools here. They are saved in this browser.

Favicon & App Icon Generator

Turn one image into a complete favicon set: favicon.ico, PNG icons, the Apple touch icon, Android and maskable icons, a web manifest and the HTML to link them.

Choose a file or drop it here PNG, JPEG, WebP, GIF or BMP. A square PNG of 512 pixels or more gives the best result.

Options

Fit

ContainCover

Background

TransparentColour

Padding0%

Corner radius0%

App background

Fills the Apple touch icon and the maskable icon, which cannot be transparent.

Theme colour

Written to the manifest and to the theme-color tag. Some browsers tint their own interface with it.

App name

Short name

Shown under the icon on a home screen, where about 12 characters fit.

Preview

LightDark

New tab

example.com

Browser tab

iPhone home screen

Android home screen, round mask

favicon.ico 48 × 48
favicon-16x16.png 16 × 16
favicon-32x32.png 32 × 32
favicon-48x48.png 48 × 48
apple-touch-icon.png 180 × 180
android-chrome-192x192.png 192 × 192
android-chrome-512x512.png 512 × 512, shown at 192 px
maskable-icon-512x512.png 512 × 512, shown at 192 px
mstile-150x150.png 150 × 150

Generated files
File	Used by	Size	Download
`favicon.ico`	Browsers and tools that ask for /favicon.ico. Holds the 16, 32 and 48 pixel icons in one file.
`favicon-16x16.png`	Browser tabs on standard screens.
`favicon-32x32.png`	Browser tabs on high-density screens.
`favicon-48x48.png`	A larger icon for shortcuts. Not linked by the snippet, because favicon.ico already holds this size.
`apple-touch-icon.png`	The home screen of iPhone and iPad.
`android-chrome-192x192.png`	The Android home screen, through the web manifest.
`android-chrome-512x512.png`	The splash screen of a web app installed on Android, through the web manifest.
`maskable-icon-512x512.png`	Android launchers that cut icons to their own shape. It fills the whole square.
`mstile-150x150.png`	Tiles on older versions of Windows. Only needed if you still serve a browserconfig.xml.

HTML for the <head>

The paths expect the files in the root folder of your site. Change them if you put the files elsewhere.

Web app manifest (site.webmanifest)

About this tool

Which file each platform uses

A desktop browser takes the icon for its tabs and bookmarks from <link rel="icon">: typically the 16 pixel PNG on a standard screen and the 32 pixel PNG on a high-density one. When a page names no icon, the browser asks for /favicon.ico instead.

iPhone and iPad use apple-touch-icon.png, 180 pixels, when someone adds the site to the home screen. Android and installed web apps read the icons list in the web manifest: 192 pixels for the home screen, 512 pixels for the splash screen, and the maskable icon where the launcher shapes icons itself. mstile-150x150.png is for tiles on older versions of Windows and is included for completeness.

Why favicon.ico still matters

Browsers request /favicon.ico on their own for anything that has no HTML head to name an icon: a PDF, an image or a JSON response opened in a tab. Feed readers, crawlers and other tools often look there as well. The ICO format can hold several sizes in one file, and this one holds 16, 32 and 48 pixels, each stored as PNG data, which Windows has read since Vista and every current browser reads.

Maskable icons and the safe zone

Android launchers cut app icons into a circle, a rounded square or another shape. A normal icon is usually shrunk and placed on a white plate to survive that. A maskable icon instead covers the whole square with an opaque background and keeps everything important inside the safe zone: a centred circle whose diameter is 80% of the icon’s width. Anything outside that circle may be cut off.

This tool fills the maskable icon with the app background colour and leaves a margin of at least 14% on every side around your artwork. Check the round preview, and add padding if a corner of the artwork is cut.

Apple ignores transparency

iOS does not keep transparent pixels in a home screen icon: it paints them black, and it rounds the corners itself. The Apple touch icon made here is therefore always opaque and square, filled with the app background colour, with a margin of at least 8% and without your corner radius.

How it runs

The icons are drawn by Go’s image packages compiled to WebAssembly, in a background thread of your browser, with Catmull-Rom resampling. A very large source is first scaled down in the page so that every change redraws quickly. Your image is not uploaded.

Questions

What size should the source image be?

A square image of 512 by 512 pixels or more, ideally a PNG with a transparent background. The largest icon in the set is 512 pixels, so a smaller source has to be enlarged and looks soft.

Do I still need a favicon.ico file?

Yes. Browsers fall back to /favicon.ico whenever a page or a file names no icon, and some crawlers and feed readers look for that file as well. Keep it in the root folder of the site even when you also link PNG icons.

Where do I put the files?

Unzip them into the root folder of your site and paste the HTML snippet into the head of every page. The snippet and the manifest use paths that start at the root, such as /favicon.ico, so edit them if the files live elsewhere.

Why does my browser still show the old favicon?

Browsers cache favicons for a long time. Open the icon’s address directly, for example /favicon.ico, and reload it, or clear the cache for the site. A private window shows what a new visitor gets.

Is my image uploaded?

No. The image is read by your browser and every icon is generated on your device with WebAssembly. The tool makes no network request with the image.

Your lid

Preview

About this tool

Which file each platform uses

Why favicon.ico still matters

Maskable icons and the safe zone

Apple ignores transparency

How it runs

Questions

More in Graphics