How to Make a Favicon for Your Website (The Complete Guide)

What is a favicon, and why does it matter?

A favicon is the tiny icon a browser shows next to your website's name — in the tab, in bookmarks, in the browser history, and on a phone's home screen. It is usually 16 or 32 pixels across, which is smaller than a thumbnail, yet it is one of the most-seen parts of a website. Every open tab shows it, every bookmark shows it, and a visitor who has twenty tabs open finds your page by its icon before they read its title.

A website without a favicon looks unfinished. Browsers show a generic blank page icon instead, and in a row of tabs your site is the one with no identity. A favicon does not bring visitors on its own, but it makes your site recognisable to the visitors you already have. It is also a trust signal: a site with a proper icon looks cared for, and a site without one looks abandoned, even if the content is good.

The word favicon comes from 'favourite icon' — it was invented for browser bookmarks. Today it does much more than that: the same icon appears as an app icon when someone saves your site to their phone's home screen, as the icon in search results on some platforms, and as the image in a shared link preview. One small file, made once, shows up in all of those places.

Which sizes do you actually need?

Browsers ask for a favicon in several sizes, and the honest answer is that you need a small set, not dozens. The classic file is favicon.ico, which traditionally holds 16 and 32 pixel versions — the sizes tabs and bookmarks use. That file alone covers the desktop browser case, and it is the one file browsers look for automatically, even without any link tags.

Modern browsers also want PNG favicons. A 32 pixel PNG is the sharpest choice for a tab on a high-resolution screen, and a 48 pixel PNG covers older bookmark views. Phones want more: Apple devices use a 180 pixel touch icon for the home screen, Android uses 192 pixels, and a progressive web app manifest uses 512 pixels. Those three are the phone sizes that matter; anything else is optional.

The practical set, then, is six files: 16, 32 and 48 pixel PNGs, plus 180, 192 and 512 pixel PNGs, and a favicon.ico holding the 16 and 32 pixel versions. That covers tabs, bookmarks, phones and web apps. You do not need a separate file for every device ever made — browsers scale the nearest size when they have to, and the sizes above are the ones they actually ask for.

Making a favicon from a logo or a photo

The best source for a favicon is a simple, square image: a logo, a single letter, or a simple symbol. Detail is the enemy at 16 pixels — a photo of a person, a detailed logo, or a line of text all turn into a blurry smudge when they are shrunk that far. If your logo is detailed, use only its simplest part for the favicon: the initial, the mark, or one recognisable shape. A single bold letter on a solid background makes a better favicon than a full logo.

Start from a square image if you can. A wide photo gets centre-cropped to a square when a favicon is made, so the sides are cut off — if the important part of your image is at the edge, it will be lost. Crop the image to a square yourself first, with the subject in the middle, and leave a little margin around it. A favicon that touches the edge of its square looks cramped; a small margin makes it look deliberate.

Colour matters more than detail at small sizes. A favicon needs strong contrast: a dark mark on a light background, or a light mark on a dark background. A pale grey mark on white disappears in a tab, and a busy photograph disappears too. Test the result at 16 pixels — that is the size people actually see — and if you cannot tell what it is at that size, simplify it until you can.

How to install a favicon on your website

Installing a favicon takes two steps. First, upload the files to your website: favicon.ico goes in the root folder of the site (the same folder as your home page), and the PNG files go there too, or in an images folder if you prefer. Browsers look for /favicon.ico automatically, so that file works even if you add nothing else — but the PNG sizes need link tags to be found.

Second, add link tags to the head of every page, or to your site template if you have one. The tags look like this: a link with rel="icon" and type="image/png", sizes="32x32", pointing at your 32 pixel file, and the same for 16, 48, 180, 192 and 512. Apple devices use rel="apple-touch-icon" for the 180 pixel file. There is nothing else to add — no script, no plugin, and no registration anywhere.

After installing, check it in a real browser: open your site, look at the tab, bookmark the page, and save it to a phone home screen if you can. If the old icon (or no icon) still shows, it is almost always the browser cache — browsers cache favicons aggressively, so try a hard refresh, or open the site in a private window, before assuming the install failed.

Mistakes that make a favicon useless

The most common mistake is using a detailed image. A company logo with a tagline, a photograph, or a complex illustration all become noise at 16 pixels. The fix is to simplify before you generate: use the simplest part of the logo, a single letter, or a bold shape. If the favicon is unreadable at 16 pixels, it is not a favicon — it is a smudge.

The second mistake is forgetting the ICO file. Some browsers and older systems still ask for /favicon.ico specifically, and if it is missing they show a broken-image icon or nothing at all. The ICO file is tiny and takes seconds to make, so there is no reason to skip it. Keep it in the root folder, where browsers look for it by default.

The third mistake is uploading only one size. A single 16 pixel file looks blurry on a phone home screen, and a single 512 pixel file is wasteful in a tab and may be ignored by older browsers. Make the full set of six sizes — it takes one upload with a generator — and add the link tags. And remember to check the result after installing, because a favicon you never looked at is a favicon you cannot trust.

Frequently asked questions

What is the best size for a favicon?

There is no single size: browsers use 16 and 32 pixels in tabs and bookmarks, phones use 180 and 192 pixels, and web apps use 512 pixels. Make the full set of six sizes — 16, 32, 48, 180, 192 and 512 — plus a favicon.ico file.

Do I still need a favicon.ico file?

Yes. Some browsers and older systems still look for /favicon.ico specifically. It is a tiny file that holds the 16 and 32 pixel versions, and it belongs in your website's root folder.

Can I use a photo as a favicon?

You can, but a photo usually makes a bad favicon: at 16 pixels it becomes a blurry smudge. A simple logo, a single letter, or a bold shape on a solid background works much better.

Why does my new favicon not show up?

Browsers cache favicons aggressively. Try a hard refresh, clear the cache, or open the site in a private window. If it still does not show, check that favicon.ico is in the root folder and that the link tags point at the right files.

Is my image uploaded anywhere when I make a favicon?

No, not with the Favicon Generator on this site. The files are made in your browser with a canvas — your image never leaves your device.