8

I'm using this online favicon generator to create a favicon for my site and the tool output provides a lot of icons, not only the website favicon. I was curious about which of them do you consider mandatory for a website, and which do you think are unnecessary:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
oguz ismail
  • 1
  • 16
  • 47
  • 69
san671
  • 85
  • 1
  • 3
  • in my opinion, you should take them all. refer http://stackoverflow.com/a/26807004/1155282 – Irshu Jun 06 '16 at 09:27

3 Answers3

8

Unless you have specific needs, your website should probably support all major platforms: desktop browsers, iOS Safari, Android Chrome, etc.

Is the "online favicon generator" you mention RealFaviconGenerator? If so, you may want to know it's undergoing a huge refactoring to produce a minimalist set of icons.

While its output is still in testing phase, here it is:

  • A single 180x180 Touch icon. iOS Safari scales it down just fine if it needs to.
  • A manifest.json file for Android Chrome, with two 192x192 and 512x512 icons.
  • A browserconfig.xml file for Windows 8.1 and 10, with a single icon.
  • A mask icon for Mac OS Safari.
  • The classic gang for desktop browsers: favicon.ico and two 16x16 and 32x32 icons. Maybe some of these icons might be dropped.

In the end, the code:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#14b036">

... if you put the files in your root directory. Else, you need to declare browserconfig.xml and favicon.ico, too.

Full disclosure: I'm the author of RealFaviconGenerator.

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • The one I am using is favicon-generator.org actually but thanks for the info. – san671 Jun 09 '16 at 17:06
  • FWIW, it seems that in practice most if not all browsers fetch all `` icons regardless of whether they settle on a smaller version in the end (e.g. 32x32 vs 256x256), so there is no benefit to special-casing smaller icons unless you want them to look differently than an auto-scaled version. – agurtovoy Nov 22 '17 at 21:27
1

You want to have ICO pictures at least for these standard dimensions: 16x16, 32x32 and 48x48 pictures in ICO format. However, in same cases you may want to have up to 196x196. I would keep them all, so that each client configuration can pick its preferred one.

References: Ref1 Ref2 Ref3

Community
  • 1
  • 1
Manu
  • 4,019
  • 8
  • 50
  • 94
0

If you want to limit it to just what may be necessary, you might want to consider the three favicons.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

You can choose one of these, the deciding factor being the size, which affects the quality of the icon.

Vasili Syrakis
  • 9,321
  • 1
  • 39
  • 56