Modern Favicon

Transparent Favicon Generator

Create favicons with real alpha transparency — a 32-bit favicon.ico, transparent PNGs and an SVG — and preview them on light and dark browser tabs before you download. Transparent background is preselected; nothing is uploaded.

1 · Design your icon

Uploaded image preview

Drop an image here, click to browse, or paste

PNG, JPG, SVG, WebP or GIF · square works best

8%
18%
App name & PWA options (optional)

These fill in the site.webmanifest, which Android and other platforms read when someone installs your site to their home screen. Safe to skip for a normal website — you can edit the file later.

Your site or product's full name — shown on the install prompt and splash screen.

Shown under the home-screen icon — aim for 12 characters or fewer.

Tints the browser and app chrome around your site — usually your brand colour.

2 · Preview & download

Upload an image or type some text to see live previews of your favicon in a browser tab, Google search results, and on iOS & Android home screens.

3 · Install on your site
  1. Download the bundle above and unzip it.
  2. Copy every file into your website's root folder — the same folder as your homepage (public/ in most frameworks) — so they load from /favicon.ico.
  3. Paste these tags into the <head> of every page:

Using an AI coding assistant? and paste it into Claude Code, Cursor or Copilot after unzipping into your project — it places the files and adds the tags for you. The same steps ship in the ZIP as AI-INSTRUCTIONS.txt.

View the complete installation guide →

Transparent favicons, done properly

Transparency in favicons has two failure modes, and this generator handles both:

  • Cheap converters flatten the alpha channel onto white or black. This tool writes 32-bit ICO entries with a genuine 8-bit alpha channel, and the PNGs and SVG keep transparency untouched.
  • Transparent icons can vanish on dark tabs. The preview panel shows your favicon on both a light and a dark browser tab at true 16 px size — if your mark disappears on the dark tab, you'll see it before your visitors do.

The iOS exception

The one place transparency doesn't work is the iOS home screen: iOS composites transparent pixels onto black. The generator therefore fills the apple-touch-icon.png with an opaque background automatically (white, or your chosen colour) while every other file in the bundle stays transparent — the correct behaviour recommended by the Apple Touch Icon guide.

FAQ

Can a favicon have a transparent background?

Yes. ICO, PNG and SVG all support full alpha transparency. This generator writes 32-bit ICO images with a real alpha channel and preserves transparency in the PNG and SVG outputs. The transparent option is preselected on this page.

Why does my transparent favicon disappear on dark browser tabs?

A dark logo with a transparent background becomes invisible on dark tab themes. Check the dark-tab preview above; if your mark vanishes, either add a subtle background colour, use a light-coloured mark, or rely on an SVG favicon with a dark-mode media query (see the text favicon generator).

Do transparent favicons work everywhere?

In browser tabs, bookmarks and search results, yes. The one exception is the iOS home-screen icon: iOS renders transparency as black, so this generator automatically gives the apple-touch-icon an opaque background while keeping every other file transparent.

How do I convert a PNG with transparency to ICO?

Upload the transparent PNG above, make sure the Transparent background option is ticked (it is by default on this page), and click Download. The resulting favicon.ico keeps the alpha channel at 16×16, 32×32 and 48×48.

More tools: favicon generator · PNG to ICO · emoji favicon · text favicon · Apple Touch Icon