Favicon design: an icon that reads at 16 pixels and works on a home screen
A favicon is shown as small as 16 by 16 pixels in a browser tab, and as large as 512 when a site is installed on a phone. Design it as one bold mark, usually a letter or a simplified symbol rather than the full logo, with strong contrast and no fine detail. Then export it at the handful of sizes browsers and phones ask for, including a maskable version with padding for home screens.
Where the icon appears
Favicons started as the small icon beside a bookmark in early browsers, saved as a favicon.ico file. Today the same idea covers far more: browser tabs, history, bookmarks, search result listings, shortcuts on a phone's home screen, the app switcher and the splash screen when an installed web app opens. The same mark has to work as a smudge of pixels in a crowded tab bar and as a full-size app icon next to native apps.
How to design a favicon
- Reduce the logo to one idea. A wordmark won't read at 16px. Use the first letter, a monogram, or the one symbol from the logo that people recognise.
- Draw it on a small grid. Sketch at 16 by 16 and 32 by 32 pixels and check every stroke is at least a pixel or two wide. Thin lines vanish or blur.
- Use a solid shape behind it. A filled square or circle in the brand colour gives the mark a consistent outline against both light and dark tab bars.
- Two colours, high contrast. A light letter on a dark ground, or the reverse. Gradients and shadows turn to mud at this size.
- Fill the space. Small icons with lots of empty margin look weaker than their neighbours in the tab bar. Leave the padding to the home-screen versions.
- Test in context. Open a dozen tabs, including your competitors', in light and dark browser themes. If you can't find yours at a glance, simplify.
Favicon sizes and files
| File | Size | Used for |
|---|---|---|
| favicon.ico or a small PNG | 32 by 32 (16 inside an .ico) | Browser tabs, bookmarks, older browsers |
| PNG linked with rel=icon | 192 by 192 | Android and higher-density tabs |
| apple-touch-icon | 180 by 180 | iPhone and iPad home screens, which ignore rel=icon |
| Manifest icon, purpose any | 192 and 512 | Installed web apps and splash screens |
| Manifest icon, purpose maskable | 512 by 512 | Android launchers that crop icons into shapes |
MDN's rel attribute reference explains that the browser chooses among several rel="icon" links using their type and sizes, and that iOS uses the non-standard apple-touch-icon instead. For installed apps, MDN's manifest icons reference describes the icons list in the web app manifest, with sizes, type and a purpose of any, maskable or monochrome.
Maskable icons for installed apps
Android shows home-screen icons in the shape the phone's launcher chooses: a circle, a squircle, a rounded square. A normal icon gets shrunk onto a white disc, which looks out of place. A maskable icon fills the whole square with its background colour and keeps the important part in the middle. The guidance on maskable icons at web.dev puts the safe zone as a central circle with a radius of 40% of the icon's width; anything outside it may be cropped.
- Make the maskable version a separate file. Using one image for both
anyandmaskableeither crops the normal icon or shrinks the maskable one. - Extend the background to every edge, with no transparent corners.
- Keep the mark inside the middle 80%, then preview it as a circle and as a rounded square.
Common favicon mistakes
- The full logo with its tagline, shrunk until it's a grey rectangle.
- A transparent background with a dark mark that disappears on dark tab bars.
- One large image scaled down by the browser, which blurs; export each small size and check it.
- No apple-touch-icon, so iPhones fall back to a screenshot of the page.
- A favicon that doesn't match the site's colours, so tabs and pages feel like two different brands. See brand colours on a website.
Icons on Anticode sites
Every published Anticode site has a web app manifest and a set of icons, so it can be installed on phones and desktops as a PWA, with an offline fallback. The icons are generated for you as a monogram from the site's name and its colours: a 192 and a 512 pixel icon, a separate maskable 512 with the letter kept inside the safe zone, and a 180 pixel Apple touch icon. A link to the icon is added to each page as it's served, and the site's name and colours also set the installed app's name and theme. Making a website installable explains the install flow.
Questions people ask
What size should a favicon be?
Provide a 32 by 32 icon for tabs, a 180 by 180 apple-touch-icon for iPhones, and 192 and 512 pixel icons in the manifest for installed apps, plus a maskable 512.
Can I use my full logo as a favicon?
Rarely. At 16 to 32 pixels a full logo becomes unreadable. Use one letter or a simplified symbol on a solid shape.
What is a maskable icon?
An icon with a full-bleed background and its mark kept in a central safe zone, so Android launchers can crop it to any shape without cutting it off.