Look at the top of your browser right now. Next to each tab title is a tiny icon — that's a favicon. It's small, but it does a surprisingly big job: it makes your website look established, helps people find your tab among twenty others, and shows up in bookmarks and search results. A site without one looks unfinished.
The good news is that making a favicon takes about two minutes and costs nothing. Here's how.
What is a favicon (and why it matters)
A favicon ("favorite icon") is the little square image that represents your website in browser tabs, bookmarks, history, and sometimes search results. It's usually a simplified version of your logo, or a single bold letter.
Why bother? Because it's a small detail that signals professionalism. When someone has your site open alongside a dozen tabs, a clear favicon is how they spot you instantly. A missing favicon — shown as a blank page icon — quietly says "unfinished," which is exactly the impression you don't want to give.
What you need
Just one thing: a square image to base it on. That could be your logo, an icon, or even a single letter on a colored background. A few pointers:
- Start with a square image so nothing gets awkwardly cropped. If yours isn't square, the Crop Image tool fixes that in seconds.
- Keep it simple — a favicon is tiny, so fine detail just disappears.
- PNG works best as a source because it supports transparency. If yours is a different format, you can convert between formats as needed.
How to make a favicon (free)
You don't need design software. A favicon generator does the resizing and formatting for you:
- Open the Favicon Generator.
- Upload your square image.
- Download the favicon files it produces, ready to drop into your site.
Favicon sizes that matter in 2026
Different places use different sizes. A good generator outputs them all, but here's what each is for:
- 16×16 and 32×32 — the classic browser-tab sizes.
- 48×48 — used by some browsers and Windows.
- 180×180 — the Apple "touch icon" for when someone saves your site to their iPhone home screen.
- 192×192 and 512×512 — for Android and progressive web apps.
You don't have to create these by hand — the generator builds the whole set from your one image.
How to add it to your website
Once you have the files, adding them is just a couple of lines in the head of your pages:
- Upload the favicon files to your site (usually the root folder).
- Add a link tag in your HTML head — for example
<link rel="icon" href="/favicon.ico">— plus the Apple touch-icon line for iPhones. - Reload your site. If you don't see it right away, do a hard refresh, since browsers cache favicons aggressively.
Most website builders (and the favicon generator's output) hand you the exact snippet to paste, so you don't have to remember it.
Design tips for a clear favicon
- One idea only — a symbol, a letter, or a simple shape. Not your whole logo with text.
- Strong contrast — it needs to stand out against both light and dark browser themes.
- Bold, not thin — thin lines vanish at 16×16, so go chunky.
- Test it small — zoom out and check it still reads at tab size before you commit.
Get those right and your site gains a small but real touch of polish — the kind visitors notice without knowing why.
Frequently asked questions
Provide several sizes. 16x16 and 32x32 cover browser tabs, 180x180 is the Apple touch icon, and 192x192 / 512x512 are for Android and progressive web apps. A favicon generator produces all of them from a single image.
PNG is the easy modern choice and works in every current browser. The classic .ico format bundles multiple sizes into one file for maximum compatibility. A good generator outputs both, so you're covered either way.
Almost always browser caching. Do a hard refresh (Ctrl/Cmd+Shift+R), double-check the file path in your link tag is correct, and confirm the file actually uploaded. It can take a little while to appear everywhere.
Yes. Start with any square image - even a single bold letter on a colored background - and run it through a favicon generator. It handles all the resizing and formatting for you.