Favicon Sizes Explained: From 16x16 to 512x512
Favicons used to be a single 16 by 16 image. Today a handful of sizes work together to cover tabs, bookmarks, phone home screens, and web apps. This guide breaks down every size and tells you which ones you truly need.
Table of Contents
Why One Size Is No Longer Enough
Years ago every screen showed your icon at the same tiny scale, so a single 16 by 16 file did the job. That changed as high-resolution displays, phones, and progressive web apps arrived. Each of those contexts wants a different pixel count, and giving them the right size keeps your icon sharp instead of fuzzy.
The good news is that you do not have to design each one by hand. You create one clean source image and export the full range of sizes from it. Knowing what each size is for helps you decide which to include.
Every Favicon Size and What It Does
| Size (px) | Primary Use |
|---|---|
| 16 x 16 | Browser tabs and address bar |
| 32 x 32 | Taskbar, bookmarks, retina tabs |
| 48 x 48 | Windows site icons |
| 180 x 180 | Apple touch icon for iOS |
| 192 x 192 | Android Chrome home screen |
| 512 x 512 | Progressive web apps and splash screens |
The two smallest sizes, 16 and 32, handle the everyday browser view. The larger sizes step in when someone saves your site to a phone or installs it as an app, where a bigger, more detailed icon looks far better.
The Minimum Set Most Sites Need
You do not have to ship every size. For the majority of websites, a compact set covers nearly all visitors:
- favicon.ico containing 16 and 32 pixel versions as a universal fallback
- 32x32 PNG for crisp tabs on high-resolution screens
- 180x180 PNG as the Apple touch icon
- 192x192 and 512x512 PNG for Android and web app support
A favicon generator can produce this whole set from one image in a single step, so there is no reason to skip the larger sizes.
Designing for Small Sizes
A favicon lives or dies at 16 pixels. What looks great on a business card can turn into a smudge in a browser tab. Keep these points in mind when you design the source image.
- Use a single strong shape. One letter or one symbol reads far better than a full wordmark.
- Favor bold contrast. High contrast keeps the icon legible against both light and dark backgrounds.
- Skip fine detail. Thin lines and small text vanish at tiny sizes, so simplify.
- Stay perfectly square. Any other ratio gets cropped or squashed.
Design for the smallest size first. If it reads clearly at 16 pixels, it will look great everywhere else.
High-DPI Screens and Why 32px Matters
For years, 16 by 16 was the only favicon size that mattered because screens displayed it at exactly that scale. High-resolution displays changed the picture. On a Retina or other high-DPI screen, each interface point is drawn with multiple physical pixels, so a 16 pixel icon is effectively asked to fill a 32 pixel space.
When that happens, a browser either scales the 16 pixel image up, which makes it look soft, or it reaches for a 32 pixel version if one exists. That is the whole reason the 32 by 32 size has become so important. It is not a luxury, it is the size that keeps your favicon crisp on the screens a large share of visitors now use.
The practical rule is simple: always provide both 16 and 32 pixel versions. The browser then has a sharp option for standard and high-DPI displays alike, and it picks the right one automatically. A favicon generator includes both by default, so there is no extra work involved.
If your favicon ever looks slightly fuzzy on a modern laptop or phone, a missing 32 pixel version is the most common reason.
Formats That Pair With These Sizes
Sizes and formats go hand in hand. Different sizes are usually delivered in different file types, and knowing the pairing keeps your setup clean.
- ICO for 16 and 32. The classic favicon.ico bundles these small sizes into one file, the most reliable fallback for any browser.
- PNG for everything. Modern browsers happily read PNG icons, and the larger mobile and web app sizes are almost always delivered as PNG.
- SVG for a scalable option. A single SVG favicon can cover modern browsers at any size, often used alongside PNG and ICO for full coverage.
A common, dependable combination is an ICO holding 16 and 32, separate PNG files for the mobile and web app sizes, and optionally an SVG for browsers that support it. That mix covers old and new without any guesswork.
Setting Up the Sizes in HTML
Telling the browser which file to use for which size is done with link tags in the <head> section. Here is a setup that maps each size to its purpose:
<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" type="image/png" sizes="16x16" href="/16x16.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/32x32.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/180x180.png" /> <link rel="manifest" href="/site.webmanifest" />
The sizes attribute tells the browser the dimensions of each file so it can choose the best match for the current display. The Apple touch icon link handles iOS home screens, and the manifest line lets Android and progressive web apps reach the 192 and 512 pixel icons listed inside it.
Frequent Sizing Mistakes
- Shipping only 16 pixels. This leaves high-DPI screens with a soft icon. Always include 32 as well.
- Skipping the Apple touch icon. Without a 180 pixel version, iOS home screen icons look low quality or generic.
- Using a non-square source. Any ratio other than 1:1 gets cropped or stretched at every size.
- Mismatched size attributes. If the sizes value in the link tag does not match the real file, the browser may make a poor choice.
Provide the full set from one square source and link each file correctly, and your icon will look sharp on every device.
FAQs
What is the most important favicon size?
16 by 16 is the one users see most often in browser tabs, with 32 by 32 close behind for high-resolution screens. Start with those, then add the larger sizes for mobile and web apps.
Do I really need a 512x512 icon?
You need it if you want your site to install cleanly as a progressive web app or show a sharp icon on Android. If that is not a priority, you can leave it out, but it costs little to include.
Can one image cover all sizes?
Yes. Provide one high-resolution square source, ideally 512 by 512, and a generator will scale it down to every size you need.