Guide

How to Create Favicons in Multiple Sizes

Learn what favicons are, the sizes you need, and how to generate them from a single image.

A favicon generator takes a source image and produces favicon files in the sizes modern browsers and devices expect, plus the HTML link tags to wire them up. It is the quickest way to give a site a proper icon set.

What a favicon is

A favicon is the small icon shown in browser tabs, bookmarks, and home-screen shortcuts. Different platforms expect different sizes: a 16×16 or 32×32 PNG for browser tabs, a 180×180 PNG for Apple touch icons, and 192×192 / 512×512 PNGs for Android and PWA home screens.

Sizes you need

  • 16×16 and 32×32 — classic browser tab favicons.
  • 48×48 — Windows site icon.
  • 180×180 — Apple touch icon (iOS home screen).
  • 192×192 and 512×512 — Android/PWA home screen and splash.

How to generate favicons

  1. Upload a square source image (ideally 512×512 or larger).
  2. Generate the favicon sizes.
  3. Download the files and copy the provided HTML link tags.
  4. Add the files and tags to your site.

Examples

A 512×512 logo generates a full set: a 32×32 tab icon, a 180×180 Apple touch icon, and 192/512 PWA icons. The accompanying <link rel="apple-touch-icon" href="/apple-touch-icon.png"> tags tell each platform which file to use.

When a favicon generator is useful

  • Adding a favicon to a new website.
  • Producing a complete icon set for a PWA.
  • Creating Apple and Android home-screen icons.
  • Refreshing an outdated site icon.

Put it into practice

Use the Favicon Generator right now — free, in your browser, no sign-up required.

Try the Favicon Generator