Four Files for Favicon Size 2026: SVG First Workflow for Designers

The minimal favicon set for 2026 is four files: a scalable favicon.svg as your primary icon, a multi-frame /favicon.ico at the site root for legacy fallback, a 180×180 apple-touch-icon.png for iOS, and 192×192 plus 512×512 PNGs for your manifest. SVG handles scale and dark mode, ICO catches older browsers automatically requesting it, and the PNGs satisfy iOS and progressive web app installs.

TL;DR:

• Using a single SVG as the primary favicon ensures resolution independence and supports dark mode without additional assets.
• Keep a multi-frame ICO in the root folder for legacy browser support and crawlers to avoid 404 errors and ensure backward compatibility.
• PNG files for iOS and PWA manifest are mandatory at specific sizes of 180×180, 192×192, and 512×512 pixels, while avoiding unnecessary extra sizes.
• Always place the SVG link before the ICO in your HTML head and verify icon paths and manifest links to prevent deployment issues.
• Starting from a simplified, high-contrast vector logo guarantees consistent branding and easier maintenance across all favicon formats.

Table of Contents

• Favicon size 2026: the minimal package that covers 99% of cases
• Formats explained: when to use SVG, ICO and PNG
• Favicon dimensions and file locations at a glance
• Implementation: the HTML head snippet and manifest fragment
• PWA and manifest considerations: maskable icons and safe area
• Legacy support and troubleshooting checklist
• Kukoocreative’s practical workflow for turning a logo into a deployable favicon set
• The favicon debate is mostly settled, and most sites still get it wrong
• Get your favicon set built properly, without the trial and error
• Sources
• FAQ

Favicon size 2026: the minimal package that covers 99% of cases

Most websites are still shipping favicon folders stuffed with a dozen PNGs left over from 2015 tutorials. That’s no longer necessary. A modern, minimal approach favours a vector SVG as the primary favicon, backed by a small set of raster fallbacks rather than an entire zoo of exported sizes, according to Evil Martians’ 2026 favicon guidance.

Here’s what each file in that minimal set actually does:

• favicon.svg — the primary icon, rendered crisply at any size because vectors don’t pixelate; this is what most modern browsers pick first.
• /favicon.ico — sits at the site root as a multi-frame fallback (16×16, 32×32, 48×48 bundled together) for browsers and crawlers that don’t request the SVG.
• apple-touch-icon.png — a flat 180×180 PNG for iOS home screen shortcuts and Safari’s tab switcher.
• manifest icons — 192×192 and 512×512 PNGs referenced in your web app manifest, used for Android home screens and PWA installs.

You only need to add extra raster sizes when a specific legacy requirement demands it, such as supporting an older Windows tile format or a corporate intranet browser still running Internet Explorer’s rendering engine. Microsoft’s legacy developer documentation) still covers those edge cases if you ever need them, but for a public-facing website in 2026, four files beat forty.

The maintenance case for going minimal is straightforward. Four files mean four things to update when your brand mark changes, not twelve. It also means fewer opportunities for a stale, mismatched icon to sit in a cache somewhere, quietly undermining the polish you paid a designer for.

Formats explained: when to use SVG, ICO and PNG

Each format earns its place in the 2026 favicon set for a different reason, and mixing them up is where most implementation errors start.

SVG is your primary format because it’s resolution independent. One file scales cleanly from a 16 pixel browser tab to a 512 pixel app icon without a single export. For a simple logo mark, an SVG favicon is often smaller in file size than an equivalent PNG, and it can carry prefers-color-scheme media queries inside the file itself, letting the icon flip between light and dark versions automatically. Embedding those media queries inside the SVG means dark-mode adaptation happens without a line of JavaScript, a detail that surprises a lot of developers still reaching for separate light/dark asset pairs.

ICO is a container format that bundles several raster sizes into a single file, a structure that dates back to early Windows icon handling, as Wikipedia’s technical rundown of the format) explains. Browsers still auto-request /favicon.ico from the root regardless of what’s in your HTML head, which is exactly why you keep one there. Its limitation is real, though: ICO cannot support dark mode or any conditional logic, it’s a static raster fallback and nothing more.

PNG is mandatory for two specific jobs: the apple-touch-icon and the manifest icons. Neither iOS nor the Android/PWA manifest spec accepts SVG for these roles reliably, so PNG remains non-negotiable there.

Pro Tip: Never add transparency to your apple-touch-icon. iOS fills transparent pixels with black rather than leaving them see-through, so a logo designed with a transparent background can end up sitting inside an ugly black square on someone’s home screen.

Favicon dimensions and file locations at a glance

Exporting the right favicon png size for each platform is easier with a single reference sheet in front of you. This is the set worth pinning above your desk.

A practical coverage set built from 16×16, 32×32, 48×48, 180×180, 192×192 and 512×512 shows up repeatedly across Favicon and community documentation, because it maps neatly onto what each platform actually renders. Google itself recommends a favicon larger than 48×48 pixels so it displays cleanly across surfaces, with 8×8 pixels as the technical minimum it will still accept, according to Google Search Central’s favicon guidance. Anything smaller than that risks not showing up in search results at all.

Keep /favicon.ico at the true root of your domain, never in a subfolder. Everything else can live wherever your asset pipeline prefers, as long as your link tags and manifest point at the correct path.

Implementation: the HTML head snippet and manifest fragment

Getting the order right in your <head> matters more than most developers assume, because browsers pick the first suitable icon they find. Vector first, ICO as silent fallback, then the platform-specific PNGs:

• <link rel="icon" type="image/svg+xml" href="/favicon.svg"> — declared first so capable browsers prefer it.
• <link rel="icon" href="/favicon.ico" sizes="32x32"> — explicit fallback reference, even though browsers request this automatically.
• <link rel="apple-touch-icon" href="/apple-touch-icon.png"> — no sizes attribute needed if you’re only shipping the standard 180×180.
• <link rel="manifest" href="/site.webmanifest"> — points to your PWA manifest file, which handles the 192/512 icons separately.

Your manifest fragment for the icons array looks like this:

"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]

Three ordering rules keep this reliable: always list the SVG link before the ICO link, never move /favicon.ico out of the root even if you’re linking it explicitly, and double check the manifest path resolves correctly relative to where site.webmanifest actually sits. A single typo in that path is the most common reason a PWA install prompt never appears despite every icon file existing and being correctly sized.

PWA and manifest considerations: maskable icons and safe area

Manifest icons must be raster PNG files. Progressive web apps rely on the manifest to drive install prompts and splash screens, and that specification calls for PNG icons, typically at 192×192 and 512×512, according to Wikipedia’s overview of progressive web app requirements. Manifest icons must be raster for install and splash-screen support on Android specifically, so don’t try to substitute your SVG here even though it would technically be smaller.

The purpose field is where most teams get tripped up. Set it to "maskable" if your app uses Android’s adaptive icon system, which crops your icon into different shapes (circle, squircle, rounded square) depending on the device’s launcher theme. A maskable icon needs its important content, your logo mark, sitting inside a safe zone of roughly 80% of the canvas, centred, so nothing critical gets clipped when the OS applies its mask.

• Design the safe area first: keep the logo within the centre 80% of the 512×512 canvas, with padding as bleed.
• Test in Chrome DevTools under Application → Manifest to confirm both sizes load without errors.
• Install the PWA on an actual Android device to see how the launcher crops it.
• Run the manifest through PWABuilder for a second opinion before shipping.

Pro Tip: If your logo has fine detail near the edges, redesign a simplified version specifically for the maskable icon rather than reusing your standard mark. What looks fine uncropped often looks amateurish once a launcher slices off the corners.

Legacy support and troubleshooting checklist

Browsers automatically request /favicon.ico from the site root the moment a page loads, regardless of whether you’ve linked it in your HTML. Supplying a multi-frame ICO there avoids repeated 404s cluttering your server logs and gives crawlers and older clients a fallback they can actually use, a point the community-maintained favicon cheat sheet makes clearly. Skip it, and you risk a blank generic icon in search results or browser tabs.

When something looks wrong, work through this order:

1. Check the Network tab in DevTools for failed or 404 requests against favicon.ico, apple-touch-icon.png, and your manifest PNGs.
2. Run a Lighthouse audit to catch missing or incorrectly sized icons flagged under PWA criteria.
3. Inspect the URL in Google Search Console if your favicon isn’t appearing in search results, since Google caches favicons separately from page content.
4. Clear service-worker caches if you’ve updated an icon but the browser keeps serving the old version, a classic cause of “I fixed it but nothing changed.”
5. Verify transparency and manifest paths if the apple-touch-icon looks wrong on iOS or the PWA install prompt never triggers.

Blurry icons almost always trace back to one cause: someone exported a small source file at a larger size rather than working from a properly scaled master. A broader technical SEO audit checklist is worth running periodically anyway, since favicon fetch errors tend to surface alongside other stale-asset problems.

Kukoocreative’s practical workflow for turning a logo into a deployable favicon set

At Kukoocreative, favicon production starts with a single SVG master, the same vector file used across your brand identity work. From there, the discipline is subtraction: simplify fine detail that won’t survive rendering at 16 pixels, because a mark that reads perfectly on a business card can turn to mush in a browser tab.

Once the simplified glyph is locked, we export the SVG for modern browsers, generate the multi-frame ICO for legacy fallback, and produce the PNG set for iOS and manifest use, testing each across real devices rather than trusting a preview pane.

Three design rules guide that simplification: a single bold shape reads better than a detailed emblem, contrast has to survive both light and dark browser themes, and text almost never survives shrinking to favicon size. If your logo depends on a wordmark, the favicon usually needs its own simplified icon variant.

Our portfolio shows this brand-to-asset workflow applied across real client projects, useful as a reference point if you’re mapping out your own production pipeline.

The favicon debate is mostly settled, and most sites still get it wrong

Here’s the uncomfortable truth: the technical question of favicon sizing was solved years ago. SVG-first with a lean ICO fallback isn’t a bold new opinion, it’s just what the specifications and browser behaviour have quietly supported for a while now. What’s kept sites shipping bloated, mismatched icon sets isn’t a lack of guidance, it’s inertia. Someone ran a favicon generator once in 2016, got fourteen files, and nobody’s touched it since.

The conventional advice, generate every conceivable size “just in case,” gets the priority backwards. Coverage matters less than consistency. A crisp SVG, one well-built ICO, and two correctly sized PNGs will outperform a folder of twelve inconsistently exported rasters every time, because the failure mode with too many files is someone forgetting to update half of them when the brand changes.

If you take one thing from this, prioritise the master file. Get your SVG source right, simplified, high contrast, legible at 16 pixels, and every other asset in the set becomes a mechanical export rather than a design decision made under deadline pressure.

— Kukoo

Get your favicon set built properly, without the trial and error

Kukoocreative treats a favicon as part of your visual identity, not an afterthought bolted on after the website ships. Where a generic icon generator gives you a mechanically resized logo that turns to mush at 16 pixels, our design process starts from your brand mark itself, simplifying it specifically for tiny-scale legibility before any file gets exported.

If you’re rebuilding your brand identity or briefing a new logo, our Visual Identity service covers exactly this: a properly constructed master file that translates cleanly into a favicon, app icon, and every other brand asset you’ll need down the line, with unlimited revisions built into the process. Already have a logo and just need the technical delivery sorted? Start with a logo design brief and tell us what you’re working with, we’ll take it from master file to deployed favicon set.

Sources

• Define website favicon for search results | Google Search Central
• Favicon

FAQ

What is the ideal favicon size in 2026?

There’s no single ideal pixel size because different platforms need different formats. Use an SVG as your primary icon for scalability, back it with a multi-frame ICO covering 16×16, 32×32 and 48×48, and add 180×180 for iOS plus 192×192 and 512×512 for manifest use, following the practical coverage set favicon.io recommends.

Should a favicon be SVG or PNG?

SVG is the better primary choice because it scales cleanly and can support dark mode through embedded media queries. PNG remains mandatory for the apple-touch-icon and manifest icons, since those platforms don’t accept SVG reliably.

How can I increase the size of my favicon?

You can’t scale up a small raster favicon without quality loss. Instead, go back to your source logo file, ideally a vector master, and export fresh PNGs at 180×180, 192×192 and 512×512 rather than resizing an existing small icon.

Does the favicon need to be ICO?

Not exclusively, but you should still keep one at your site root. Browsers automatically request /favicon.ico, and supplying a multi-frame version prevents 404 errors and blank icons in clients that don’t read your SVG link tag, a behaviour detailed in the favicon cheat sheet on GitHub.

Does Kukoocreative offer favicon production as part of a logo project?

Yes, favicon and icon asset delivery is built into Kukoocreative’s Visual Identity service, priced at £750 one off, which covers producing a brand master file that translates cleanly into a deployable favicon set.

Recommended

• What is a favicon? Your 2026 branding guide
• Small Businesses: 6 Logo Files to Request for Social Media
• Logo file formats: which ones your business actually needs
• Branding Consistency Workflow for Small Businesses