Favicon Guidelines: Sizes, Formats & Web Manifest

Browsers
iOS
PWA

A favicon is the small icon shown in browser tabs, bookmarks, history and, increasingly, on phone home screens. One image is no longer enough: browsers, iOS and Android each look for different files and sizes.

The good news is that the required set of files has settled down. A modern site needs a handful of PNGs, one legacy ICO, an opaque Apple touch icon and a small manifest file. The sections below cover what each consumer expects, and the free favicon generator produces every file from a single PNG, SVG or logo.

Formats

PNG: the workhorse. Supports transparency and is understood by every browser. Use it for all tab, bookmark and home-screen icons.
ICO: a container that holds several sizes in one file. Only needed for very old browsers and for Windows, which reads /favicon.ico from the site root even when no tag points to it. Modern ICO files simply embed PNG data.
SVG: optional but nice. Chrome, Firefox and Edge will use a vector favicon and it stays crisp at any size. Safari does not, so always ship PNGs alongside it.

Sizes

Browsers pick the closest size to what they need, so provide the sizes they actually render rather than a large single image they have to shrink.

16×16 and 32×32: browser tabs, address bar and bookmarks on standard and high-DPI displays.
48×48: the third frame inside favicon.ico, used by Windows shortcuts and older Chrome versions.
96×96: Google search results and desktop shortcuts on high-DPI screens.
180×180: the Apple touch icon shown when a site is added to an iOS home screen.
192×192 and 512×512: Android home screen and install prompts, referenced from the web app manifest.

Design

Keep it simple: at 16 pixels there is room for one shape or one letter. Text longer than a couple of characters becomes noise.
16×16 Pixel Grid
Every pixel counts. Stick to one bold shape.
Transparency: works in browser tabs and lets the icon sit naturally on both light and dark tab bars. Check it against both before shipping.
Apple touch icon must be opaque: iOS renders transparent pixels as black. Give it a solid background and square corners; iOS applies its own rounded mask.
✕ Transparent
✓ Opaque Base
Avoid transparency
iOS turns transparent areas into black rectangles.
Maskable icons: Android can crop the manifest icons into circles or squircles. Keep important content inside the centre 80% and only mark an icon maskable when it has a full-bleed background.
The Safe Zone
Keep important logo elements inside the dotted circle so they aren't cropped by Android's masks.

Web App Manifest

The manifest is a small JSON file, usually named site.webmanifest, that tells Android and desktop browsers how to install your site. The generator fills the fields below for you.

name / short_name: the full title and a short label of at most 12 characters for the home screen.
icons: the 192 and 512 pixel PNGs with their sizes and purpose.
theme_color: tints the browser UI and the Android status bar.
background_color: splash screen colour shown while the app loads.
display and start_url: how the installed app opens and where it starts. The defaults are standalone and /.

HTML Tags

Place the files at the root of your site and add the tags from the bundled snippet to the <head> of every page. Keep favicon.ico at the root even if you link the PNGs, because some tools request it directly.

Browsers cache favicons aggressively. After deploying a new icon, hard-refresh or open a private window to see the change, and expect search engines to take days to update.

Ready to build the set? The favicon generator converts your PNG, SVG or logo into every file above, plus the manifest and HTML snippet, in a single zip. Building a mobile app instead? See the app icon guidelines.