How to Make a Favicon (PNG, ICO, SVG, Apple Touch) Step-by-Step

Q: Do I still need favicon.ico in 2026?

Keep it. Browsers, RSS readers, and crawlers still request `/favicon.ico` at the root by default even when you declare nothing, and some older clients can't read SVG. It's your universal fallback.

If you generated a favicon any time before about 2018, you walked away with a folder of fourteen files and a <head> block ten lines long. That was real advice once; old Android, old iOS, and Internet Explorer each wanted their own size, and skipping one meant a blurry icon somewhere. Almost none of it is necessary now. A modern, correct favicon set is three image files and four lines of HTML, and it covers every browser, iOS, Android, and the PWA install prompt. This is the build guide; for whether Google will actually show the icon in search, see Favicon SEO.

The three formats, and what each one is for

There's persistent confusion about ICO vs PNG vs SVG, as if you must pick one. You don't; they cover different clients, and the trick is knowing which job each does:

| Format | What it does | Still needed in 2026? | | --- | --- | --- | | SVG | One vector file the browser renders crisp at any size, including in dark mode | Yes, it's the primary icon for modern browsers | | ICO | A legacy multi-resolution container (16/32/48) requested at /favicon.ico by default | Yes, as a fallback; old browsers, feed readers, and bare requests still hit it | | PNG | Fixed-size raster, used for the Apple touch icon and the manifest icons | Yes; iOS and Android don't use your SVG or ICO |

So the real-world minimal set is: one SVG (modern browsers), one ICO (the universal fallback), and PNGs for the two platforms that demand raster, namely Apple's 180×180 touch icon and the manifest's 192/512. That's it. You do not need favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, the Microsoft tile images, or the Safari pinned-tab SVG. The ICO already carries 16/32/48; the SVG handles everything else; the Microsoft tiles served a browser nobody ships.

Step 1: Start from one square source

Everything derives from a single square image. Design or export it at 512×512 (or as an SVG, which is resolution-independent):

Keep the mark centered with ~10% safe padding so it isn't clipped when platforms round the corners.
Drop fine detail. A 1px line or small text vanishes at 16×16. If you can't read it as a 16-pixel square, simplify before you generate anything.
Use a solid or fully transparent background. Subtle gradients turn to mud at small sizes.

If you don't have artwork yet, our Logo Maker produces a clean square SVG mark you can feed straight into the next step, and the design rationale for that lives in our SVG logo guide.

Step 2: Generate the set

The fast way: drop your square source into the Favicon Generator and download the bundle. It produces exactly the files below and nothing you'll throw away.

By hand, you need only these:

| File | Size | Format | Used by | | --- | --- | --- | --- | | favicon.svg | vector | SVG | Modern desktop & mobile browsers | | favicon.ico | 16/32/48 multi-res | ICO | Legacy browsers, feed readers, bare /favicon.ico hits | | apple-touch-icon.png | 180×180 | PNG | iOS "Add to Home Screen" | | icon-192.png | 192×192 | PNG | Android home screen (manifest) | | icon-512.png | 512×512 | PNG | PWA splash / install (manifest) |

Five files total, two of them only because iOS and Android refuse to read SVG icons.

Step 3: The HTML that's actually correct in 2026

Put the files at your site root and drop this in <head>. This is the whole block — four <link>s and a theme color:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a0a0a">

Why this works and why it's enough:

sizes="any" on the ICO tells modern browsers "this file covers all raster sizes," so they don't also request the SVG redundantly, and old browsers that ignore the attribute just use the ICO.
The SVG line is what crisp, dark-mode-aware browsers actually pick up.
The Apple touch icon needs no sizes attribute when it's the standard 180×180; iOS assumes it. The old habit of listing six apple-touch-icon sizes is dead; modern iOS scales the 180.
The manifest carries the Android/PWA icons, so they don't belong in the <head> as <link>s.

Step 4: The web app manifest

site.webmanifest is a tiny JSON file that wires up Android install and the PWA experience:

{
  "name": "Your Brand",
  "short_name": "Brand",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ],
  "theme_color": "#0a0a0a",
  "background_color": "#ffffff",
  "display": "standalone"
}

The "purpose": "any maskable" on the 512 is the one modern touch most old tutorials miss: it lets Android crop the icon into whatever shape the launcher uses (circle, squircle, rounded square) without chopping your mark, provided you kept that safe padding from Step 1.

Step 5: Cache-bust on redesign

Browsers cache favicons harder than almost any other asset; people see a stale icon for weeks. When you change the artwork, don't reuse the same filename silently. Either rename (favicon-v2.svg) and update the <link>, or append a version query (/favicon.svg?v=2). Note that Google, separately, wants the favicon URL to stay stable for search, so for a minor tweak, prefer the ?v= query over a full rename.

Step 6: Verify it resolves everywhere

A favicon set fails silently: the page looks fine, but one referenced file 404s and a platform falls back to a blank square. Run your URL through the Favicon Checker to confirm every declared icon returns 200 and the sizes line up. Then spot-check the three surfaces that each use a different file:

Desktop/mobile browser tab → SVG or ICO
iOS "Add to Home Screen" → the 180×180 apple-touch-icon
Android install prompt → the manifest's 192/512 PNGs

Frequently Asked Questions

Do I really only need three or four files?

Effectively, yes: an SVG, an ICO, and PNGs for Apple (180×180) and the manifest (192 + 512). The old 14-file kits existed for browsers that no longer ship. More files don't make the favicon "more correct"; they just add weight you'll forget to update.

Do I still need favicon.ico in 2026?

Keep it. Browsers, RSS readers, and crawlers still request /favicon.ico at the root by default even when you declare nothing, and some older clients can't read SVG. It's your universal fallback.

SVG or PNG: which should be the primary favicon?

SVG for browsers: one file, crisp at every size, and it can adapt to dark mode with currentColor and a media query. PNG is only mandatory where SVG isn't read: the Apple touch icon and the Android/manifest icons.

What size is the Apple touch icon?

180×180 PNG. A single one is enough on modern iOS; you don't need the old ladder of 152/144/120/114 sizes. Skip the sizes attribute on the <link> and iOS assumes 180.

Why doesn't my new favicon show up?

Almost always browser cache. Hard-refresh (Cmd/Ctrl+Shift+R), test in a private window, or add ?v=2 to the icon URL. If it's missing in Google search specifically, that's a different issue; see our favicon SEO guide.

Can I make a favicon from an emoji?

Yes. You can draw an emoji onto a canvas and export it, or even inline it as an SVG <text>. It's a perfectly good throwaway mark for a side project, though a real brand wants a designed icon.

How to Make a Favicon: PNG, ICO, SVG, and Apple Touch Icons