What do I get in the ZIP?

favicon.ico (16, 32 and 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png and 512x512.png, a maskable 512 px icon, site.webmanifest and head-snippet.html. If you start from an SVG you also get favicon.svg.

Which picture should I start from?

A square picture of at least 512 × 512 px, or an SVG, which stays sharp at every size. Smaller pictures still work but the large icons will look soft.

Why do the phone icons have a solid background?

iPhones fill transparent areas of home-screen icons with black, and Android needs a solid backdrop for maskable icons. Pick the colour you want behind your logo. Browser icons stay transparent unless you turn that off.

What is a maskable icon?

Android may crop icons into a circle, squircle or other shape. A maskable icon keeps your logo inside a safe area so nothing important gets cut off. This tool adds the extra margin for you.

Where do I put the files?

In the root folder of your website, so that yourdomain.com/favicon.ico works. Then paste the lines from head-snippet.html inside the of your pages. The manifest assumes the files are at the root.

Is my logo uploaded anywhere?

No. The icons are drawn and zipped entirely in your browser. Nothing is sent to a server.

Image Tool

Favicon & App Icon Generator

Turn one picture (PNG, JPG, WebP or SVG) into everything a website needs: favicon.ico, 16 and 32 px icons, the iPhone home-screen icon, Android icons, a maskable icon, a web manifest and the HTML to paste into your page. Runs entirely in your browser.

UploadConfigureProcessingDownload

Drag an image here, or click to browse

Single file · Max 30.0 MB

How it works

1
Add a square PNG, JPG, WebP or SVG logo. 512 × 512 px or an SVG gives the sharpest result.
2
Choose how it fits, the margin, the background colour for phone icons, and an optional site name and theme colour. The preview updates as you go.
3
Click Make my icon pack.
4
Download the ZIP, upload its files to the root of your website and paste the HTML snippet into your page's head.

Favicon & App Icon Generator — frequently asked questions

What do I get in the ZIP?: favicon.ico (16, 32 and 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png and 512x512.png, a maskable 512 px icon, site.webmanifest and head-snippet.html. If you start from an SVG you also get favicon.svg.
Which picture should I start from?: A square picture of at least 512 × 512 px, or an SVG, which stays sharp at every size. Smaller pictures still work but the large icons will look soft.
Why do the phone icons have a solid background?: iPhones fill transparent areas of home-screen icons with black, and Android needs a solid backdrop for maskable icons. Pick the colour you want behind your logo. Browser icons stay transparent unless you turn that off.
What is a maskable icon?: Android may crop icons into a circle, squircle or other shape. A maskable icon keeps your logo inside a safe area so nothing important gets cut off. This tool adds the extra margin for you.
Where do I put the files?: In the root folder of your website, so that yourdomain.com/favicon.ico works. Then paste the lines from head-snippet.html inside the <head> of your pages. The manifest assumes the files are at the root.
Is my logo uploaded anywhere?: No. The icons are drawn and zipped entirely in your browser. Nothing is sent to a server.