Better place to store your favicon files?

Question

1) I've just done my first favicon files using Real Favicon generator. In the faq of that website it says that it is the very best practice to keep the favicons in the root of the website. I did it but now the root folder has 26 new files!!!
What I will lose if I move the favicon files to a sub-folder? Ex: /favicon/favicon.ico

2) I've noticed that different websites use different methods in terms of favicon code.
Bootstrap, for instance has just these lines of code:

<link rel=apple-touch-icon href=/apple-touch-icon.png>

<link rel=icon href=/favicon.ico>

Others have plenty of favicons like Wordpress.com:

<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32">

<link rel="shortcut icon" type="image/x-icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32">

<link rel="icon" type="image/x-icon" href="//s1.wp.com/i/favicon.ico" sizes="16x16 32x32">

<link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/favicon-64x64.png" sizes="64x64">

<link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/favicon-96x96.png" sizes="96x96">

<link rel="icon" type="image/png" href="//s1.wp.com/i/favicons/android-chrome-192x192.png" sizes="192x192">

<link rel="apple-touch-icon" sizes="57x57" href="//s1.wp.com/i/favicons/apple-touch-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="//s1.wp.com/i/favicons/apple-touch-icon-60x60.png">

<link rel="apple-touch-icon" sizes="72x72" href="//s1.wp.com/i/favicons/apple-touch-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="//s1.wp.com/i/favicons/apple-touch-icon-76x76.png">

<link rel="apple-touch-icon" sizes="114x114" href="//s1.wp.com/i/favicons/apple-touch-icon-114x114.png">

<link rel="apple-touch-icon" sizes="120x120" href="//s1.wp.com/i/favicons/apple-touch-icon-120x120.png">

<link rel="apple-touch-icon" sizes="144x144" href="//s1.wp.com/i/favicons/apple-touch-icon-144x144.png">

<link rel="apple-touch-icon" sizes="152x152" href="//s1.wp.com/i/favicons/apple-touch-icon-152x152.png">

<link rel="apple-touch-icon" sizes="180x180" href="//s1.wp.com/i/favicons/apple-touch-icon-180x180.png"> 

For a simple website that does not want more than appear in all browsers do I really should use all the files of the second example - WordPress (and that were provided by the favicon generator), or will I get satisfied with the minimal Bootstrap approach?

Answer 1

1) By putting the icons in a sub-directory, you get a few minor drawbacks:

• You need to declare favicon.ico and browserconfig.xml in the HTML. Two lines of code you can skip if the icons are in the root folder, because this is where IE looks by convention.
• In your logs you will notice 404 with URLs such as /apple-touch-icon-precomposed-120x120.png.
• Yandex search engine displays favicons in its SERP. Apparently it finds them only by looking at the root folder (it doesn't consider the link markup). Yandex is used mostly in Russia.

2) You can keep only one Apple Touch icon. It's good enough. Make sure to keep apple-touch-icon.png and make it 180x180. Next release of RealFaviconGenerator will generate only one Touch icon by default.

Oh, and as the author of RealFaviconGenerator, I congratulate you for your excellent choice ;-)