---
title: How to Make a Favicon (Logo, Image or Emoji)
description: How to make a favicon from a logo, photo, image URL, or emoji. Design tips for legibility at 16x16 plus a free one-click generator.
canonical: https://favicontools.com/blog/how-to-make-a-favicon
---

# 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

1. **Choose a source** — Start from a logo or image file, an emoji or named icon, or an image URL.
2. **Design for small sizes** — Keep the mark simple and high-contrast so it stays legible at 16x16 pixels.
3. **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.