How to add a favicon to a website with link tags

You add a favicon with one or two link tags inside the head of your page, plus the image file uploaded to your site. The head is the hidden top part of an HTML page, where titles and settings live.

What you need first

• An icon file. Our note on which formats to export helps you choose.
• A way to upload files to your site, such as your host's file manager or an FTP tool.
• Access to your page template. On many website builders this is a "site icon" box instead. In that case, upload your image there and skip the code.
• Your site's address, so you can check the result.

Step 1: put the file on your site

Upload the file to the root folder, which is the top level where your home page sits. That's the traditional spot, as the first favicons lived in a site's root directory under the name favicon.ico¹.

Many people keep the file name favicon.ico or favicon.svg and leave it there. The name isn't magic once you add a link tag. The tag tells the browser the name.

Step 2: add the link tag

The standard method is a link element with a rel attribute in the head section, naming the file's format, name and location¹. Google's page gives this form²:

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

Swap the path for where your file really is. Google says to add the tag to the header of your home page². Most sites put it in a shared template so every page has it.

The parts mean this:

• rel="icon" says the linked file is an icon.
• href is the file's address. Google says it can be a relative path or a full address². A relative path starts at your site's root, like /favicon.ico.
• type (optional) names the file format, such as image/svg+xml.
• sizes (optional) lists pixel sizes. MDN says sizes and type give the browser hints to choose the most appropriate icon³.

Step 3: list more than one if you have more than one

You can include links to several icons on the same page. The browser picks the one that works best for its context, using the rel and sizes values as hints³. A typical pair is one SVG and one ICO:

<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Check the result in the browsers your visitors use.

If a linked favicon is named, modern browsers choose it instead of the one in the site root¹. So the link tag wins over a loose favicon.ico.

Step 4: check it

Open your home page in a private window and look at the tab. Tab still blank? Go to the troubleshooting list. Still seeing an older icon after a change? Read about stored copies.

Phone icons are separate

The lines above set the icon for tabs and bookmarks. Phones use their own tag for home screens. The phone icons note explains them.