Favicon generator

A logo, a letter or an emoji in, every icon size and the HTML out. Ctrl+C copies the snippet.

Source
Weight
Background presets
Shape

My site
Tab 16 px
Tab 32 px (HiDPI)
iPhone 180 px
Android maskable

Head snippet

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0d9488">

How to make a favicon

  1. Choose a source

    Drop a logo (PNG, SVG or JPG), or type a letter or two, or pick an emoji. Set the background colour or keep it transparent, choose square, rounded or circle, and add padding if the shape touches the edges.

  2. Check the previews

    The tab, iPhone and Android previews show the icon at real sizes. If the 16 px version turns to mush, simplify the shape or increase contrast.

  3. Download the package

    One zip holds favicon.ico, every PNG size, site.webmanifest and a README with the HTML. Copy the head snippet and put the files in the root of your site.

Good to know

  • The zip contains favicon.ico (16, 32 and 48 px inside), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, maskable-icon-512x512.png, site.webmanifest and a README with the HTML.
  • Put the files in the site root so /favicon.ico works without any HTML: browsers and many apps request that path directly.
  • Apple touch icons cannot be transparent; iOS fills the gaps with black. The generator uses white behind a transparent icon there and keeps transparency everywhere else.
  • Text icons fit the letters to the box automatically. One or two letters read best; four is the maximum and only works with a wide font.
  • Fonts other than Inter are loaded from Google Fonts when you pick them; the previews redraw once the font has arrived.
  • An SVG logo is passed through as favicon.svg. Give it a viewBox and it will stay sharp on every screen.

Questions people ask

Which favicon files do I actually need?

favicon.ico for old browsers and Windows shortcuts, a 32 px PNG for browser tabs, apple-touch-icon.png (180 px) for iPhone home screens, and 192 and 512 px PNGs in a web manifest for Android and installable web apps. This tool makes all of them, plus a maskable 512 px icon for Android's adaptive shapes.

Should I use an SVG favicon?

Yes, alongside the PNGs. Every current browser except Safari prefers the SVG, which stays sharp at any size and can adapt to dark mode. Drop an SVG file here and it is included as favicon.svg with the right link tag.

What size should the source image be?

At least 512×512 px, square, with the subject filling most of it. Icons are shrunk to 16 px in tabs, so simple shapes and one or two colours read best; thin lines and small text vanish.

What is a maskable icon?

Android shows app icons in a circle, squircle or rounded square chosen by the device. A maskable icon has a full-bleed background with the content inside the middle 80%, so nothing important gets cut off. The generator pads it for you.

Is my logo uploaded?

No. The icons are drawn on a canvas in your browser and zipped there too. Nothing is sent to a server.