Favicon 128 PNG: Where the Size Fits and How to Prepare It
What a 128×128 PNG favicon is used for, how it compares with 32×32 and 196×196 icons, and how to refine a vector logo for small pixel grids.
Contents
The short answer
A 128×128 PNG is a raster export of a logo or icon on a square grid of 128 by 128 pixels. It is not one of the core sizes most browsers request for the tab icon. For tabs, bookmarks and address bars, the 32×32 icon and its smaller companions matter most. Larger square PNGs serve high-density displays, app-style shortcuts and platform listings. A 128-pixel version is useful when a specific platform, plugin, extension store or content system asks for it. Otherwise it is an optional middle step between your small tab icons and your large home-screen icons.
No platform-specific documentation or measurements were supplied for this article. The size roles described below reflect widely used conventions, not a verified current specification. Before you finalize a favicon set, confirm the exact sizes against the documentation of each browser, operating system or platform you target.
What the file actually is
Any PNG favicon, whether 32, 128 or 196 pixels wide, is a raster image. It stores a fixed grid of colored pixels. It does not contain editable vector paths, even if it was exported from vector artwork. Scaling a 128-pixel PNG up produces blur. Scaling it down lets the software decide which detail survives, and the results are often muddy.
The editable master should therefore be a vector file of the logo or icon mark. Do not assume a file is vector because of its name or extension. An SVG, EPS, PDF or AI file can contain nothing more than an embedded raster image. Open the file in a vector editor and check that the shapes are real paths you can select and adjust before you treat it as your source.
How 128×128 compares with 32×32 and 196×196
- 32×32: the workhorse of a favicon set. Browsers commonly use it for tabs, bookmarks and history, and high-density screens often show it in place of a 16-pixel icon. At this size every pixel counts, and pixel-grid refinement matters most.
- 128×128: a mid-size raster. It shows up in some extension stores, app listings, CMS icon fields and desktop shortcut contexts. It has room for more detail than 32 pixels, but it still benefits from simplified artwork.
- 196×196: a larger square icon associated with older Android and Chrome home-screen shortcuts. Many current setups use 192×192 and 512×512 icons declared in a web app manifest instead. Whether you still need 196×196 depends on which platforms you support.
In practice, sizes this far apart should not all come from one resize. Each size range has its own design problem. The 32-pixel icon needs aggressive simplification. The 128-pixel and 196-pixel icons can carry more of the original mark.
Pixel-grid refinement: why small sizes need their own artwork
When vector artwork is rasterized, edges that fall between pixels become semi-transparent, anti-aliased pixels. On a 128-pixel canvas this softening is barely visible. On a 32-pixel canvas a one-pixel stroke that straddles two pixel columns turns into a two-pixel gray smear. The icon then looks blurry even though the source is crisp.
- Simplify the mark. Drop taglines, small lettering, thin outlines and fine interior detail at 32 pixels. A full logo rarely works as a tab icon, so a single letter, monogram or symbol usually reads better.
- Work on a canvas that matches the export size. Set the artboard to 32×32 or 128×128 units, with one unit per pixel, so you can see where edges land.
- Snap edges to whole pixels. Move horizontal and vertical edges, and the start and end points of straight segments, onto full pixel boundaries so they render sharp instead of half-filled.
- Use whole-pixel stroke and gap widths. At 32 pixels, aim for strokes and spaces that are whole pixels wide and consistent across the mark.
- Adjust curves and diagonals by eye. These cannot align perfectly, so compare the exported raster at 100% zoom and nudge points until the shape reads cleanly.
- Check contrast against light and dark tab backgrounds. Thin dark marks can disappear in dark browser themes. A solid background shape or a subtle outline can help.
Many teams keep two or three tuned vector versions of the icon: a heavily simplified one for 16 and 32 pixels, and a more detailed one for 128 pixels and up. Each version is exported only at its intended sizes.
Exporting the 128-pixel PNG
- Export from the vector master or the size-tuned version, not by resizing another PNG.
- Keep the canvas exactly square at 128×128 pixels, with the mark centered and consistent padding around it.
- Use a transparent background unless the target platform asks for a solid one. Some launchers and stores add their own masks or backgrounds.
- Preview the result at 100% zoom on the background colors it will appear against.
- Name the file clearly, for example by size, so it can't be confused with the 32-pixel and 196-pixel exports.
Declaring PNG favicons in HTML
Browsers learn about PNG icons through link elements in the page head. Each element carries a sizes attribute, so the browser can pick the most suitable file. The snippet below shows the pattern with placeholder filenames. Larger home-screen icons are often declared in a web app manifest instead of, or alongside, these tags.
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32.png">
<link rel="icon" type="image/png" sizes="128x128" href="favicon-128.png">
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196.png">
Browser support and the selection logic for these sizes vary and change over time. Test the set in the browsers and devices that matter to your audience rather than assuming every declared size will be used.
Using someone else's logo as a favicon
Being able to download a logo file, such as from a press kit or an icon site, does not give you permission to redraw it, simplify it for small sizes or use it as the favicon for your own site. The artwork, any typefaces in it and the trademark itself can each carry separate restrictions. Check the brand guidelines or license, or get permission, before adapting a logo you don't own.
Evidence gaps
This article draws on general rasterization and favicon-design principles. No platform documentation, browser test results or measurements were supplied. As a result, it does not confirm which current browsers or platforms request a 128×128 or 196×196 PNG, or how they choose between declared sizes. Verify those requirements against official documentation for your target platforms before you deliver a final favicon package.