1

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.

Svish
  • 152,914
  • 173
  • 462
  • 620
  • I can not clearly understand what you want to do? You want to cover all the common image sizes, like 16x16, 24x24, 32x32, etc? Can you please elaborate a bit more? – bosnjak Mar 14 '14 at 13:05
  • Found a helpful site so added an answer myself. Should be clear to you what I meant after seeing that ;) – Svish Mar 14 '14 at 13:21

2 Answers2

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!

Svish
  • 152,914
  • 173
  • 462
  • 620
  • 1
    Oh yeah, what a great resource! Well, I'm the author of RFG, so I might not be impartial :) About the size of the different pictures and their size, you can find a list here: http://realfavicongenerator.net/faq#why_so_many_files – philippe_b Mar 15 '14 at 08:24
  • @philippe_b That's awesome! I am impartial and I find it a great resource as well :p – Svish Mar 15 '14 at 23:19
0

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

Mark
  • 4,773
  • 8
  • 53
  • 91