How to Make a Favicon (Logo, Image or Emoji)

From a logo, photo, image URL, or emoji — and how to keep it readable at 16x16.

What makes a good favicon: A favicon is tiny — often just 16 pixels wide. The best ones use a single bold shape or letter, high contrast, and almost no fine detail. If your full logo has a wordmark, use just the symbol or initial for the favicon.

The shape of the job

Choose a source — Start from a logo or image file, an emoji or named icon, or an image URL.

Design for small sizes — Keep the mark simple and high-contrast so it stays legible at 16x16 pixels.

Export every size and format — Generate the .ico, the PNG sizes, the apple-touch-icon, and the manifest icons in one pass.

Method A — From a logo or image

Upload a logo, an icon, or even a screenshot. The generator crops, scales, and exports every size plus the .ico and manifest. PNG or SVG source art with a transparent background gives the cleanest result.

Method B — From an emoji or named icon

No logo yet? Pick an emoji or a named icon and the generator renders it onto a square or circular background of your choice. It's the fastest way to ship a recognizable favicon for a side project, prototype, or internal tool.

Method C — From an image URL

Paste a URL and pull artwork straight from an existing site or asset. Handy when you're rebuilding a brand you already have live somewhere else.

Design for small sizes

Start from 512x512 art and scale down — never up.

Drop fine detail and thin strokes; they vanish at 16px.

Test on light and dark tabs. If you need a different mark for each, theme-aware favicons cover it.

Review every dimension in the favicon sizes guide before you export.

16x16, at real size

16x16

32x32

48x48

180x180

Rendered at true pixel dimensions rather than blown up for the page. Whatever you design has to survive the swatch on the left.

Pick the right format

Format | What it's for
ICO | Legacy default, still requested at /favicon.ico. Bundles multiple sizes in one file.
PNG | The workhorse for modern browsers, apple-touch-icon, and Android. One file per size.
SVG | Scales crisply and supports theme switching, with PNG fallbacks for older browsers.

Note: Dig deeper: the ICO vs PNG and SVG favicon glossary entries go through the trade-offs in full.

Designing campaign or seasonal icons

Want a holiday variant or a product-launch mark? Use the creative canvas to mock and tweak favicons with text, emoji, and icons before handoff.

Next step: Got your favicon? Next, add it to your website with the right link tags.

Frequently asked questions

What size should a favicon be?

Design at a high resolution (512x512) and export down to 16x16, 32x32, 48x48, 180x180, and 192x192 so every browser and device gets a crisp icon.

Can I make a favicon from an emoji?

Yes. Pick an emoji or named icon and the generator renders it onto a transparent or colored background and exports every favicon size automatically.

What format should a favicon be?

Ship a multi-resolution .ico for legacy support, PNGs for modern browsers and devices, and optionally an SVG for crisp scaling. A good generator produces all of these.