Favicon sizes in 2026 — the only files you need
A clear guide to modern favicon sizes and formats, covering exactly which browser tab, phone home screen, and app icon files a website actually needs.
Every browser tab, bookmark bar, and home screen icon relies on a tiny image most site owners barely think about: the favicon. Get it wrong and a site looks unfinished even if the rest of the design is polished — a blank square in the tab, a blurry icon on a phone’s home screen, or a missing thumbnail when someone saves the page.
The tricky part isn’t designing the icon itself; it’s knowing which sizes and file formats you actually need. Favicon requirements have changed over the years as browsers, operating systems, and app-like web experiences have multiplied, and outdated tutorials often list far more files than a modern site requires.
This guide breaks down exactly which favicon sizes matter today, what each one is used for, and how to generate them without guesswork.
Why favicon requirements got complicated
In the early web, a single 16x16 pixel .ico file was enough. As phones, tablets, and app-like bookmarking features arrived, browsers and operating systems each started asking for their own preferred size and format — a larger icon for iOS home screens, a different one for Android’s app-like shortcuts, another for Windows tiles.
The result was a sprawling list of files that many tutorials still tell you to generate “just in case.” In practice, most sites today only need a small, well-chosen set of sizes to cover every common case.
The favicon sizes that actually matter
| File | Size | Used for |
|---|---|---|
favicon.ico |
16x16, 32x32 (multi-size) | Browser tabs, bookmarks, older browsers |
favicon-32x32.png |
32x32 | Modern browser tabs and taskbars |
favicon-16x16.png |
16x16 | Smaller browser UI contexts |
apple-touch-icon.png |
180x180 | iOS home screen icon |
android-chrome-192x192.png |
192x192 | Android home screen and app shortcuts |
android-chrome-512x512.png |
512x512 | Android splash screens, larger displays |
site.webmanifest |
— | References the Android icons for installable web apps |
For most standard websites, that’s the complete list. You don’t need a dozen Windows tile sizes or legacy formats unless you specifically support older enterprise environments or Microsoft’s tile-based Start menu features, which have become far less relevant.
Designing an icon that survives shrinking
A favicon is viewed at a tiny size most of the time, so the design has to hold up even when reduced to 16 pixels square. A few practical rules:
- Keep the design simple — a single letter, initial, or simplified logo mark works better than a detailed illustration.
- Use bold shapes and strong contrast, since fine details disappear at small sizes.
- Test the icon on both light and dark browser themes, since tab bars and taskbars vary.
- Start from a large, square master image (at least 512x512) and let a generator scale it down, rather than designing separately at each size.
If your existing logo is too detailed to read at 16 pixels, it’s often worth creating a simplified version specifically for the favicon rather than forcing the full logo into a tiny square.
Generating all the sizes at once
Manually resizing and exporting seven or more files by hand is tedious and easy to get wrong — a mismatched size or the wrong file format is a common cause of a favicon quietly failing to show up in some browsers.
Holsha’s favicon generator takes a single source image and outputs the full modern set — the .ico file, the PNG sizes, and the manifest reference — ready to upload to your site’s root directory. If you need to resize an existing logo or icon before generating favicons, an image resizer can prepare the master file first.
Where the files go and how to reference them
Favicon files typically live in the root of your site (for example, yoursite.com/favicon.ico), and most are referenced explicitly in the <head> of your HTML:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Static site generators and CMS platforms sometimes handle favicon references automatically once the files are uploaded to the right location — check your platform’s documentation if icons aren’t appearing after upload.
Favicons vs social sharing images
It’s worth distinguishing a favicon from the image that shows up when a link is shared on social media. Those are two completely different assets with different size requirements. The sharing preview image (often called an Open Graph image) is much larger and wider, and Holsha’s OG image generator is built specifically for that format, separate from the favicon set covered here. For a broader rundown of image dimensions across platforms, see the social media image sizes cheat sheet.
Whatever source image you start from, keep an eye on file size too — oversized source images slow down the export process and bloat your site’s asset folder unnecessarily. A quick pass through the guide on compressing images for a website is worth it before uploading any new set of icons or graphics.
Why a favicon sometimes doesn’t update
A surprisingly common support question isn’t “how do I make a favicon” but “why doesn’t my new favicon show up.” Browsers cache favicons aggressively, sometimes for much longer than they cache the rest of a page, which means uploading a replacement file to the same path doesn’t always force an immediate update for returning visitors.
A few things worth checking if a new favicon isn’t appearing:
- Confirm the new files actually overwrote the old ones at the same file paths, rather than being uploaded somewhere new.
- Try a hard refresh or clear the browser’s cache for the site specifically, rather than just reloading the page.
- Check the page’s
<head>markup to confirm the<link>tags still point to the correct file names, especially if the new export used different file names than the old set. - Give it time — some browsers only refresh a cached favicon after a set interval or a certain number of visits, so a delay of a day or more isn’t unusual.
Testing a favicon across devices
Because a favicon has to work across so many different contexts — desktop browser tabs, mobile home screens, bookmark lists, browser history — it’s worth actually checking the result in more than one place rather than assuming a single preview is representative. A few checks worth doing after generating a new set:
| Where to check | What to look for |
|---|---|
| Desktop browser tab | Icon is recognizable even at a very small size |
| Mobile browser tab | Same clarity as desktop, since mobile tabs are often smaller |
| Add to home screen (iOS/Android) | The apple-touch-icon or Android icon appears correctly, not a generic placeholder |
| Bookmarks bar | Icon still reads clearly next to bookmark text |
| Browser dark mode | Icon doesn’t disappear against a dark tab bar background |
Skipping this step is how sites end up with a favicon that looks great on the designer’s own desktop browser but shows up as a blurry or blank square everywhere else.
FAQ
Do I still need a .ico file in 2026?
Yes, for the broadest browser compatibility, since some older or non-standard browsers still look for it by default at the site root.
What image format should the source file be? A PNG or SVG source with a transparent background gives the cleanest results, since it avoids unwanted white edges around the icon.
Why does my favicon look fine on desktop but blurry on my phone’s home screen?
That’s usually a missing or too-small apple-touch-icon.png or Android icon — phones use a different, larger file than the tab icon.
How often should a favicon be updated? Only when the brand mark changes. Once generated correctly, favicon files rarely need to be revisited.
Summary
A modern favicon set is smaller than most guides suggest: a handful of PNGs, one .ico file, and a manifest reference cover browsers, phones, and installable web apps. Start with a bold, simplified icon design, then let a dedicated tool handle the resizing. Holsha’s free favicon generator produces the full modern set from a single upload, so the only decision left is the design itself.
About the author
Oleksandr Holsha runs the web studio Boroda Expert, builds websites and tests AI tools for a living. More about me.