Skip to content

How to create a favicon for your website

The favicon is the tiny icon in the browser tab — the visual bookmark people scan when ten tabs are open. Making one is straightforward: simplify your mark so it reads at postage-stamp size, export the standard sizes (often bundled in a single `.ico`), wire up the HTML tags, and add a larger PNG if you care about iOS home-screen shortcuts. Follow the steps below, then use the favicon generator to pack sizes without hand-editing binary files.

1. Design for 16×16, not for the billboard

At tab-bar size, hairline strokes, small type, and busy gradients turn to mush. A bold silhouette with one or two colors survives scaling far better than a mini version of your full wordmark.

Start square. Wide logos need cropping into a centered square first — otherwise the generator shrinks the whole canvas and your mark becomes a speck.

Keep a vector SVG or at least a 256×256 PNG master (512×512 is better). You are downsampling from this source, not upsampling from a blurry thumbnail.

2. Export a multi-size ICO (or a PNG set)

The classic `favicon.ico` bundles 16×16, 32×32, and 48×48 layers in one file so desktop tabs and bookmarks pick the closest match.

Upload PNG, SVG, or JPG to the favicon generator, choose a size bundle, and download — no manual hex editing required.

Many teams also ship standalone PNGs at 32×32 and 180×180. Progressive web apps need explicit icon entries in the web app manifest as well.

3. Place files and add HTML

Drop `favicon.ico` in the site root, or follow your framework convention — Next.js, Astro, and others expect it under `public/`.

Minimum tag: `<link rel="icon" href="/favicon.ico" sizes="any">`. If you also have PNG variants, add something like `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`.

For iOS "Add to Home Screen", include a 180×180 PNG: `<link rel="apple-touch-icon" href="/apple-touch-icon.png">`.

4. Verify after deploy

Hard-refresh or open an incognito window — favicons are aggressively cached, so a normal reload may still show yesterday's icon.

On a phone, add the site to the home screen and check whether the apple-touch-icon looks crisp with no unexpected padding.

Rebrand? Replace ICO, PNG, and manifest icons together. Mixing old and new assets is how users end up with two different marks for the same site.

Pitfalls that waste an afternoon

Renaming a 512 px PNG to `favicon.ico` without embedding smaller sizes — some environments upscale badly and the tab icon looks soft.

SVG-only favicons are gaining support but still fail silently in a few corporate intranet builds; ICO plus PNG remains the reliable default.

Fully transparent icons can look broken on Windows tabs with light backgrounds — a solid brand-color square behind the mark often reads cleaner.

Generate your ICO now

Upload a square logo, download a multi-size favicon from the [[favicon-generator|favicon generator]], then paste the HTML tags from section 3.

Open favicon generator

Favicon questions

Is a single ICO file enough?
For browser tabs on desktop and mobile, usually yes. If you ship a PWA or care about iOS home-screen tiles, add PNG sizes and manifest entries too.
Can I use SVG as my only favicon?
Increasingly, yes on modern browsers — but ICO and PNG together still cover the edge cases. SVG works well as a supplement, not always as the sole asset.
I updated the file but the tab still shows the old icon
Cache. Try incognito, rename the file, or append a version query to the href until the new asset sticks.
Is the favicon the same as my header logo?
Often they share brand colors, but the favicon should be a simplified mark. The header logo can carry taglines and fine detail the tab icon cannot.
What sizes do I actually need?
16, 32, and 48 inside the ICO cover most tabs; 180×180 for apple-touch-icon; add 192 and 512 if your PWA manifest requires them.

Tools