How to Create Transparent Favicons (PNG & ICO)

Your favicon.ico, favicon.svg, and PNG icons should have a transparent background so the icon floats cleanly on a light tab, a dark tab, a bookmarks bar, or a coloured launcher — no awkward box around the logo. The big exception is the Apple touch icon: it must be opaque. A transparent apple-touch-icon.png renders as a black square on the iOS home screen, because iOS fills the empty pixels with black before applying its own rounded corners.

In one line: make everything transparent except the Apple touch icon, which needs a solid background.

So “transparent favicons” is really two rules running side by side. Get the alpha channel right on the icons that live in browser chrome, and deliberately flatten the one icon that lives on a phone home screen. Below is how to export each correctly, and the three transparency bugs that cause 90% of the white-box and black-square complaints.

Which favicon files should be transparent?

Not all of them. Here’s the modern set and where transparency belongs:

File	Transparent?	Why
favicon.ico	Yes	Sits on light/dark tabs and Windows shortcuts
favicon.svg	Yes	Primary icon; floats on any tab colour
apple-touch-icon.png	No — opaque	Transparency turns black on iOS
icon-192.png	Yes	PWA launcher; transparency is fine
icon-512.png	Yes	PWA install + splash
icon-512-maskable.png	No — filled safe zone	Android masks it; gaps show the launcher background

The two opaque cases are the ones people miss. Everything in the browser-chrome group (.ico, .svg, plain PNGs) wants a clean alpha channel. The Apple touch icon and the maskable PWA icon both need a filled background, for different reasons covered below.

How to export a transparent PNG

Start from a square source — 512×512 or larger — with the artboard background set to transparent, not white. Then:

1. Keep the canvas transparent. In Figma, Illustrator, or Sketch, the artboard fill must be none/transparent, not a white rectangle hiding in the back layer.
2. Leave padding. Keep ~10% breathing room around the mark so rounded-corner masks and tab scaling don’t clip it.
3. Export 32-bit PNG with alpha. Choose “PNG-24” / “32-bit” with transparency (sometimes labelled “Transparent background”). A JPG cannot hold transparency at all — exporting JPG is the #1 cause of a white box.
4. Verify the alpha. Open the file over a dark background (drop it onto a black slide, or use a checker-board preview) to confirm the background is actually empty, not white.

Starting from clean vector artwork matters here: a raster logo that already baked anti-aliased edges against white will carry a faint white fringe when you scale it down. If you’re prepping a master file, the create a favicon from an image or logo guide covers getting that source right.

Keep the alpha channel through PNG → ICO conversion

The ICO format does support transparency — a 32-bit .ico carries a full 8-bit alpha channel. The trouble is that some converters silently flatten it onto a white matte. Use a method that preserves alpha:

magick input.png -background none -define icon:auto-resize=48,32,16 favicon.ico

The -background none flag is what keeps the transparent backdrop instead of compositing onto white. The auto-resize list bundles 16/32/48 into one multi-size .ico — you don’t hand-export those as separate files. If you use an online converter, pick one that explicitly states it preserves transparency or alpha. The PNG to ICO conversion guide walks through the command-line options and the multi-size bundle in full.

SVG transparency: just don’t paint a background

An SVG has no background unless you draw one. Transparency is the default. The only way to lose it is to leave a full-canvas shape in the file — usually a leftover <rect width="100%" height="100%"> or a frame that spans the entire viewBox.

So the rule is simply: delete any background rectangle. Check your SVG source for a filled shape covering the whole canvas and remove it. What’s left renders transparent on every tab. (For dark-mode SVG tricks with @media (prefers-color-scheme: dark), see the dark mode favicon guide.)

Make the Apple touch icon OPAQUE

This is the exception that catches everyone. The 180×180 apple-touch-icon.png referenced by <link rel="apple-touch-icon"> must have a solid background. iOS doesn’t honour transparency for home-screen icons — it composites the icon onto its tile and fills any transparent pixels with black, so a transparent Apple touch icon shows up as your logo on an ugly black square.

The fix has two parts:

• Fill the background with a solid colour — white, your brand colour, or whatever sits behind your logo. No alpha.
• Add ~20px of padding so iOS’s rounded-corner mask doesn’t clip the artwork.

This rule applies only to the Apple touch icon. Your favicon.ico, favicon.svg, and PNG tab icons stay transparent.

The maskable PWA icon also needs a filled background

Android adaptive icons are the second opaque case. Android masks your icon into a circle, squircle, or rounded square depending on the device, and crops anything near the edge. The maskable icon is a separate 512×512 PNG whose important art sits inside a central 409×409 “safe zone” — and the area around that safe zone must be a filled background, not transparent. If it’s transparent, the launcher’s own background shows through the gaps and the icon looks broken.

So the maskable icon gets its own padded artwork with a solid backdrop, marked "purpose": "maskable" in the manifest — kept distinct from the plain icon-512.png. The PWA favicon and manifest guide covers the three-entry icon list in detail.

Three transparency bugs to stamp out

Almost every “my favicon looks wrong” report traces to one of these:

• The white-box halo. A solid (usually white) rectangle around the logo on a dark tab. Cause: the file was flattened — a JPG export, a hidden background layer, or a converter that matted onto white. Fix: re-export a 32-bit PNG and convert with -background none.
• Matte fringe on the edges. A thin pale outline on the icon’s anti-aliased edges. Cause: the artwork was anti-aliased against a white matte, then placed on a dark background, so the blended edge pixels stay light. Fix: re-render the edges against transparency, or against the actual background colour you’ll use.
• The black Apple square. Your logo on a black tile on iOS. Cause: a transparent Apple touch icon. Fix: give it a solid background — this one is supposed to be opaque.

Generate the set with transparency handled for you

Doing this by hand means juggling two opposite rules — keep alpha on most files, flatten it on the Apple and maskable icons — across a multi-size ICO, an SVG, and several PNGs. FaviconBuilder takes one upload (SVG preferred, or a PNG/JPG at 512×512 or larger) and outputs the full set with transparency preserved on the tab icons and the Apple touch icon made opaque automatically — plus the ready-to-paste HTML and manifest. It’s free, needs no account, and your image never leaves your browser.

Summary

Transparency in favicons is two rules at once:

• Transparent: favicon.ico, favicon.svg, and the plain PNG icons — clean alpha so they sit on any tab colour.
• Opaque: apple-touch-icon.png (solid background + ~20px padding, or it turns black on iOS) and the maskable PWA icon (filled background behind the 409×409 safe zone).

Export 32-bit PNGs, convert to ICO with the alpha preserved, never paint an SVG background, and the only white boxes or black squares you’ll see are in other people’s favicons.

Continue reading:

• How to Convert PNG to ICO for Favicons
• How to Create a Favicon From an Image or Logo
• How to Make a Favicon for Dark Mode
• Favicon Sizes & Dimensions: Every Size You Need