<link rel="icon">

Simply add the following code to the  <head> element

<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://example.com/favicon.png"</span>></span>

The best one that I found is 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.

<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"57x57"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-57x57.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"114x114"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-114x114.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"72x72"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-72x72.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"144x144"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-144x144.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"60x60"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-60x60.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"120x120"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-120x120.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"76x76"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-76x76.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"apple-touch-icon-precomposed"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"152x152"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"apple-touch-icon-152x152.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-196x196.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"196x196"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-96x96.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"96x96"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-32x32.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"32x32"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-16x16.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"16x16"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"icon"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"image/png"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"favicon-128.png"</span> <span class="hljs-attr">sizes</span>=<span class="hljs-string">"128x128"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"application-name"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"<span class="hljs-symbol">&nbsp;</span>"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-TileColor"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"#FFFFFF"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-TileImage"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-144x144.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-square70x70logo"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-70x70.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-square150x150logo"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-150x150.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-wide310x150logo"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-310x150.png"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"msapplication-square310x310logo"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"mstile-310x310.png"</span> /></span>

I looked at the first 20 or so google results, and this was by far the best.

This git page explains what most of these icons are used for: github.com/audreyr/favicon-cheat-sheet

Categorized in:

Website, Learning,