A favicon is the small icon that appears in a browser tab next to your site's title, in bookmark lists, in browser history, and on a phone's home screen when someone saves your site. It is usually only 16 or 32 pixels wide in a tab, yet it is one of the most-seen pieces of your brand. A site without a favicon shows a generic blank icon, which looks unfinished and makes your tab harder to spot when a visitor has many tabs open.

The good news is that you do not need design software or a budget to make one. Free favicon generators in the browser can turn a logo, a letter, or even an emoji into a complete icon set in under five minutes, and the installation is just a few files and a few lines of HTML.

The hardest part of favicon design is the size. Detail that looks great in a full logo turns to mush at 16 pixels, so simplicity wins. A single bold letter, a simple geometric mark, or a simplified version of your logo works best. Start from a square image of at least 512 by 512 pixels so the generator has clean detail to work from, and use strong contrast — white on a saturated color, or dark on light — so the mark stays readable on both light and dark browser themes.

Avoid text longer than two or three characters, and avoid thin lines and fine detail. Before you commit, preview the icon at 16, 32, and 48 pixels. If you cannot tell what it is at the smallest size, simplify it further. A favicon that is just a colored square with one clear letter will outperform a shrunken full logo every time.

Modern sites need more than one file. Browsers use a favicon.ico file containing 16, 32, and 48-pixel versions, Apple devices use a 180-pixel apple-touch-icon, and Android and progressive web apps use 192 and 512-pixel PNG icons plus a web app manifest file. Generating all of these by hand is tedious, which is exactly what free generators are for.

Upload your square image or type a letter or emoji into a generator, adjust padding and corner rounding, and download the resulting ZIP file. The package includes every size plus the HTML snippet to paste into your pages. The whole process runs in your browser on many of these tools, so your logo is never uploaded to a server, and there is no account or payment involved.

Unzip the package and upload the files to your website's root folder, the same folder as your homepage, so they load from addresses like yoursite.com/favicon.ico. Then paste the provided link tags into the head section of every page. A minimal setup looks like a link tag for the ICO file, one for the Apple touch icon, and, if you have an SVG version, one declaring it as an image of type SVG.

If you use a progressive web app manifest, add the icon entries there as well so the install prompt and home screen icon use the right artwork. After publishing, hard-refresh your browser or clear its cache, because browsers cache favicons aggressively and an old icon can linger for days. Test in a private window and on a phone to confirm the tab icon, bookmark icon, and home screen icon all look right.

Three mistakes show up again and again. The first is uploading only a single 16-pixel file and wondering why the icon looks blurry on phones. The second is forgetting the manifest, so an installed web app shows a generic Android icon instead of your brand. The third is designing for the desktop tab only and ignoring dark mode, where a dark icon on a dark tab bar becomes invisible.

A quick final checklist avoids all three: generate the full set, include the manifest entries, test at every size in both light and dark themes, and keep the source artwork so you can regenerate the set when your brand changes. Done once and done properly, a favicon is a five-minute job that makes every page of your site look more professional.