Remember back when all you needed was just one favicon? Today it's not quite that simple. A lot of new device types support a custom favicons for even more different use case scenarios. But do you really need 27 specific favicon's for your website? I don't think so.
I try to keep it simple and in my opinion three favicons pretty much does the work. Here is what I do:
Create a 260x260 pixels png version of your new favicon.
Go to http://realfavicongenerator.net and generate a new favicon package.
I prefer this generator over the others, because it generates a 48x48 pixels icon file, instead of the old 16x16 standard.
From the downloaded package, I use/rename the following three files and place them in my website root folder:
- favicon-96x96.png -> favicon.png
- apple-touch-icon-152x152.png -> touchicon.png
In my HTML <head> I add the following two favicon link tags:
<link rel="apple-touch-icon" href="/touchicon.png">
<link rel="icon" href="/favicon.png">
That's all. Now get back to work.