How to add a browser tab icon (favicon) for a website?
I've been working on a website and I'd like to add a small icon to the browser tab.
How can I do this in HTML and where in the code would I need to place it (e.g. header)? I have a .png logo file that I'd like to convert to an icon.
Related: HTML set image on browser tab.
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
shortcutlink type is often seen beforeicon, 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.icounless 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?
- Use a tool to convert your png to a ico file. You can search "favicon generator" and you can find many online tools.
-
Place the ico address in the
headwith alink-tag:<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">
The best one that I found is http://www.favicomatic.com/ I say best because it gave me the crispest favicon, and required no editing after their transformation. It will generate favicons at 16x16 and 32x32 and to quote them "Every damn size, sir!" Also, their site looks cool and is easy to use.
They also generate the html that you need to use for the files they generate.
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
I looked at the first 20 or so google results, and this was by far the best.