Updated 2026-09-15
How to Make a Favicon From an Image
Which icon sizes browsers and phones actually request, how to design a mark that survives 16 pixels, and how to install the files.
What a favicon has to survive
A favicon is the small image that represents your site in a browser tab, a bookmark list, a history entry, and a phone home screen. The defining constraint is brutal: in a browser tab it is typically drawn at sixteen or thirty-two device pixels square. At that size you have room for a single strong shape and essentially nothing else.
This is why favicons made by shrinking a full logo almost always fail. Wordmarks become illegible smudges, thin strokes vanish entirely, and detailed illustrations turn into noise. The favicon is not a miniature of your logo; it is a separate mark that shares the logo's identity.
Designing a mark that works small
Work out what the simplest recognisable element of your brand is. Usually that is a single letter, a monogram of two letters, or one distinctive shape from the full logo. Strip everything else away.
- Use one or two colours with strong contrast between foreground and background.
- Avoid text longer than two characters; three or more will not be readable.
- Keep strokes thick, because hairlines disappear or alias badly at small sizes.
- Fill the square. A mark floating in generous padding looks tiny next to competitors' icons.
- Test against both light and dark browser themes, since a dark mark on transparency vanishes in dark mode.
- Check it at actual size on a real screen rather than judging a zoomed preview.
The sizes browsers and devices request
Different contexts ask for different files. You do not need every size ever specified, but covering this set handles the overwhelming majority of real requests.
| Size | Used for |
|---|---|
| 16 × 16 | Browser tab and bookmark bar on standard-density screens |
| 32 × 32 | Browser tab on high-density screens, Windows taskbar |
| 48 × 48 | Windows site shortcuts and some bookmark views |
| 180 × 180 | Apple touch icon for iOS home screens |
| 192 × 192 | Android home screen and web app manifest |
| 512 × 512 | Progressive web app splash screens and app listings |
| favicon.ico | Legacy fallback requested from the site root |
Generating and installing the files
The Favicon Generator on this site takes a square source image, crops from the centre, and exports the common sizes along with a favicon.ico, all in your browser. Start from the largest, cleanest version of your mark you have, ideally at least 512 pixels square, because scaling down produces far better results than scaling up.
Installation depends on your stack, but the general shape is the same. Place favicon.ico at the site root, since some browsers and crawlers request that exact path regardless of what your markup says, and reference the PNG sizes from your HTML head or your framework's metadata configuration.
- Prepare a square source image at 512 pixels or larger with your simplified mark filling the frame.
- Run it through the Favicon Generator and download the exported set.
- Put favicon.ico in your site root so requests to /favicon.ico succeed.
- Add link elements for the PNG sizes and the Apple touch icon in your document head.
- List the 192 and 512 pixel icons in your web app manifest if you have one.
- Load the site in a private window and check the tab, because browsers cache favicons aggressively and you may otherwise keep seeing the old one.
Common mistakes
The most frequent problem after installation is caching. Browsers hold onto favicons far longer than other assets, so a correct new icon can appear broken for days. Test in a fresh private window, and if you are changing an established icon consider a new filename to sidestep the cache entirely.
The second most common issue is transparency in the wrong place. A transparent background looks clean against a light tab strip and disappears against a dark one. Unless you have specifically designed for both, a solid background colour in the icon itself is the safer choice.