How to Make a Favicon (And Which Sizes You Actually Need)
2026-07-11
A favicon is a small file with an outsized job. It identifies your site in a crowded tab bar, in a bookmark list, in browsing history and on a phone home screen — usually at sixteen or thirty-two pixels, where only the boldest shapes survive.
Step by step
- Open the Favicon Generator.
- Drop in a square image, ideally at least 512 pixels wide.
- Click Generate favicons and download the set as a zip.
- Put the files in the root of your site and paste the generated tags into your
<head>.
The sizes that matter
- favicon.ico (16, 32, 48 px in one file) — browsers and crawlers still request
/favicon.icoby default. - favicon-16x16.png, favicon-32x32.png — modern browser tabs and bookmarks.
- apple-touch-icon.png (180 px) — iOS home screen.
- android-chrome-192x192.png and 512x512.png — Android home screen and splash.
Do you still need the .ico?
Yes. Some older software only looks for that file, and browsers request it whether or not you have declared it — so shipping one costs nothing and removes a steady trickle of 404s from your logs. The file produced here is a genuine multi-size icon containing all three small versions, so the operating system picks the right one rather than scaling a single image badly.
Design for sixteen pixels
This is where most favicons fail. At 16 × 16 you have 256 pixels in total — roughly the size of this full stop. A wordmark is unreadable, a detailed illustration is mud, and thin lines disappear entirely.
What works: a single bold letter, a simple geometric symbol, high contrast, and no more than two colours. Test by shrinking your design to 16 pixels and looking at it from arm's length. If you cannot tell what it is, neither can anyone else.
If your logo isn't square
It is centred and scaled to cover the square without distortion. For a wordmark, crop to the symbol first — the full name will not be legible at favicon size, and a squashed version of it is worse than no favicon at all.