How to make a complete favicon set in 2026
The minimum favicon set every site needs, the sizes that still matter, and the HTML snippet that makes them all work — without any external service.
Browsers haven't shipped a meaningful favicon-spec change in years, but the list of sizes you "should" generate has slowly grown to absurd proportions. Here is the realistic, post-2025 answer to "which favicons do I actually need?"
The minimum viable set
Three files cover 95% of cases:
favicon.ico— multi-resolution bundle with 16, 32, 48, and 64 pixel versions. This is what every browser falls back to.favicon-180.png— forapple-touch-icon. Used when someone "Add to Home Screen"s your site on iOS.favicon-512.png— for PWA install prompts on Android and as theog:imagefallback.
That's it. Everything else is optional. Old guides will tell you to ship 30 different sizes for ancient Android versions — those guides are out of date. Modern Chrome, Safari, Firefox, and Edge all pick the right size from the .ico. Touch-icon and PWA-icon are the only standalone PNGs that earn their place.
The Favicon Generator here produces all three plus a bunch of intermediate sizes if you want them. Upload one square image and download the whole set.
The HTML snippet
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
<link rel="manifest" href="/site.webmanifest" />
Notes on each line:
rel="icon"withtype="image/x-icon"is the legacy.icodeclaration. Browsers will use this if nothing else matches.rel="apple-touch-icon"is iOS-specific. It does not need atypeattribute — the size attribute is enough.rel="icon"withsizes="512x512"lets modern browsers pick a crisper icon when they can.rel="manifest"points to asite.webmanifestJSON file. Required for PWA installability; optional otherwise. If you want it, generate one with whatever icon set you produced.
Source image: what works best
Use a 512×512 PNG. Larger sources don't help — the resampler doesn't recover detail it didn't have. Smaller sources upscale badly.
Keep meaningful content inside the inner 80%. A 512×512 icon will be displayed at 16×16 on someone's browser tab. Tiny details disappear. Your logo, simplified to one or two shapes, will read at every size.
Transparent background is fine, solid is fine. Modern browsers handle both. If your icon is a circle on a transparent background, it looks great in dark and light themes. If it's a rectangle on a solid color, it looks great too — just less adaptive.
Things you can skip
favicon-32.pngandfavicon-16.pngstandalone. The.icobundle already covers them.mstile-*.pngfiles. These were for Windows 8 / 8.1's tile feature, which no longer exists in any meaningful Windows install.browserconfig.xml. Same story — Windows 8 tile config, irrelevant in 2026.safari-pinned-tab.svg. Safari dropped pinned-tab support a few years ago. Skip.
Generate the three core files, paste the four <link> tags into your <head>, and you are done. Forever. Or at least until 2030.