Favicon FAQ
Should a favicon be transparent?
Give browser-tab favicons a transparent background so they sit on light and dark tab strips. Keep the Apple touch icon and maskable icons opaque, because those platforms fill or crop the empty space for you.
Transparency helps in browser tabs
Browsers paint the tab strip in the user's theme color, and that color changes between light and dark mode. A transparent background lets your mark sit on whatever the browser draws. A white square baked into the artwork shows up as a bright block on a dark tab.
ICO, PNG, and SVG all carry an alpha channel, so they can store per-pixel transparency. JPEG cannot, which is one reason it makes a weak favicon source. See is a favicon a PNG or JPEG for the format comparison. If your source art has a transparent background, the Favicon Generator keeps it in the exported PNG and ICO files.
Where each icon needs a background
| Icon | Transparent? | Reason |
|---|---|---|
favicon.ico and tab PNGs | Yes | Adapts to light and dark tab strips |
| SVG favicon | Yes | Same tab placement, drawn at any size |
apple-touch-icon | No | iOS renders transparent pixels as black |
| Maskable manifest icon | No | Launchers crop it to a platform shape |
Keep the Apple touch icon opaque
Apple's home-screen icon is the clearest exception. iOS composites transparent areas against black, so a transparent logo can land on the home screen as a dark tile. Export a 180x180 PNG with a filled background instead.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />Apple documents the icon rules in Configuring Web Applications. The Apple touch icon generator lets you pick that background color and download the flattened file.
Maskable icons need a full-bleed background
Android launchers crop maskable icons into circles, squircles, and other shapes. Fill the whole canvas with a background color and keep the logo inside the safe zone, the centered circle covering 80% of the width. Anything outside that circle can be cut off.
You can still ship a transparent manifest icon with purpose: "any" alongside the masked one. MDN covers both values in the manifest icons reference, and the maskable icon generator shows the safe area while you position the artwork.
Check contrast on both themes
Transparency moves the contrast problem to the browser. A near-black mark vanishes on a dark tab strip, and a pale mark vanishes on a light one. Pick colors that hold up against both, or put a small rounded shape behind the logo so it carries its own contrast.
Some browsers apply prefers-color-scheme rules inside an SVG favicon, though support varies, so treat a theme-aware SVG as an upgrade rather than the fix. Preview the icon on light and dark tabs with the favicon preview, then confirm what a live site serves with the favicon checker.
Ready to make your favicon?
Generate the common files and a ready-to-paste HTML snippet.