What a favicon is and where it shows up

A favicon is the tiny picture beside your page title in a browser tab. The name is short for "favorite icon"¹. You'll also hear it called a tab icon, site icon or bookmark icon.

It's a small file, usually a square image, that belongs to your website. Visitors never open it on purpose. They just see it, and it helps them tell one tab from another when they have a dozen open.

What you need to know first

• A favicon is a file, not a setting. You make an image and tell the browser where it is.
• Browsers fetch it on their own once your page points to it.
• One file can serve many places, but some places want their own versions.
• Not every place will show it. Some depend on the visitor's browser or phone.

Where it shows up

Browsers that support favicons usually show the icon in the address bar. Some also show it in history, and in the bookmarks list next to the page's name¹.

Here are the main places you'll see one:

• Browser tabs. Browsers with tabs typically show the icon next to the page title on the tab¹.
• Bookmarks and favourites. The icon sits beside the saved page's name¹.
• Desktop shortcuts. Site-specific browsers use the favicon as a desktop icon¹.
• Google search results. If your site has a favicon, it can be included in Google Search results for your site². The word is "can". What Google asks for is laid out here.
• Phone home screens. On an iPhone or iPad, you can name an icon that stands in for your site when someone adds it to the Home screen³. That one is a separate file, covered on the phone icon page.

Where the idea came from

Microsoft released Internet Explorer 5 in March 1999, which supported favicons for the first time¹. Back then the icon was a file called favicon.ico placed in the root folder of a website¹. The root folder is the top level of your site, the same place your home page lives.

That old habit explains a lot of today's confusion. Some tools still look for a file with that exact name in that exact spot. Others read a line of code in your page instead. The step-by-step shows both.

How the browser finds yours

Your page carries a small line of HTML, called a link tag, that names the image file. The HTML link element is the same one used for stylesheets, and it's also used to set up site icons⁴.

The diagram below shows the flow.

You don't need design skills to start. A plain coloured square with one letter or shape will do as a first icon. Keep it simple. It gets shown very small, so fine detail turns to mush.

What to read next

To make the file, start with the file types guide. Added one and nothing appears? Try the missing icon checklist.