Favicon Size for Websites: Dimensions, Safe Areas and Padding
Which favicon sizes a website needs, how safe areas and padding differ between tab icons and home-screen icons, and how to prepare them from vector logo artwork.
Contents
The short answer
A website does not have one favicon size. It provides a small set of icons, each for a different context: tiny icons for browser tabs and bookmarks, larger icons for phone home screens, and larger still for installable web apps. The research for this article found no subject-specific evidence, so the sizes below are widely documented conventions, not measurements. Check them against the current documentation for the browsers and platforms you support.
| Context | Commonly used format and size | Padding approach |
| Browser tab, bookmarks, history | 16×16 and 32×32 pixels, often bundled in an ICO file (48×48 is sometimes added) | Little or none; the mark should fill most of the canvas |
| Modern browsers that accept scalable icons | SVG favicon | Same as tab icons; the artwork must still read at very small sizes |
| Apple home screen (touch icon) | 180×180 PNG | Solid background with moderate breathing room; the platform rounds the corners |
| Installable web app (web app manifest) | 192×192 and 512×512 PNG | Standard icons follow the tab-icon approach; maskable icons need a defined safe zone |
What safe area and padding mean for a favicon
The canvas is the full square of the icon file. The safe area is the part of that square where essential artwork stays visible after the platform crops, masks or rounds the icon. Padding is the space you leave between the artwork and the canvas edge. How much padding you need depends on where the icon appears. Tab icons are shown uncropped at a very small size. Home-screen and app icons are often reshaped by the operating system.
Tab-size icons: keep padding minimal
At 16 or 32 pixels, every pixel of padding shrinks a mark that is already small. Tab icons generally work best when the symbol fills nearly the whole canvas. A transparent background is common so the icon sits cleanly on light and dark browser themes. This is a practical design judgment rather than a platform requirement. Check contrast on both theme colors, because a dark mark on a transparent background can disappear in a dark tab bar.
Home-screen icons: plan for platform shaping
Platforms often apply their own shape to home-screen icons, such as rounded corners. Some platforms may also fill transparent areas with a color you did not choose. A solid background that covers the full canvas, with the mark centered and given some breathing room, gives predictable results. Keep anything important away from the corners.
Maskable icons and the manifest safe zone
Icons marked as maskable in a web app manifest can be cropped into circles, squircles or other shapes. The manifest specification defines a safe zone for this: a centered circle with a radius of 40 percent of the icon's width. In practice, keep the logo inside the central circle, which spans 80 percent of the canvas width, and extend the background color to every edge. Anything outside the circle may be cut off. Because a maskable icon needs this extra padding, it is usually exported as a separate file rather than reused from the tab icon.
Starting from vector logo artwork
A full logo lockup with a wordmark rarely survives being shrunk to tab size. Most favicons use a simplified symbol, monogram or single letter from the brand system. Thin strokes may need thickening, and fine detail may need removing. After export, test each icon at its real display size, not zoomed in on a design canvas. At 16 pixels, lining shapes up to the pixel grid can noticeably improve sharpness.
Check that your source is actually vector. A file with an SVG, EPS, AI or PDF extension can hold true editable paths, but it can also hold an embedded raster image or only a raster preview. You cannot tell from the filename or extension. Open the file in a vector editor and confirm that the shapes are editable paths. An SVG favicon that wraps an embedded bitmap gives you none of the benefits of scalable artwork.
Rights to the artwork
Being able to download a logo file is not permission to modify it or use it as a favicon. Simplifying, recoloring or cropping a mark changes the artwork. Trademark rights, artwork licenses and any font licenses in a wordmark are separate questions. For your own brand this is usually settled. For third-party or client logos, confirm permission before making derivative icons.
Preparation checklist
- Confirm the source logo contains editable vector paths, not an embedded or preview raster.
- Create a simplified mark suitable for very small sizes.
- Export tab icons at 16×16 and 32×32 with minimal padding, and optionally an SVG version.
- Export a 180×180 touch icon on a solid, full-bleed background.
- Export 192×192 and 512×512 manifest icons, plus a maskable version with the logo inside the central safe zone.
- Test each icon at its real size on light and dark backgrounds and on the target devices.
- Confirm you have the rights to adapt the logo artwork.
Gaps in this assessment
The supplied evidence included no specific specifications, test results or platform documentation. The sizes and the safe-zone figure above reflect general, widely published conventions, and the padding advice is editorial judgment. Browser and operating-system requirements change, so check current vendor guidance before finalizing a favicon set.