Generate a Favicon: A Beginner’s Step-by-Step Guide

You can generate a favicon by turning a simple square image into a small icon file, saving it in your site’s root folder, and linking it in your HTML. That tiny image is what shows up in the browser tab, in bookmarks, and on mobile home screens — and adding one is the quickest way to make a brand-new site feel finished instead of half-built.

The good news: you don’t need design software or a paid service. This walkthrough covers everything from picking an image to checking that the icon actually appears.

What a Favicon Actually Is

A favicon (short for “favorite icon”) is a small image browsers use to identify your site. You’ll see it in the tab next to your page title, in your bookmarks list, in browser history, and sometimes in search results. On phones, it can also appear when someone adds your site to their home screen.

Browsers look for it automatically. If they don’t find one, they show a generic globe or blank page icon — which is exactly the “unfinished” look you’re trying to avoid.

The file formats you’ll see

• .ico — the classic favicon format. Older browsers rely on it, and many sites keep a favicon.ico in the site root.
• .png — modern and widely supported. Great for crisp, colorful icons.
• .svg — a vector format that stays sharp at any size. Support is good in modern browsers but not universal.
• apple-touch-icon.png — used when someone saves your site to an iPhone or iPad home screen.

You don’t need all of these on day one. A single well-made icon plus a couple of common sizes covers most situations.

Before You Start: Pick a Simple Image

Favicons are tiny — often shown at 16×16 or 32×32 pixels. Detail disappears fast at that size, so keep your source image simple.

• Use a square image. Non-square images get cropped or squashed.
• Start big. A source image of at least 512×512 pixels gives the generator room to shrink it cleanly.
• Keep it bold. One letter, a simple shape, or a high-contrast logo mark works better than a busy illustration.
• Check contrast. Light icons vanish on light browser tabs; dark icons vanish on dark themes.

If you don’t have a logo yet, a single letter from your site name on a solid background is a perfectly respectable first favicon. You can always replace it later.

Step-by-Step: Generate a Favicon

Here’s the full process, from image to working icon.

1. Open the favicon generator. Head to FaviconForge in your browser. It runs entirely in your browser, so there’s no sign-up and no uploading your image to a server.
2. Choose your source image. Select the square image you prepared. If you’re starting from scratch, many generators let you type a letter or pick a background color instead.
3. Preview the icon at small sizes. Look at how it reads at 16×16 and 32×32 pixels. If it turns into a blurry blob, simplify the design — fewer colors, thicker shapes, bigger letter.
4. Generate the favicon files. The tool produces the icon files and the HTML snippet you’ll need. Download the package to your computer.
5. Unzip the files. You’ll typically get a .ico file, one or more .png files, and possibly a site.webmanifest file. Keep them together for now.

That’s the hard part done. The rest is placing the files and adding a few lines of code.

Add the Favicon to Your Website

Favicons need to live where your site can serve them. The simplest approach is to put the files in your site’s root folder — the same place as your index.html.

Upload the files

Using your host’s file manager or FTP, upload the icon files to the root directory of your site. If your generator gave you a site.webmanifest file, upload that too.

Link the favicon in your HTML

Open your HTML file and add the link tags inside the <head> section, after the <title> tag. A typical set looks like this:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

If your generator named the files differently, use those names instead. The href paths should match where you uploaded each file.

If you use a website builder

Platforms like WordPress, Squarespace, and Wix usually have a favicon setting in their site settings or theme options. Upload your icon there and skip the HTML step — the builder inserts the tags for you.

Test That Your Favicon Shows Up

Browsers cache favicons aggressively, so a missing icon often just means you’re looking at an old version. Work through these checks:

• Hard refresh. Reload the page with a hard refresh (Ctrl+F5 on Windows, Cmd+Shift+R on Mac) to bypass the cache.
• Try a private window. A fresh private or incognito window has no cached favicon.
• Check the file path. Open the icon’s address directly in a new tab. If it doesn’t load, the path in your HTML is wrong.
• Clear the cache if needed. If everything else checks out, clearing your browser cache usually resolves a stubborn old icon.

Give it a few minutes after uploading, too — some hosts take a short while to serve new files.

Common Favicon Mistakes to Avoid

• Using a detailed logo. If your full logo has text or fine lines, it will be unreadable at tab size. Use a simplified mark instead.
• Forgetting mobile. Without an apple-touch-icon, your site may show a screenshot or blank square when saved to a home screen.
• Wrong file location. A favicon in a subfolder won’t be found unless your HTML points to that exact path.
• Ignoring dark mode. Test your icon against both light and dark browser themes so it stays visible.
• Never updating it. When you rebrand, regenerate the icon and update the files — browsers will eventually pick up the new one.

Frequently Asked Questions

Do I really need a favicon?

Technically no, but without one your site looks unfinished in every tab, bookmark, and history entry. It’s one of the smallest changes with the most visible payoff.

What size should my favicon be?

Provide at least a 32×32 PNG and a 16×16 PNG, plus a favicon.ico for older browsers. Start from a 512×512 source image so the generator can produce clean sizes.

Can I use a JPG?

You can start from a JPG, but favicons are usually saved as PNG or ICO. PNG supports transparency, which is handy if your icon isn’t a full square.

Why is my favicon still not showing?

Nine times out of ten it’s caching or a wrong file path. Hard refresh, test in a private window, and open the icon URL directly to confirm the file is reachable.

Ready to finish off that browser tab? Generate a favicon with FaviconForge — it’s free, runs in your browser, and needs no account.