Favicon Pack Generator

About this tool

A website needs several small icons: a tiny one in the browser tab and in bookmarks, a larger one for iPhone and iPad home screens, and 192 and 512 pixel ones for Android and for installable web apps, plus a manifest file that points to them. This tool makes the whole set from one picture. Drop a logo (PNG, JPG, WebP, GIF or SVG; a square picture of at least 512 by 512 pixels, or an SVG, gives the sharpest result) and it creates favicon.ico containing the 16, 32 and 48 pixel versions, favicon-16x16.png and favicon-32x32.png, apple-touch-icon.png at 180 pixels with a solid background (iOS does not support transparency there), android-chrome-192x192.png and 512x512.png, a maskable 512 pixel icon with a safe margin so Android can crop it to a circle or rounded square without cutting your logo, site.webmanifest with your app name and colours, head-snippet.html with the lines to paste into your pages, and a short README. Everything is packed into one ZIP file. You can add space around the picture, choose the background colour for the icons that need one, set the folder on your site where the files will live, and see every icon before you download. The picture is scaled in your browser with a canvas and nothing is uploaded. The picture keeps its proportions, so a wide logo is centred inside the square rather than stretched; for the cleanest result, prepare a square icon. A favicon.ico at the root of your site is still requested by many browsers, crawlers and tools, so upload it there even if your pages link to a different folder. Browsers cache favicons for a long time, so a changed icon can take days to appear; test in a private window.

How to use it

1. Drop your logo on the page, or choose a file.
2. Adjust the space around the picture, the background colour, the names and the folder on your site.
3. Check the icons in the preview, then press Download ZIP.
4. Upload the files to your website and paste the snippet into your page head.

Common problems

The icon looks blurry in the tab

A 16 pixel icon has very little room. Use a simple, bold shape with few details, and start from a large square image or an SVG.

The old icon still shows after I changed it

Browsers cache favicons for a long time. Open the site in a private window, or clear the site data, and change the file names or add a version number to the links.

My logo has a transparent background but the iPhone icon has a colour

iPhones fill transparent areas of the home-screen icon with black, so the tool uses the background colour you choose for that icon and for the maskable icon. The other icons keep the transparency.

The Android icon is cropped

The maskable icon keeps a safe margin but Android may still crop to a circle. Keep your logo simple and centred, and add more space around the picture if needed.