---
title: Should a Favicon Have a Transparent Background?
description: Transparent favicons look clean in a tab but break on iOS home screens, which composite onto black. When transparency helps and when to use a solid background.
canonical: https://favicontools.com/glossary/favicon-transparency
---

# 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.

> **iOS composites onto black:** A transparent apple-touch-icon ends up as your mark on a black tile, which is rarely what you want. Give every home-screen size a solid, intentional background colour.

## 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.