What size should a favicon be?

Start from a square image at least 512 by 512 pixels. A favicon file usually bundles several sizes (16, 32, and 48 pixels) so browsers can pick the right one for tabs and bookmarks.

Do I need an .ico file for a favicon?

An .ico file is the most widely supported favicon format and works in every browser. Many modern sites also add a PNG and an SVG, but an .ico covers the baseline everywhere.

How do I add a favicon to my website?

Put the favicon file in your site's root directory and link to it in your HTML with a link tag: . Most browsers also auto-detect favicon.ico in the root without the tag.

Why does my favicon not show up?

Hard-refresh the page (Ctrl+Shift+R or Cmd+Shift+R) to clear the cache — browsers cache favicons aggressively. Also check that the file is in the root directory and the link tag in your points to the correct path.

Free Favicon Generator: Make a Favicon From Any Image Locally

The favicon is the small icon that sits in the browser tab next to your page title. It is a tiny detail that makes a site feel finished, and a missing one leaves a generic placeholder that quietly reads as unpolished.

What a favicon needs to be

A favicon has to stay legible at very small sizes, so it should be a simple, square, high-contrast version of your mark. Fine detail disappears at 16 pixels. Browsers also expect a few sizes: 16 pixels for the tab, 32 for higher-resolution displays, and larger sizes for bookmarks and home-screen icons. The classic .ico format can hold several of these in one file.

Why a generator site is overkill

Favicon generator websites ask you to upload your logo, then hand back a zip. For a public logo that is no real privacy issue, but it is still an upload and a round trip for something your browser can do instantly on your machine.

How to make one locally

File Forge generates a favicon from any image in the browser. Drop in a square logo or graphic, and it produces an .ico at the standard sizes, ready to drop into your site. Nothing uploads, and you can iterate quickly if the first crop does not read well at small sizes.

Getting it to look right

Start from a clean, square source at 512 pixels or larger so the downscaled versions stay sharp. If your full logo has text or fine detail, make a simplified mark just for the favicon, often a single letter or symbol, so it stays recognizable in a crowded row of tabs.

How to add a favicon to your website

Once you have the .ico file, drop it in your site’s root directory and add this to your HTML <head>:

<link rel="icon" href="/favicon.ico">

Most browsers will also auto-detect favicon.ico in the root without the tag, but the explicit link is good practice. For better coverage across Apple home-screen icons and higher-resolution displays, you can add additional sizes:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

If your favicon is not showing up after you add it, do a hard-refresh (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac). Browsers cache favicons aggressively and a regular reload will not pick up the change.

The takeaway

A favicon is a small touch that makes a site look complete, and you can make one in seconds without uploading your logo anywhere. File Forge generates a favicon from any image locally in your browser. If you need to convert or resize the source image first, see how to convert PNG and JPG to WebP or how to compress an image to a specific file size.