How to Add a Browser Tab Icon (Favicon) For a Website

How to add a browser tab icon (favicon) for a website?

There are actually two ways to add a favicon to a website.

`<link rel="icon">`

Simply add the following code to the <head> element:

<link rel="icon" href="http://example.com/favicon.png">

PNG favicons are supported by most browsers, except IE <= 10. For backwards compatibility, you can use ICO favicons.

Note that you don't have to precede icon in rel attribute with shortcut anymore. From MDN Link types:

The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

`favicon.ico` in the root directory

From another SO answer (by @mercator):

All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you've specified a shortcut icon via <link>.

So all you have to do is to make the /favicon.ico request to your website return your favicon. This option unfortunately doesn't allow you to use a PNG icon.

See also favicon.png vs favicon.ico - why should I use PNG instead of ICO?

How do I put my website's logo to be the icon image in browser tabs?

That image is called 'favicon' and it's a small square shaped .ico file, which is the standard file type for favicons. You could use .png or .gif too, but you should follow the standard for better compatibility.

To set one for your website you should:

Make a square image of your logo (preferably 32x32 or 16x16 pixels, as far as I know there's no max size*), and transform it into an .ico file. You can do this on Gimp, Photoshop (with help of a plugin) or a website like Favicon.cc or RealFaviconGenerator.
Then, you have two ways of setting it up:
A) Placing it on the root folder/directory of your website (next to index.html)
with the name favicon.ico.
or
B) Link to it between the <head></head> tags of every .html file on your site, like this:
```
<head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
```

If you want to see the favicon from any website, just write www.url.com/favicon.ico and you'll (probably) see it. Stackoverflow's favicon is 16x16 pixels and Wikipedia is 32x32.

*: There's even a browser problem with no filesize limit. You could easily crash a browser with an exceedingly large favicon, more info here

Add Favicon to Website

Simply put a file named favicon.ico in the webroot.

If you want to know more, please start reading:

Favicon on Wikipedia
Favicon Generator
How to add a Favicon by W3C (from 2005 though)

Adding a favicon to a static HTML page

You can make a .png image and then use one of the following snippets between the <head> tags of your static HTML documents:

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

How can I get a web site's favicon?

You'll want to tackle this a few ways:

Look for the favicon.ico at the root of the domain
www.domain.com/favicon.ico
Look for a <link> tag with the rel="shortcut icon" attribute
<link rel="shortcut icon" href="/favicon.ico" />
Look for a <link> tag with the rel="icon" attribute
<link rel="icon" href="/favicon.png" />

The latter two will usually yield a higher quality image.

Just to cover all of the bases, there are device specific icon files that might yield higher quality images since these devices usually have larger icons on the device than a browser would need:

<link rel="apple-touch-icon" href="images/touch.png" />

<link rel="apple-touch-icon-precomposed" href="images/touch.png" />

And to download the icon without caring what the icon is you can use a utility like http://www.google.com/s2/favicons which will do all of the heavy lifting:

var client = new System.Net.WebClient();

client.DownloadFile(
    @"http://www.google.com/s2/favicons?domain=stackoverflow.com",
    "stackoverflow.com.ico");

How to Add a Browser Tab Icon (Favicon) For a Website