How to add a favicon in HTML, step by step

Here is how to add a favicon in HTML: put the icon files in your site's root folder and add a <link rel="icon"> tag inside the <head> of every page. The free AyeTab Favicon Generator creates the files and the tags for you from one image, so the whole job takes a few minutes.

Step 1: Make the icon files

You need more than one file, because browsers, phones and app installs each look for a different size. The quickest way is a generator. Open the AyeTab Favicon Generator, then drop or paste a square logo, ideally 512 px or larger.

The page previews the icon at every size. Under Options you can add padding, round the corners or put a colour behind a transparent logo. When it looks right, use the buttons:

• Download favicon.ico for the classic icon file, which holds 16, 32 and 48 px versions
• Download PNGs for the separate size files, such as favicon-96x96.png and favicon-180x180.png
• Download manifest for site.webmanifest
• Copy HTML for the tags you will paste in step 3

Nothing is uploaded; the files are drawn in your browser.

Step 2: Put the files in the site root

Copy the files to the top folder of your website, the one that holds your home page. Then each file is reachable at an address such as https://example.com/favicon.ico. Keeping them in the root matters, because some browsers ask for /favicon.ico on their own even when no tag points to it.

On a framework, the root is usually the folder for static files, often called public.

Step 3: Add the link tags

Paste these lines inside the <head> of your HTML. They are the tags the AyeTab Copy HTML button gives you:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/favicon-180x180.png">
<link rel="manifest" href="/site.webmanifest">

What each line does:

When there are several icon tags, the browser uses their type and sizes to pick the best one, according to MDN. iOS reads only the apple-touch-icon tag for its home screen.

Step 4: Check that it works

Open your site in a new tab and look at the tab. Browsers cache favicons hard, so if you see an old icon, do a hard reload or try a private window. Open /favicon.ico directly to confirm the file is there.

For Google results, the icon must be linked from your home page, and both the page and the image must be open to Googlebot. Google says the icon should be square and recommends going larger than 48 x 48 px. It can take days or weeks before the new icon appears in results, and Google does not promise to show one.

Common mistakes

• Wrong path. A tag pointing to favicon.ico without the leading slash breaks on pages in subfolders.
• Only one tiny file. A lone 16 px icon looks blurry on phones and high-density screens.
• Blocking the file. A robots.txt rule that blocks images can keep the icon out of search results.
• Changing the address often. Google asks for a stable favicon URL. If you update the icon, replace the file in place rather than renaming it each time.
• One icon for a subfolder. Google shows one favicon per hostname, so example.com/blog cannot have its own icon in results, while a subdomain such as blog.example.com can.

If you prefer a tool that also tests your live site, RealFaviconGenerator and favicon.io both have favicon checkers. For making the files and tags, AyeTab is quicker, and its Chrome extension puts the same tool on your new tab.