How to Generate Every Favicon Size Your Website Needs
A favicon used to be a single sixteen pixel square. Now the same image has to work as a browser tab, a bookmark, a phone home screen icon and an install prompt, at sizes from sixteen pixels to five hundred and twelve. The Favicon Generator produces eight standard sizes from one image.
What the sizes are for
16 by 16 is the browser tab and the address bar - the one almost everybody sees and the hardest to design for. 32 by 32 covers high-density screens showing that same tab, and Windows shortcuts. 48 by 48 is used by some desktop browsers and Windows site tiles.
180 by 180 is the iOS home screen icon, and iOS applies its own rounded corners, so keep anything important away from the edges. 192 by 192 and 512 by 512 are the Android and progressive web app sizes; the 512 is what appears in an install prompt and in app switchers, and it is the one people actually look at.
Design for sixteen pixels first
Sixteen pixels is roughly the size of a full stop at normal reading distance. A whole logo will not survive it. What survives is one letter, one simple shape, or one strong colour block.
So work the other way round from instinct: decide what the icon is at sixteen pixels, then scale that idea up. A single initial in a solid colour reads perfectly at every size. A detailed wordmark reads at none of them.
Contrast matters more than detail. The icon sits against a browser tab that may be light or dark depending on the user's theme, so a shape that relies on a white background disappears for half your visitors. Test it against both, and if it needs a background, build the background into the image rather than hoping.
Keep a square master
Every size is derived from one square image, so start with a square one - at least 512 pixels, ideally larger. If your logo is wide, make a square version specifically for the icon rather than letting it be squashed or cropped unpredictably. Crop it to square first with the Image Editor and the results are yours to control.
Common questions
Do I still need an ico file?
Only for very old versions of Internet Explorer. Modern browsers all accept PNG favicons, and the PNG set is what matters now.
Why does my favicon not update?
Browsers cache favicons aggressively and sometimes for longer than the page itself. A hard refresh, a different browser, or appending a query string to the file name will usually confirm the new one is live.
Can I use a photograph?
Badly. Photographs become unreadable mush at sixteen pixels. A flat graphic shape is always better.
Does a favicon affect SEO?
Not ranking directly, but Google shows it beside your result on mobile search, so a missing or unreadable one costs you clicks.
Ready to make a full set?