How To Generate A Favicon And App Icon Set From A Single Image

The favicon is the smallest design asset your site owns, and it shows up constantly: browser tabs, bookmarks, home-screen shortcuts. One source image can feed all of those slots, if the image and the crop are right.

Start With The Right Source Image

A square image at least 512 x 512 works best. Square is a recommendation, not a hard requirement: the generator crops non-square images from the center, so a wide logo with text at the edges will lose those edges. If your logo isn't square, put it on a square canvas yourself first, where you control the padding, instead of letting an automatic crop decide.

Simple beats detailed at this size. A mark that reads clearly at 16 pixels is a mark with one shape and strong contrast. Fine lines, gradients that fade into the background and long wordmarks all disappear at tab size. If the logo doesn't survive being shrunk, use just the symbol part.

Know What The Set Contains

The generator produces six PNG files: 16 and 32 pixels for browser tabs, 48 for other browser and OS icon slots, 180 for the iPhone home screen, and 192 and 512 for Android. Each file downloads separately, so you can grab exactly the sizes you want. The set is PNG only: no ICO file, no web app manifest, no maskable icon, so if your project needs those, add them separately.

The page also gives you the HTML to connect them: link tags for the 16 and 32 pixel icons and the apple-touch-icon. Paste the snippet into your page head and upload the icon files to the matching paths. The files and the tags deploy as ordinary static assets, which also means a wrong path is a silent missing icon.

Judge The Small Versions, Not The Big One

The preview that matters is the 16-pixel one. Check the icon at actual tab size, in both light and dark browser themes, because an icon designed on white can vanish against a dark toolbar. Transparency removes the white box, but it doesn't remove the contrast question: a dark mark on a transparent background still vanishes on a dark toolbar, so check the actual pixels in both themes.

Then check the real thing after deploying: open the site and look at the tab, add the page to a phone's home screen. A perfect export in the wrong folder is still a missing icon.

Generate The Set

The Favicon & App Icon Generator on DigitalDecided takes one image and produces the six PNG sizes listed above, center-cropping anything that isn't square. Use a square image of at least 512 x 512 for the cleanest result.

Download the sizes you need, add the link tags, upload the files, and check the smallest size first, then a phone home screen for the real test.