20

What markup is the modern standard for adding a favicon to my site? What is the standard image format and size?

8

To work in all browsers, .ico is preferred, as for the size, 32x32 is the most widely used, 16x16 also works (this is the actual size used in the browser in most places).

Also not in your question, they should be 8 or 24bit color depth.

It may be worth noting, if you plan on iWhatever users bookmarking your site, that's a separate <link> for the image, for example StackOverflow's:

<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">

Which is:
SO Touch Icon

6

You can use a tool like http://www.favicon.cc/ to importe a picture and convert it into a favicon, or just create it from scratch.

After that, if you name your file favicon.ico and put it at the root of your website, most of the web-browsers get it automatically.

But you can also explicitly declare it in your html files like this:

<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />

With the advantages to use other format than ico, use differents favicons on differents pages, put your favicon to an other place, use an other name than favicon etc.

4

http://en.wikipedia.org/wiki/Favicon

2

Markup with full domain http path for IE and keep favicon in document folder:

<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">

Standard image format:

  • .ico
  • 16 x 16 pixels
1

For different devices, browsers and OS you can use different icons. For example below is a list that might get you inspired. Do by all means correct/edit the list as things progress.

<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />
0

You don't need a link anymore, but it's useful. Instead, so long as you leave the file named favicon.ico (and it's an ico) in your root, it'll be used as the favicon.

0

I had a little trouble creating my .ico file with the GIMP, but this post gives detailed instructions. The trick appears to be saving as GIF format first to convert to an indexed colour table, and then convert that to ICO format.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.