Favicon and app icon generator

What this tool does

A website needs more than one small picture to look right everywhere. The tab in a desktop browser wants a 16 or 32 pixel icon, Windows and Google search results use a 48 pixel one, an iPhone home screen wants 180 pixels, and Android and installed web apps ask for 192 and 512 pixels through a manifest file. This tool takes one image and makes the whole set at once: favicon.ico, six PNG files, the web manifest and the lines of HTML that connect them.

Everything is drawn in your browser. The image is never uploaded, so unreleased logos stay private.

How to make the icons

1. Drop your logo on the box or choose it. PNG, JPG, WebP, GIF and SVG all work. A square image of 512 pixels or more gives the best result, and an SVG stays sharp at every size because it is drawn again for each one.
2. Check the preview list. Use Fit to keep the whole picture or to fill the square and crop the long side, Padding to leave room around it, and Rounded corners for a softer shape. Switch on the background to fill the icon with a colour, which also becomes the theme colour in the manifest.
3. Type the app name, then download single files or the whole ZIP.

What you get

• favicon.ico holds three images, 16, 32 and 48 pixels, in one file. The file starts with a 6 byte header and one 16 byte entry per image, so the directory is 54 bytes long before the first picture. Each image inside is a PNG, which every current browser reads.
• favicon-16x16.png, favicon-32x32.png and favicon-48x48.png for places that want separate files.
• apple-touch-icon.png at 180 by 180 pixels. iOS paints transparency black and rounds the corners itself, so this icon is always square and always filled, with white if you chose no background.
• icon-192.png and icon-512.png for Android and installed web apps.
• site.webmanifest, a small JSON file that names the app and lists the two large icons.

Putting them on your site

Upload the files to the root of your site, so that they open at /favicon.ico and /icon-192.png, then paste the generated lines into the head of every page. A browser also asks for /favicon.ico on its own, even without any HTML, which is why the file name matters. If you keep the files in another folder, change the paths in the snippet and in the manifest.

Tips that save time

• Design for 16 pixels. Thin lines and small text disappear. A single bold shape or one or two letters survives.
• Use padding for maskable icons. Android may crop an icon into a circle or a rounded square. Keeping the important part inside the middle 80 percent is safe.
• Browsers cache favicons for a long time. After changing one, reload the page with the cache cleared or open it in a private window to see the new one.
• Check the contrast. A dark logo on a transparent background disappears in a dark browser theme. A filled background fixes that.