Should a Favicon Have a Transparent Background?
A transparent background suits the browser-tab favicon, letting the mark sit cleanly on light or dark chrome. But iOS ignores transparency on the apple-touch-icon and composites it onto black, so a transparent home-screen icon can become a shape floating on a black square. Use transparency for the tab favicon, and a solid background for the apple-touch-icon and other home-screen sizes.
Transparent where it helps, solid where it doesn't
For the tab favicon, transparency is an advantage: the mark adapts to whatever colour the browser chrome is, light or dark. That's the one surface where a clear background genuinely helps.
Home-screen icons are the opposite. iOS drops the alpha channel and composites the apple-touch-icon onto black, and Android maskable icons want a full-bleed background to crop into a shape. On both, a transparent source looks wrong.
Favicon transparency FAQ
Should my favicon have a transparent background?
For the browser tab, yes. It adapts to light and dark chrome. For the apple-touch-icon and other home-screen sizes, no. Use a solid background.
Why is my iOS home-screen icon on a black square?
Because iOS ignores transparency and composites the apple-touch-icon onto black. Re-export that icon with a solid background fill.
Do maskable icons need a background?
Yes. Maskable icons are cropped to a shape by the launcher, so they need a full-bleed background with the mark kept inside the safe zone.