Properly define icon for website

Question

Say I have an SVG with an icon I want to use for my website.

1. What sizes and formats should I convert it into?
2. How would my HTML look like?

I know how to specify a simple 16x16 favicon, but my goal here is that the icon should work and look good for as many use-cases as possible. For example the favicon, bookmarks, iPhone touch icons, desktop icons, windows 8 pinned web sites, and so on.

So, basically looking for an HTML example which covers as much as possible together what format and size the image files should be in.

Answer 1

Found a very helpful site, RealFaviconGenerator.net. You simply upload your image and it handles the rest for you. The HTML it generates looks like this:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" 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-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

All the links include the sizes the images should be. Additionally the favicon.ico which is not mentioned there because it's assumed to be in its default location contains several different sizes. 16, 24 and 32 I think.

Awsome site!

Answer 2

I would look into something like the ico-moon app. It provides a very easy to use font / svg generator that might work better for you.

http://icomoon.io/app/#/select