TF

Design & CSS

Favicon Generator

Make a favicon from text, emoji, or an image and download favicon.ico, PNG icons, apple-touch-icon, and a manifest.

180×180
48×48
32×32
16×16
My App

The ZIP contains favicon.ico (16, 32, 48 px), PNG icons up to 512 px, apple-touch-icon.png, site.webmanifest, and the HTML tags below.

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

What is this tool?

A favicon is the little icon in browser tabs, bookmarks, and home screens. Type initials or an emoji, or upload a logo, choose colors and a shape, and preview it at real sizes. Download a ready-to-use ZIP with every file modern browsers and phones expect, plus the HTML to add to your page.

The ZIP includes favicon.ico with 16, 32, and 48 px images, PNG icons, a 180 px apple-touch-icon for iPhone and iPad home screens, 192 and 512 px icons for Android and PWAs, and a site.webmanifest that references them.

Small sizes are rendered separately rather than just shrunk, so letters stay crisp. Everything is drawn on a canvas in your browser — uploaded images are never sent anywhere.

How to use the Favicon Generator

  1. Choose Text or emoji and type up to four characters, or choose Image and upload a logo.
  2. Pick a background color, shape (square, rounded, or circle), and content size — or make the background transparent.
  3. Check the previews at 16, 32, 48, and 180 pixels, including the browser-tab mock-up.
  4. Download the ZIP (or just favicon.ico) and paste the HTML tags into your page's <head>.

Examples

HTML tags

<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

Frequently asked questions

Which favicon sizes do I need?

A favicon.ico containing 16, 32, and 48 px images covers desktop browsers. Add a 180 px apple-touch-icon for iOS and 192 and 512 px PNGs in a web manifest for Android and installable web apps. The ZIP contains all of them.

Where do I put the files?

Upload them to the root of your site (the same folder as your homepage) and paste the HTML tags into the <head> of every page.

Can I use an emoji as a favicon?

Yes. Type an emoji into the text field. It is drawn with your device's emoji font, so it looks the same everywhere once saved as an image.

Why doesn't my new favicon show up?

Browsers cache favicons aggressively. Hard-refresh the page, open it in a private window, or clear the browser cache.

Want more power later?

Premium tools, higher limits, and API access are on the roadmap. V1 stays free and private in your browser.