Favicon: Create Your Website Icon in 5 Minutes

What is a favicon?

The favicon (short for "favorite icon") is the small icon shown in your browser tab, in your bookmarks, and on the mobile home screen when a user adds your site. It is a detail that makes all the difference in terms of professionalism: a site without a favicon looks unfinished.

The formats and sizes to know

Use case	Size	Format
Browser tab	16×16px, 32×32px	ICO or PNG
Windows favorites	16×16px	ICO
Android shortcut	192×192px	PNG
iOS app (Apple Touch)	180×180px	PNG
PWA (Progressive Web App)	512×512px	PNG

In practice, most favicon generators automatically create all of these sizes from a single high-resolution source image.

Create your favicon in 3 steps

Step 1 — Prepare your source image

Ideally, use your logomark (the icon part of your logo, without the text) as a PNG with a transparent background, at 512×512px minimum. BrandMotion Lab automatically delivers an ICO file with every order — it already includes the 16, 32 and 64px sizes.

Step 2 — Generate the favicon pack

If you want to generate a complete pack (ICO + PNG in every size + manifest.json):

favicon.io: the simplest, free, generates everything in one click
realfavicongenerator.net: the most complete, with previews on every device

Step 3 — Add it to your site

In the <head> of your HTML:

<link rel="icon" type="image/ico" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

On Next.js (App Router): place your favicon.ico directly in the /app folder. Next.js detects it automatically.

On WordPress: Appearance → Customize → Site Identity → Site Icon.

Design: what makes a good favicon?

A favicon has to be recognizable at 16×16px. A few rules:

Use a single letter, an initial, or a simple pictogram — never the full logo with text
High contrast between the icon and the background (light or transparent)
Avoid fine detail: it disappears at small sizes
Test by simulating the browser tab (dark title bar)

BrandMotion Lab and the favicon

BrandMotion Lab automatically generates an ICO file with every logo delivered. It is the version of the logomark optimized for small sizes. You can use it directly as your site's favicon, or import it into favicon.io to generate the complete pack.