Skip to content

How to generate a complete favicon set

Which favicon files a website needs today, from favicon.ico to the Apple touch icon and web manifest icons, and how to generate all of them from one image.

Websites and developers · 2 min read · Updated

Ready to try it? Open Favicon Generator. It runs in your browser, with no upload.Open tool

What a site needs

Browsers, phones and operating systems each look for their own icon. A practical set covers:

  • favicon.ico containing 16, 32 and 48 pixel images, for browser tabs and software that requests /favicon.ico directly.
  • PNG favicons at 16 and 32 pixels for browsers that prefer PNG.
  • An SVG favicon if your logo is vector artwork. It stays sharp at every size.
  • apple-touch-icon.png at 180 × 180 pixels for iPhone and iPad home screens.
  • 192 and 512 pixel icons listed in a web manifest, for Android home screens and installable web apps.

Generating them

  1. Open Favicon Generator and drop a square logo, ideally 512 px or larger, or an SVG. You can also build an icon from one to three letters or an emoji.
  2. Check the previews at their real sizes. Detail that looks fine at 512 px often disappears at 16 px.
  3. Set the app name and theme colour used in the web manifest, and the path where the icons will live.
  4. Download the ZIP, upload the files to your site, and paste the HTML snippet into the head of your pages.

Design for 16 pixels

In a browser tab a favicon is 16 × 16 pixels, or 32 × 32 on high-density screens. Thin lines, small text and fine detail turn to mush at that size. A simplified mark, a single letter or a bold shape works better than a full logo with a wordmark. Leave a little padding, and check how the icon looks on both light and dark browser themes.

SVG input is sanitised

If you start from an SVG, it is sanitised first: scripts, event handlers and external references are removed. The cleaned SVG becomes icon.svg and is rendered at a large size for crisp PNG icons. Running it through SVG Optimizer as well keeps icon.svg small.

App icons are a separate job

Native apps need different sets: iOS icons up to 1024 px without transparency, Android adaptive icons with separate layers, and macOS iconsets. App Icon Generator builds those from one square image, ideally 1024 px or larger.

Limitations

Browsers cache favicons aggressively. After you replace them, a hard refresh, a private window or some patience may be needed before the new icon appears.

Tools in this guide

Related guides

All guides