A favicon is the small icon a browser shows in the tab, the bookmark, and (on many platforms) the home screen and recently-used pages. The tool above turns one source image into a ZIP with a multi-size favicon.ico, PNG icons from 16 to 256 px, a 180×180 apple-touch-icon.png and the <link> tags to paste; the source never leaves your machine.

What “the favicon” actually is

There isn’t one favicon. Different surfaces want different sizes and formats:

Surface	Size	Format	Where it appears
Browser tab	16x16, 32x32	ICO (legacy), PNG, SVG	The tab itself
iOS home screen icon	180x180	PNG (no alpha rendering issues)	When user “Add to Home Screen”
Android home screen	192x192, 512x512	PNG	Add to Home Screen, app drawer
Web app manifest	192x192, 512x512	PNG	PWA install dialogs
Safari pinned tab	scalable	SVG (monochrome)	Safari’s pinned tabs
Windows tile (legacy)	70x70, 150x150, etc.	PNG	Windows 8/10 Start menu pinned site

A complete favicon set covers at least the first three. Older guides recommend 7+ sizes; modern guides have collapsed to a smaller set as legacy platforms phase out.

The minimal modern set

For a site built today, the smallest workable set is:

favicon.ico at the site root (32x32 inside it). Browsers fall back to this when nothing else is declared.
favicon.svg — modern browsers prefer SVG when available. Scales infinitely; one file replaces multiple PNG sizes.
apple-touch-icon.png at 180x180. iOS uses this for home-screen icons.
android-chrome-192x192.png and android-chrome-512x512.png for Android and PWA manifests.

With these four files (plus a manifest entry pointing at the Android sizes), every modern platform gets a sharp icon.

The HTML

Declare them in the <head>:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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">

Browsers pick the best match. SVG-capable browsers use the SVG; iOS uses the apple-touch-icon; older browsers fall back to favicon.ico at the root.

Why ICO format still exists

Favicon support predates PNG support in all browsers. The .ico format was the original — a Windows container that holds multiple PNGs at different sizes inside a single file. Browsers historically auto-detected /favicon.ico even without a <link> tag.

Modern browsers prefer PNG and SVG, but the auto-detection of /favicon.ico is still convention. Including a 32x32 favicon.ico at the site root catches the few cases where the <link> tags don’t reach the browser (RSS readers, OG-style previews, some embedded browsers).

SVG favicons: the modern default

A single SVG can replace most of the PNG variants. Advantages:

One file instead of 4–7.
Scales infinitely — sharp on any DPI.
Smaller than the equivalent PNG set for simple icons.
Light/dark mode aware. SVG can include prefers-color-scheme media queries to switch colors.

Limitations:

iOS Safari doesn’t use SVG for home-screen icons. Still need apple-touch-icon.png.
Older browsers don’t support SVG favicons. Still need favicon.ico fallback.
Complex SVGs may render inconsistently. Keep favicon SVG minimal (geometric shapes, single-color fills).

The tool above produces raster files only (ICO and PNG) — including when you upload an SVG. If you want an SVG favicon, serve your source SVG directly as favicon.svg. It also stops at 256 px, so export a 512×512 PNG from your design tool if your web app manifest needs one.

What makes a good favicon image

Recognizable at 16x16. Detail disappears below ~32 pixels. A favicon that’s a tiny version of a wordmark is usually unreadable; a favicon that’s a single bold mark is recognizable.
High contrast. Browser tabs have light and dark themes; the favicon needs to read on both. SVG with theme-adaptive colors handles this; PNG doesn’t.
Square aspect ratio. Almost all favicon surfaces are square. The tool above fits a non-square image inside the square with transparent padding, which leaves the mark small — crop to square first for the best result.
Solid background. Transparent backgrounds work everywhere except a few legacy Windows surfaces. iOS 12 and earlier added a black background to transparent home-screen icons.

Common pitfalls

Using a wordmark as the favicon. Below 32px the text is unreadable; the result is a blurry smudge. Use a symbol or initial.
Only providing favicon.ico. Modern browsers will use it but won’t get the SVG benefits, and iOS home-screen will get a blurry small image.
Forgetting the manifest. Without a web manifest, PWA installs and Android home-screen pins fall back to lower-quality icons.
Checking the favicon by visiting the site once. Browsers cache favicons aggressively. Use DevTools to clear or browse incognito to verify changes have taken effect.
Using a JPEG for the apple-touch-icon. PNG is required; JPEG produces visible compression artifacts at iOS rendering sizes.

For other image-related tools, see image to base64.

Favicon Generator