Favicon sizes that matter
- 32 × 32 — the browser tab icon on most desktop screens.
- 16 × 16 — the classic size, still used in some lists and bookmarks.
- 180 × 180 — Apple touch icon for iOS home screens.
- 192 × 192 and 512 × 512 — Android home screen and web app manifest icons.
Designing an icon that reads at 32 pixels
A favicon is smaller than a word of text. Full logos with a wordmark turn into mush at that size. Use a single strong shape or initial, high contrast against both light and dark tab bars, and no fine detail. Start from a square source image so nothing is cropped away.
Adding the icons to a site
Reference each PNG with a link element in the page head, for example a 32 × 32 icon as rel="icon" and the 180 × 180 version as rel="apple-touch-icon". Listing the sizes attribute lets the browser pick the right file instead of scaling one down.