ICO vs PNG Favicons: What Modern Browsers Actually Need
ICO files, PNG icons, SVG favicons the favicon landscape is confusing. Here's exactly what to use in 2026.
For related fixes and guides, see our troubleshooting hub.
The favicon ecosystem evolved messily over 25 years. What started as a single favicon.ico file now involves ICO, multiple PNG sizes, SVG, and a JSON webmanifest. Every guide seems to say something different about what's actually required.
Here's the definitive, current-as-of-2026 answer.
A Brief History (Skip if You Don't Care)
1999: IE5 invents favicons as favicon.ico at 16×16 pixels. It's a quirk, not a standard.
2003: Other browsers adopt the pattern. The <link rel="shortcut icon"> tag appears.
2007: iPhone ships. Mobile favicons need a separate touch icon for home screen shortcuts.
2011–2013: Android and tile icons for Windows 8 start multiplying the required file list.
2016–2018: Progressive Web Apps arrive. PWAs need icon sizes for splash screens: 192×192 and 512×512.
2018–present: SVG favicons gain browser support. A single scalable file could replace all the PNGs.
Today: All of the above coexist. No single format is sufficient for all contexts.
What Each Format Does
favicon.ico
The original. Contains multiple bitmap images at different sizes (typically 16×16, 32×32, 48×48) in a single file.
Supported by: Everything. IE6, Chrome, Firefox, Edge, Safari, Opera, every browser ever made, Windows desktop shortcuts, bookmark lists.
Required? Technically no, but omitting it causes a 404 in browser logs on every page load (browsers always request it from /favicon.ico even if you don't link it). Include it.
File size: Should be under 20 KB for a typical 3-size ICO.
PNG (16×16, 32×32)
Linked via <link rel="icon" type="image/png" sizes="..."> in the <head>.
Supported by: All modern browsers.
Why include it? Modern browsers prefer PNG over ICO because PNG is simpler and more reliable. Including both lets each browser pick what it handles best.
Apple Touch Icon (180×180 PNG)
The icon that appears when an iOS user adds your site to their home screen.
Required? If any of your users are on iOS (they are), yes.
If omitted: iOS takes a screenshot of your page and uses that as the icon. Usually unreadable.
PWA Icons (192×192 and 512×512 PNG)
Required by the Web App Manifest for Progressive Web App installation.
Required? If you want "Add to Home Screen" prompts on Android, yes. If you don't care about PWA, these still look good in various OS contexts (taskbar, launcher).
SVG Favicon
A single vector file that scales to any size.
Supported by: Chrome, Firefox, Edge (since ~2021). Safari added support in 2022.
Not supported by: IE (irrelevant in 2026), some mobile browsers.
Advantages: Infinitely scalable, usually smaller than multiple PNGs combined, supports dark/light mode switching via prefers-color-scheme in CSS.
Limitation: Not suitable as a standalone solution because of the multi-size ICO still needed for broad compatibility.
What to Include in 2026
Minimum viable set:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
With webmanifest:
{
"name": "Your Site",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
Optional (but recommended) SVG addition:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
The Format Comparison
| Format | Browsers | Use case | Required? |
|---|---|---|---|
| ICO (multi-size) | All | Fallback, bookmark bars, Windows shortcuts | Yes |
| PNG 16×16 | Modern | Tab icon | Recommended |
| PNG 32×32 | Modern | High-DPI tab icon | Recommended |
| Apple Touch 180×180 | iOS Safari | iOS home screen | Yes (if iOS users exist) |
| PNG 192×192 | Chrome, Android | PWA icon | Yes (for PWA) |
| PNG 512×512 | Chrome, Android | PWA splash screen | Yes (for PWA) |
| SVG | Chrome, Firefox, Edge, Safari 16+ | Any size, dark mode | Recommended |
How to Generate the Full Set
The favicon generator creates the complete set from a single source image:
- Upload a square PNG or SVG (512×512 or larger recommended)
- Click Generate
- Download: ICO file + individual PNGs at each required size
- Copy the HTML snippet from the tool
Total time: under 2 minutes. The ICO is a proper multi-size file (not a renamed PNG).
For the specific conversion of JPG/PNG to ICO format, the JPG to ICO converter handles it directly.
Common Mistakes
Using a single-size ICO
An ICO with only a 16×16 image looks blurry on retina displays where the browser would prefer 32×32. Always build multi-size ICOs.
Forgetting the manifest
Without a site.webmanifest, Chrome doesn't offer "Add to Home Screen" even if you have PWA icons.
Linking the wrong path
If your files are at /assets/favicon.ico but your <link> says /favicon.ico, browsers look for it at the root and get a 404. Both the <link> and the favicon.ico at /favicon.ico (browsers always request this regardless of your <link>) need to be correct.
Designing too small
Always design the favicon source at 512×512 or larger. Everything else is a downscale. Designing at 16×16 and upscaling looks terrible.
ICO vs PNG: don't make it either/or
The question is always asked as "should I use ICO or PNG?" The correct answer is both. ICO for compatibility, PNG for modern browsers. They serve different contexts.
Use the favicon generator to produce the full set in one go. It handles the ICO encoding, all PNG sizes, the HTML snippet, and the webmanifest template. The JPG to ICO tool handles just the ICO conversion if that's all you need.