Convert an Image to a Favicon

A favicon is the first thing a visitor sees of your site in a crowded tab bar, and the thing that identifies it in bookmarks, history, the home screen of a phone and search results. From one image, this page produces the whole set a modern site needs in one ZIP: a favicon.ico, PNGs at 16, 32, 48 and 64 pixels for tabs and bookmarks, a 180-pixel icon for iPhone and iPad home screens, and 192 and 512-pixel icons for Android and installable web apps.

The conversion is mechanical; the design decision is yours, and it matters more than the file sizes. A full logo with a wordmark becomes an unreadable smudge at 16 pixels, so the usual approach is to use just the symbol or the first letter, in a bold weight, with the shape filling most of the square. Begin with a square image of at least 512 pixels: a smaller original is enlarged for the big sizes and looks soft on a home screen, and a non-square image should be cropped square first. Check the result against both a light and a dark browser theme, since a dark mark vanishes on a dark tab bar. The icons are produced on your device, and once uploaded to your server they still need link tags in the page head to be found.