How to Generate All Favicon Sizes from One Image

Every website needs a favicon — that tiny icon in browser tabs, bookmarks, and mobile home screens. But getting the sizes right for every platform is a hassle. Here’s what you actually need.

What sizes do you need?

Modern browsers and platforms expect multiple favicon sizes:

That’s 9 sizes from a single source image. Doing this manually in Photoshop is tedious.

The minimum viable favicon set

If you want to cover the most ground with the least effort:

1. favicon.ico — 16x16 and 32x32 bundled in ICO format. The universal fallback
2. apple-touch-icon.png — 180x180 for iOS home screen
3. icon-192.png and icon-512.png — For Android manifest
4. favicon.svg — Scalable, supports dark mode via CSS media queries

HTML setup

<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" />

And in your site.webmanifest:

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

SVG favicons

SVG favicons are becoming the modern standard:

• Scalable — Look perfect at any size
• Tiny file size — Often under 1 KB
• Dark mode support — Use CSS prefers-color-scheme inside the SVG
• Supported in Chrome, Firefox, Edge (not Safari as of 2026)

Keep a PNG fallback for Safari and older browsers.

Source image tips

• Start with at least 512x512 — You can always scale down, but scaling up creates blur
• Use a square image — Non-square sources will be cropped or padded
• Keep it simple — Favicons are tiny. Fine details disappear at 16x16
• Test at small sizes — What looks great at 512px might be unrecognizable at 16px
• Use strong contrast — The icon needs to be visible against both light and dark browser chrome

Common mistakes

• Using a photo — Photos don’t work at 16x16 pixels. Use simple, bold shapes
• Forgetting the apple-touch-icon — iOS uses this for the home screen. Without it, iOS takes a screenshot of your page
• Only providing one size — The browser picks the closest match. Providing only 512x512 means the browser has to scale it down, often poorly

A favicon generator tool takes your source image and produces every size you need in one step — ICO, PNG, and manifest ready to drop into your project.