Favicon Generator

How to make a favicon

A favicon is the tiny icon browsers show in tabs, bookmarks, and phone home screens. A crisp one makes your site look finished; the default globe icon says "unfinished". Making one takes under a minute:

1. Type a letter or pick an emoji — your initial, your brand's first letter, or an emoji that says what your site is about.
2. Choose a background color. Bold, flat colors read best at 32 pixels. The tool picks the glyph color for you, so contrast is always right.
3. Pick a shape. Square is the classic; rounded softens it; circle stands out. Rounded and circle exports keep transparent corners.
4. Check the true-size preview. The 32×32 canvas shows exactly what a browser tab shows — if it's readable there, it's readable everywhere.
5. Download both PNGs and install them with the two <link> tags in the install card above.

Why two sizes?

Browsers render favicons at 16 or 32 pixels, so the 32×32 file is your workhorse. The 180×180 file is the Apple touch icon — when an iPhone user saves your site to their home screen, iOS uses it instead of a tiny screenshot. Exporting both covers tabs and phones with one tool.

Design tips for tiny icons

One glyph beats two words at 32 pixels. High-contrast pairs (white on violet, dark ink on gold) survive small sizes; thin details and gradients do not. If you use an emoji, avoid ones with fine facial features — bold shapes like 🔥 and 🚀 read far better than 🥺.

What sizes do browsers and phones actually need?

Browsers show favicons at 32x32 pixels in tabs and the address bar; Apple devices use a 180x180 touch icon when someone saves your site to their home screen. This tool exports exactly those two PNGs, named favicon-32x32.png and favicon-180x180.png.

Do rounded and circle shapes really have transparent corners?

Yes. The tile is painted inside a clipped shape, so the square and circle exports keep transparent corners — your page background shows through. Choose the square tile if you want a fully opaque icon.

How do I install the favicons on my website?

Put both files in your site's root folder, then paste the two <link> lines from the install card above inside the <head> of your pages — one with rel="icon" for browsers, one with rel="apple-touch-icon" for Apple devices.

Will an emoji favicon render on every device?

The emoji is drawn with the visitor's own device emoji font, so it looks native everywhere — but styles differ slightly between Apple, Android, and Windows. Check the true-size 32px preview: if it reads clearly there, it will read clearly in a tab.

Do I need to pick a text color myself?

No. The tool measures your background color's brightness and picks white or dark ink automatically, so the letter or emoji always stays readable. You only choose the background.

Is my design uploaded anywhere?

No. The tile is rendered with the canvas API in your browser and the PNG is generated locally. Nothing is uploaded, stored, or tracked.