logoredraws.com

Site icon size

Which sizes a site icon needs, from the 16-pixel browser tab icon to large app icons, plus how safe areas, padding and vector source artwork fit in.

Published

Contents
  1. The short answer
  2. Commonly used favicon sizes
  3. Where vector artwork fits
  4. Safe areas and padding
  5. Simplifying the logo for small sizes
  6. Rights before reworking a logo
  7. Preparation checklist

The short answer

There is no single site icon size. A browser tab shows the favicon at about 16 by 16 CSS pixels, scaled up on high-density screens, so the artwork has to read at that tiny scale. A complete favicon set also covers bookmarks, home screens and installed web apps, and each of those uses a different size. The practical approach is to build one square master in vector form and export the sizes each platform asks for.

Commonly used favicon sizes

Size | Typical use
16 × 16 px | Browser tab; smallest layer of a favicon.ico file
32 × 32 px | Tabs on high-density displays and desktop shortcuts; often bundled in favicon.ico
48 × 48 px | Larger ICO layer; Google Search recommends square favicons in multiples of 48 px
180 × 180 px | Apple touch icon for the iOS home screen
192 × 192 px | Web app manifest icon for Android home screens
512 × 512 px | Web app manifest icon for splash screens and install prompts
SVG (no fixed size) | Scalable favicon for browsers that support SVG icons

These figures are widely published conventions, not measurements taken for this article. The research for this piece found no confirmed platform specifications, and browser and operating-system requirements change over time. Check current platform documentation before a release.

Where vector artwork fits

The tab icon is almost always delivered as raster pixels. ICO and PNG files store a fixed pixel grid, and browsers that accept an SVG favicon still render it to pixels at display size. The vector file is usually the source artwork that every size is exported from, not the file browsers receive.

An SVG favicon is only truly vector if it contains paths and shapes. Some SVG files simply wrap an embedded PNG, so they behave like raster images and blur when scaled. A file extension or filename alone does not prove the artwork is editable vector. Open the file in a vector editor and check for selectable paths before treating it as a master.

Safe areas and padding

Tab icons have almost no spare room. At 16 pixels, every pixel of padding shrinks the visible mark. As an editorial judgment, most tab icons work best when the symbol fills the square, with at most a pixel or so of breathing room. Large internal margins tend to make the icon look smaller than its neighbors in the tab bar.

Maskable web app icons work differently. The Web App Manifest specification defines a safe zone: a centered circle whose diameter is 80 percent of the icon's width. Platforms can crop the icon to circles, squircles or rounded squares, so anything outside that circle may be cut off. Keep the essential mark inside the circle and extend the background color to all four edges.

Apple touch icons get rounded corners from the operating system. Avoid placing detail in the corners. Transparent areas may not display as intended on the home screen, so a solid background is the safer choice.

Simplifying the logo for small sizes

A full wordmark or detailed lockup rarely survives at 16 or 32 pixels. Most site icons use the logo's symbol, a monogram or a single letter instead. Fine lines, small counters and thin gaps tend to fill in at these sizes, so small versions often need heavier strokes and simpler shapes than the main logo.

Shrinking a 512-pixel export down to 16 pixels usually produces a soft, muddy result. A cleaner approach is to keep a separate small-size artboard in the vector master, align its edges to the pixel grid, and check the 16 and 32 pixel exports at actual size.

Being able to download a logo file does not mean you may crop, simplify or redraw it as a favicon. Modifying the artwork, using its fonts and displaying the trademark are separate permissions. If the logo is not yours, confirm with the brand owner or check their brand guidelines before you create a derivative icon.

Preparation checklist

  • Confirm the master file contains real vector paths, not an embedded raster image
  • Create a simplified square mark suited to very small sizes
  • Export 16, 32 and 48 px versions and review them at actual size
  • Export 180, 192 and 512 px versions for touch and app icons
  • Keep maskable icon content inside the central 80 percent circle with a full-bleed background
  • Use a solid background for the Apple touch icon
  • Verify current size requirements against each platform's own documentation