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.ico
  • 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.